给 UIProgressView 脱掉那层微弱的渐变

日常堆码中遇到一个扁平进度条的需求，需要添加一层进度条在表格中整个 Cell 最底层。第一反应想到了 UIProgressView，拖了一个出来看了看，不能修改高度，但是通过拉 AutoLayout 约束可以强制定高，但是会有一个警告：

强制 UIProgressView 高度警告

效果出来大概是这样：

带渐变的 UIProgressView

不仔细看发现不了，其实 UIProgressView 默认填色有一点点渐变效果，包括底色（progress tint color）。（真的看不太出来，如果你用取色计指一下，能看到几个单位的色值偏差）

于是我猜想 UIProgressView 可能是在 Layer 上绘出来的，抱着疑问，决定先把 subviews 打出来看看：

<__NSArrayM 0x7f7fa2a14c80>(
<UIImageView: 0x7f7fa2a0ecd0; frame = (0 0; 355 65); opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x7f7fa2a0ee80>>,
<UIImageView: 0x7f7fa2a0ef50; frame = (0 0; 0 65); opaque = NO; userInteractionEnabled = NO; tintColor = UIDeviceWhiteColorSpace 1 1; layer = <CALayer: 0x7f7fa2a0f100>>
)

po 出来的这个 UIProgressView 正是上图中 “疯狂的海狮” 这一行，这里可以看到里面包着两个 UIImageView，看看其 frame ，第一个宽度 355 差不多正好是整个进度条的宽度，而第二个宽度是 0，所以大致能猜想这两层便是 UIProgressView 控制 UIProgressView 进度的关键。

注：在这个例子里，Progress Tint Color 是白色，Track Tint Color 是黄色。

那么现在得出一个简单结论：

UIProgressView 的 subviews 是两个 UIImageView，第一个是 TrackTintColor 层（轨道），第二个是 Progress Tint Color 层（进度）

那么这两个 UIImageView 是怎么显示的呢？是 Draw 出来的？还是各一张图片着色？

继续抱着疑问的我决定看看这个内部 UIImageView 有没有 UIImage，有的话会是什么样？

我把显示 TrackTintColor 的 UIImageView 的 image 属性弄出来看看。

渐变UIImageView中的着色image

居然是一张 10x4 的图，而且不是纯色。所以引起看起来微弱渐变的原因就在这，UIImageView 正是用这张图放大做的着色，造成的非扁平化效果。

然后就是怎么解决这个问题了，既然我们可以拿到这张图，那最好的解决方式就是直接对这个图做修改，而不去动 UIProgressView 内部的逻辑结构，我们可以到一个 UIImage 的实例方法 imageWithRenderingMode:，参数我们可以用 UIImageRenderingModeAlwaysTemplate 让该图片忽略原来的颜色布局，通过 UIImageView 的 tintColor 属性来自动着色显示。把图片着色成你想要的单色。然后重新丢给这个 UIImageView 就行了，关键代码如下：

UIImageView *progressTintImageView = [progressView.subviews lastObject];
if (progressTintImageView) {
    UIImage *image = [progressTintImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    progressTintImageView.image = image;
    progressTintImageView.tintColor = progressView.progressTintColor;
}

大功告成，曲线救国（偷懒）的方式解决掉 UIProgressView 的自带渐变问题。文中如有错误，还望指正！

推荐订阅源

isaced