ios 更改 iPhone UISlider 栏图像

Change iPhone UISlider bar image

提问by Fogmeister

I'm using a UISliderin my app but I'd like to use a custom "look-and-feel" for it. I have changed the thumb to my own image but is there a way to change the bar also? I have a bar image I would like to use but can't see how to do this.

我UISlider在我的应用程序中使用 a ，但我想为它使用自定义的“外观”。我已将拇指更改为我自己的图像，但是否也可以更改条形图？我有一个想要使用的条形图，但不知道如何执行此操作。

I have found how to change the max and min image but not the bar itself.

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

回答by Costique

You were right to use -setMinimumTrackImage:forState:and -setMaximumTrackImage:forState:methods. What you missed is that you should provide stretchable UIImageto them, the rest is taken care of automagically:

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

You can use the same image for both the min and max parts.

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

回答by Stephen Melvin

The simplest solution would be to render a UIImage behind the control to represent the track. The thumbknob can be changed with:

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

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

A side-effect of this is that the track isn't rendered unless you provide your own. This, combined with the UIImage, provide you with a custom UISlider without you having to subclass anything.

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

回答by Cameron Lowell Palmer

Putting it all together in a modern way

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

If you define the UISlider in a Storyboard the best place to style the Slider is in the View's subclass. In awakeFromNib you can change the button, left and right track.

如果您在 Storyboard 中定义 UISlider，则设置 Slider 样式的最佳位置是在 View 的子类中。在awakeFromNib 中，您可以更改按钮、左右轨道。

This call is deprecated in iOS 5 stretchableImageWithLeftCapWidth:topCapHeight:

此调用在 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];
}

回答by Scotty

stretchableImageWithLeftCapWidth:has been deprecated since iOS 5.0. The docs say to use 'capInsets' property instead. Here's an easy way to do that:

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

Create three images, the min (left) track, the max (right) track, and the thumb. For this example, assume the min and max track images are 34p H x 18p W, something like this: and this: .

创建三个图像，最小（左）轨道、最大（右）轨道和拇指。在这个例子中，假设最小和最大轨道图像是 34p H x 18p W，像这样：和这个：。

Create the images as usual:

照常创建图像：

UIImage *thumbImage = [UIImage imageNamed:@"sliderThumb.png"];

UIImage *sliderMinTrackImage = [UIImage imageNamed: @"sliderMin.png"];

UIImage *sliderMaxTrackImage = [UIImage imageNamed: @"sliderMax.png"];

For my 18 point wide image examples, the inner point on the left and the right can be stretched to fit the track, but the ends should have unstretchable cap sizes 17 points wide (hence the capInsets):

对于我的 18 磅宽图像示例，可以拉伸左侧和右侧的内点以适合轨道，但末端应具有 17磅宽的不可拉伸的帽尺寸（因此为capInsets）：

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

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

Then set the images on your UISlider as always:

然后像往常一样在 UISlider 上设置图像：

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

回答by Dorian Roy

Here is a way to add a track image that is not stretched so you can have e.g. a wedge shape in the background just as the OP asked:

这是一种添加未拉伸的轨道图像的方法，因此您可以像 OP 要求的那样在背景中使用楔形形状：

Swift 3.0:

斯威夫特 3.0：

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

Important:make sure that the width of your slider is exactly the same as the width of the image!

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

回答by willcodejavaforfood

You need to subclass UISliderand override:

您需要继承 UISlider并覆盖：

- (CGRect)trackRectForBounds:(CGRect)bounds

Discussion You should not call this method directly. If you want to customize the track rectangle, you can override this method and return a different rectangle. The returned rectangle is used to scale the track and thumb images during drawing.

讨论 你不应该直接调用这个方法。如果要自定义轨道矩形，可以覆盖此方法并返回一个不同的矩形。返回的矩形用于在绘制期间缩放轨道和拇指图像。

回答by Dk Kumar

I am doing this but the back bar is not showing perfectly in iOS 5.1 but in iOS 6.0 its displaying

我正在这样做，但后栏在 iOS 5.1 中没有完美显示，但在 iOS 6.0 中显示

here is my code

这是我的代码

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