给 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 的自带渐变问题。文中如有错误,还望指正!