31

UISlider在我的应用程序中使用 a 但我想为它使用自定义的“外观”。我已将拇指更改为我自己的图像,但有没有办法也更改栏?我有一个我想使用的条形图像,但看不到如何执行此操作。

我找到了如何更改最大和最小图像,但不是栏本身。

4

7 回答 7

60

你是正确的使用-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];

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

于 2010-03-04T13:20:06.373 回答
25

最简单的解决方案是在控件后面渲染一个 UIImage 来表示轨道。拇指旋钮可以通过以下方式更改:

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

这样做的副作用是除非您提供自己的轨道,否则不会渲染轨道。这与 UIImage 相结合,为您提供自定义 UISlider,而无需您对任何内容进行子类化。

于 2010-03-11T21:22:34.813 回答
8

在此处输入图像描述

这是一种添加未拉伸的轨道图像的方法,因此您可以在背景中具有例如楔形,就像 OP 要求的那样:

斯威夫特 3.0:

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

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

于 2016-12-14T17:14:13.147 回答
7

以现代方式将它们组合在一起

如果您在 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];
}
于 2013-07-27T08:42:04.383 回答
4

stretchableImageWithLeftCapWidth:自 iOS 5.0 起已弃用。文档说要改用“capInsets”属性。这是一个简单的方法:

创建三个图像,最小(左)轨道、最大(右)轨道和拇指。对于此示例,假设最小和最大轨道图像为 34p H x 18p W,类似于:最小轨道和 this: 在此处输入图像描述

像往常一样创建图像:

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];
于 2013-11-26T22:14:18.570 回答
1

您需要继承 UISlider并覆盖:

- (CGRect)trackRectForBounds:(CGRect)bounds

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

于 2010-03-04T13:07:06.610 回答
0

我正在这样做,但后栏在 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];
于 2012-12-24T08:10:59.143 回答