iOS UISlider用法及自定义滑块

一、学习Slider的时候，发现在设置滑块的轨道图片时总看到一个方法叫做

UIImage *leftTrack = [[UIImage imageNamed:@""] resizableImageWithCapInsets:
UIEdgeInsetsMake(, , , )];

[self.mySlider setMinimumTrackImage:<(UIImage *)> forState:<(UIControlState)>];

(这是直接复制Xcode的方法名及参数）

当时一直不明白resizableImageWithCapInsets:的用法，很多博客上也只说了setMinimumTrackImage:的用法。

如图所示。

所以设置滑块轨道的代码如下

UIImage *leftTrack = [[UIImage imageNamed:@"SliderTrackLeft"] 
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 14, 0, 14)];

[self.mySlider setMinimumTrackImage:leftTrack forState:UIControlStateNormal];
    
UIImage *rightTrack = [[UIImage imageNamed:@"SliderTrackRight"] 
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 14, 0, 14)];

[self.mySlider setMaximumTrackImage:rightTrack forState:UIControlStateNormal];

效果如图：

二、我们来做一个实验，设置UIEdgeInsetsMake(0,4,0,4)

left,right的参数为4px，看一下会发生什么？

这是因为我们设置的左右区域像素不够大，导致有一部分弧形边被纳入了扩展区域。

所以建议设置左右参数时可以尽量大一些。

最后，粘一些比较基础的实例方法，（引自Xcode文档）

//设置滑块thumb的图片
- (void)setThumbImage:(UIImage * _Nullable)image
             forState:(UIControlState)state

//设置thumb normal时的图片
UIImage *thumbImageNormal = [UIImage imageNamed:@"SliderThumb-Normal"];

[self.slider setThumbImage:thumbImageNormal forState:UIControlStateNormal];


//设置thumb 按住高亮时的图片
UIImage *thumbImageHighlighted = [UIImage imageNamed:@"SliderThumb-Highlighted"];

[self.slider setThumbImage:thumbImageHighlighted forState:UIControlStateHighlighted];

//设置右侧track
- (void)setMaximumTrackImage:(UIImage * _Nullable)image
                    forState:(UIControlState)state
//设置左侧track
- (void)setMinimumTrackImage:(UIImage * _Nullable)image
                    forState:(UIControlState)state

实际用法在开头，就不重新写了。