更改iPhone UISlider栏图像

我在我的应用程序中使用UISlider ,但是我想使用自定义的“外观”。 我已经改变了拇指到我自己的形象,但有没有办法改变吧? 我有一个我想要使用的酒吧形象,但不能看到如何做到这一点。

我发现如何改变最大和最小图像,但不是酒吧本身。

您正确使用了-setMinimumTrackImage:forState:-setMaximumTrackImage:forState:方法。 你错过的是你应该提供可伸缩的UIImage给他们,其余的自动照顾:

 UIImage *sliderLeftTrackImage = [[UIImage imageNamed: @"SliderMin.png"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0]; UIImage *sliderRightTrackImage = [[UIImage imageNamed: @"SliderMax.png"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0]; [mySlider setMinimumTrackImage: sliderLeftTrackImage forState: UIControlStateNormal]; [mySlider setMaximumTrackImage: sliderRightTrackImage forState: UIControlStateNormal]; 

您可以为最小和最大部分使用相同的图像。

最简单的解决scheme是在控件后面呈现UIImage来表示轨道。 拇指旋钮可以改变:

 [mySlider setThumbImage:[UIImage imageNamed:@"thumb_image.png"] forState:UIControlStateNormal]; 

这样做的一个副作用就是,除非你提供自己的曲目,否则曲目不会被渲染。 这与UIImage相结合,为您提供了一个自定义的UISlider,而无需任何子类化。

把它放在一个现代的方式

如果您在故事板中定义UISlider,则在“视图”的子类中设置滑块的最佳位置。 在awakeFromNib中,您可以更改button,左右轨道。

此调用在iOS 5中已被弃用stretchableImageWithLeftCapWidth:topCapHeight:

 - (void)awakeFromNib { [super awakeFromNib]; UIImage *thumbImage = [UIImage imageNamed:@"slider-button"]; [self.slider setThumbImage:thumbImage forState:UIControlStateNormal]; UIImage *sliderLeftTrackImage = [UIImage imageNamed: @"slider-fill"]; sliderLeftTrackImage = [sliderLeftTrackImage resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeStretch]; UIImage *sliderRightTrackImage = [UIImage imageNamed: @"slider-track"]; sliderRightTrackImage = [sliderRightTrackImage resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeStretch]; [self.slider setMinimumTrackImage:sliderLeftTrackImage forState:UIControlStateNormal]; [self.slider setMaximumTrackImage:sliderRightTrackImage forState:UIControlStateNormal]; } 

从iOS 5.0开始不再使用stretchableImageWithLeftCapWidth: 该文档说,而不是使用capInsets属性。 这是一个简单的方法来做到这一点:

创build三个图像,最小(左)轨道,最大(右)轨道和拇指。 对于这个例子,假设最小和最大的轨道图像是34p H x 18p W,如下所示: 分钟的轨道 和这个: 在这里输入图像描述

像往常一样创build图像:

 UIImage *thumbImage = [UIImage imageNamed:@"sliderThumb.png"]; UIImage *sliderMinTrackImage = [UIImage imageNamed: @"sliderMin.png"]; UIImage *sliderMaxTrackImage = [UIImage imageNamed: @"sliderMax.png"]; 

对于我的18点宽的图像例子,左侧和右侧的内部点可以拉伸以适应轨道,但是末端应该具有17点宽的不可拉伸的帽尺寸(因此capInsets ):

 sliderMinTrackImage = [sliderMinTrackImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, 17, 0, 0)]; sliderMaxTrackImage = [sliderMaxTrackImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 17)]; 

然后像以前一样在你的UISlider上设置图像:

 [slider setThumbImage:thumbImage forState:UIControlStateNormal]; [slider setMinimumTrackImage:sliderMinTrackImage forState:UIControlStateNormal]; [slider setMaximumTrackImage:sliderMaxTrackImage forState:UIControlStateNormal]; 

在这里输入图像描述

这里有一种方法来添加一个没有拉伸的轨道图像,所以你可以在背景中有一个楔形,就像OP所问:

Swift 3.0:

 let trackImg = image.resizableImage(withCapInsets: .zero, resizingMode: .tile) slider.setMinimumTrackImage(trackImg, for: .normal) slider.setMaximumTrackImage(trackImg, for: .normal) 

重要提示:请确保滑块的宽度与图像的宽度完全相同!

您需要inheritanceUISlider并覆盖:

 - (CGRect)trackRectForBounds:(CGRect)bounds 

讨论你不应该直接调用这个方法。 如果要自定义轨道矩形,可以覆盖此方法并返回不同的矩形。 返回的矩形用于在绘制过程中缩放轨道和缩略图。

我正在这样做,但后台栏在iOS 5.1中没有完美展现,而是在iOS 6.0中显示

这是我的代码

  UIImage *stetchLeftTrack = [[UIImage imageNamed:@"spectrum_horizontal_bar.png"] stretchableImageWithLeftCapWidth:15.0 topCapHeight:0.0]; UIImage *stetchRightTrack = [[UIImage imageNamed:@"spectrum_horizontal_bar.png"] stretchableImageWithLeftCapWidth:15.0 topCapHeight:0.0]; [self.slider_Sprectrum setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal]; [self.slider_Sprectrum setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];