iOS UISlider用法及自定义滑块

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

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

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

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


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


如图所示。


iOS UISlider用法及自定义滑块_第1张图片

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

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];


效果如图:


iOS UISlider用法及自定义滑块_第2张图片

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


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

iOS UISlider用法及自定义滑块_第3张图片



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

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



最后,粘一些比较基础的实例方法,(引自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


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




你可能感兴趣的:(【iOS学习】)