更改 iPhone UISlider 栏图像答案

【问题标题】：Change iPhone UISlider bar image更改 iPhone UISlider 栏图像
【发布时间】：2011-01-23 16:09:30
【问题描述】：

我在我的应用程序中使用UISlider，但我想为它使用自定义的“外观”。我已将拇指更改为我自己的图像，但有没有办法也更改栏？我有一个条形图，我想使用，但不知道怎么做。

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

【问题讨论】：

我已经尝试过 [slider setMinimumTrackImage:forState:] 方法，但这会使用图像并根据滑块的放置位置对其进行缩放。我想要的是在整个滑块上使用单个图像，当拇指在滑块上移动时保持静止。想象一个带有楔形的音量滑块，以表示一端为空而另一端为满的相对卷。当滑块移动时，楔形保持原样。这是我希望能够做到的。谢谢！
您可以与用户分享自定义滑块图片的示例吗？

标签： ios objective-c iphone image uislider

【解决方案1】：

这是一种添加未拉伸的曲目图像的方法，因此您可以拥有例如正如 OP 要求的那样，背景中有一个楔形：

Swift 3.0：

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

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

【讨论】：

【解决方案2】：

我正在这样做，但后栏在 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];

【讨论】：

@Hari Karam Singh [[UISlider appearanceWhenContainedIn:[self class], nil] setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal]; [[UISlider appearanceWhenContainedIn:[self class], nil] setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];
嗨 Dk Kumar 我在 IOS 5 中也面临同样的问题，但在 IOS 6 中工作。我使用两个图像作为最小值和最大值，两者都相同。拇指图像是一个小的透明发光图像。在IOS 我可以在拇指后面看到一条线......你能帮助你解决你的情况以避免歪斜/拉伸......
尝试删除 stretchableImageWithLeftCapWidth ... 仅使用 [UIImage imageNamed:@"spectrum_horizontal_bar.png"] ... 它会在滑动滑块时开始显示正确的颜色。我在这里注意到的唯一一个问题是，当您移动到最大值和最小值时，它会改变滑块的左角半径......我也在寻找它的解决方案。
此外，stretchableImageWithLeftCapWidth 在 iOS 5 中已弃用。使用 resizableImageWithCapInsets 作为替代。

【解决方案3】：

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

【讨论】：

【解决方案4】：

您使用-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];

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

【讨论】：

其实你的回答可以和史蒂夫梅尔文的回答合并，形成一个完整的解决方案。
在 iOS 5 上仅供参考，具体取决于您的滑块图像，您会得到一些搞砸的平铺

【解决方案5】：

以现代方式将所有内容组合在一起

如果您在 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];
}

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

对于 iOS 5 中的标准 UISlider 似乎不再适用，除非我错过了什么。
[[UISlider appearanceWhenContainedIn:[self class], nil] setThumbImage:[UIImage...] forState:UIControlStateNormal];。我认为您也可以使用UIControlStateHighlighted 来制作“触地”图像。

【解决方案7】：

您需要继承 UISlider 并覆盖：

- (CGRect)trackRectForBounds:(CGRect)bounds

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

【讨论】：