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];
你可以在最小值和最大值部分使用相同的图像。
最简单的解决方案是在控件后面渲染一个UIImage来代表轨道。可以使用以下代码更改拇指按钮:
[mySlider setThumbImage:[UIImage imageNamed:@"thumb_image.png"] forState:UIControlStateNormal];
这样做的一个副作用是,如果你不提供自己的轨道,那么轨迹将不会被渲染。而结合UIImage使用,则可以为你提供一个定制的UISlider,而无需子类化任何内容。
[[UISlider appearanceWhenContainedIn:[self class], nil] setThumbImage:[UIImage...] forState:UIControlStateNormal];
的翻译是:使用指定的图像设置滑块控件在正常状态下的滑块图片。如果需要实现“按下”效果,可以使用 UIControlStateHighlighted
。 - Hari Honor如果您在Storyboard中定义了UISlider,则最好的样式化Slider的地方是在View的子类中。在awakeFromNib中,您可以更改按钮、左侧和右侧轨道。
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];
}
stretchableImageWithLeftCapWidth:自iOS 5.0以来已被弃用。文档建议使用“capInsets”属性代替。以下是一个简单的方法:
创建三个图像,包括最小(左)轨道、最大(右)轨道和滑块。对于此示例,请假设最小和最大轨道图像为34p H x 18p W,如下所示: 和这个:
。
像往常一样创建图像:
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];
您需要继承UISlider并重写以下内容:
- (CGRect)trackRectForBounds:(CGRect)bounds
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];