iOS UISlider用法及自定义滑块_ios uislider 自定义滑块显示文字-优快云博客

本文介绍了在iOS中使用UISlider时如何设置滑块的轨道图片，特别是探讨了resizableImageWithCapInsets:方法的用法。通过实验展示了设置UIEdgeInsetsMake(0, 4, 0, 4)对滑块效果的影响，提醒开发者在设置左右区域像素时要考虑到避免弧形边被纳入扩展区域。" 133682985,9221330,Java并发资源访问：synchronized、ReentrantLock与Atomic类,"['java', '并发编程', 'jvm', '开发语言']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

UIImage *leftTrack = [[UIImage imageNamed:@""] resizableImageWithCapInsets:
UIEdgeInsetsMake(<CGFloat top>, <CGFloat left>, <CGFloat bottom>, <CGFloat right>)];

[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

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