iOS 仿华为系统进度条 解决滑动到左边和右边进度条显示异常问

使用系统UISlider 仿华为系统进度条。 样式图如下：

image.png

//设置滑动条高度 （20高）
-(CGRect)trackRectForBounds:(CGRect)bounds{

    bounds.origin.x=10;

    bounds.origin.y=bounds.size.height/2-10;

    bounds.size.height=bounds.size.height/2.0;

    bounds.size.width=bounds.size.width-20;

    return bounds;
}

出现问题，设置了滑动条高度后，出现滑动到95%的时候，进度条都变成蓝色了。
滑动到小于%5的时候，左边已滑动的颜色不出来。

解决方法:设置滑动条高度之后，需要设置左侧和右侧的图片，才能解决。
左侧图片设置和进度条颜色一样的纯色图片(示例蓝色)，右侧图片设置和未选颜色一样的纯色图片（示例灰色）。注意下面三张图中，切图的时候切到边上，每个图片不要有边距。不然效果出来不理想。

左侧和右侧图片样式：

image.png

中间滑块图片样式：

image.png

设置代码：

UIImage *barImageLeft = [[UIImage imageNamed:@"VolumeLeftimg"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)];
 [_volumeSlider setMinimumTrackImage:barImageLeft forState:UIControlStateNormal];
        
UIImage *barImageRight = [[UIImage imageNamed:@"VolumeRightimg"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)];
[_volumeSlider setMaximumTrackImage:barImageRight forState:UIControlStateNormal];
        

最后如果帮助了你，请左边 点赞。