自定义 UISlider 外观答案

【问题标题】：Customizing UISlider look自定义 UISlider 外观
【发布时间】：2010-10-19 19:45:09
【问题描述】：

要自定义 UISlider 的视觉外观，您可以设置缩略图和轨道图像。部分轨道图像被拉伸到适当的位置。来自文档：

一个可拉伸的区域位于两个之间端盖区域。端盖定义图像中剩余的部分按原样，不拉伸。这可拉伸区域为 1 点宽端盖之间的区域，可以是复制以使图像出现更长。

现在我遇到的问题是我的可拉伸区域需要超过 1 磅宽。（这是一种模式）不幸的是，SDK 中似乎对 1 点宽度进行了硬编码。

有人知道如何解决这个问题吗？还是我必须为此从头开始编写自己的滑块？

【问题讨论】：

标签： ios cocoa-touch uikit uislider

【解决方案1】：

只要用透明图片作为轨迹图片，在下面放一个 UIImageView :)

【讨论】：

您可以简单地设置[self setMinimumTrackImage:nil forState:UIControlStateNormal]; [self setMaximumTrackImage:nil forState:UIControlStateNormal];。如果你这样做，你还需要设置[self setThumbImage:[UIImage imageNamed:@"whatever.png"] forState:UIControlStateNormal];。
传递 nil 不起作用，因为框架在未设置任何内容时默认为默认图像。您实际上必须使用透明图像。
如果您不打算在用户随时间更改值时更改trackImage的外观，则可以使用

【解决方案2】：

我知道这是迟到的答案。

但我解决了以下问题：

4 是 png 文件中圆帽的宽度。

UIImage *minimum = [UIImage imageNamed:@"slider_minimum.png"];
[slider setMinimumTrackImage:[minimum stretchableImageWithLeftCapWidth:4 topCapHeight:0]
                      forState:UIControlStateNormal];

【讨论】：

strechableImageWithLeftCapWidth: 已弃用，应使用 resizableImageWithCapInsets: 代替，这使整个事情变得更加容易。

【解决方案3】：

我相信您必须编写自己的滑块才能做到这一点。似乎没有（公共）API 可以更改 UISlider 关于可拉伸区域的行为。

【讨论】：

【解决方案4】：

您可以将图像创建为您需要的宽度，并预先渲染图案。

【讨论】：

这不是真正的问题。问题是仅使用 1 点宽度来拉伸图像。
但是你不能只使用不可拉伸的图像吗？只需创建一个 480 像素宽的图片，看起来像您想要的那样，然后使用该图片。
如果您的滑块具有固定宽度，则此方法有效。如果需要可变宽度，可以使图像大于所需的最大尺寸，但是拇指最小时滑块的最小端，拇指最大时滑块的最大端，不要显示他们图像的结尾部分。图像只是在超出滑块长度的位置被截断。

【解决方案5】：

您需要使用 stretchableImageWithLeftCapWidth:topCapHeight: 来初始化您的图像。 leftCapWidth 和 topCapHeight 是图像对象的只读属性，但使用该函数可以设置它们。你只设置 left 和 top 因为左右 caps 的大小相同，top 和 bottom 也相同。因此，要使用左侧大小为 5 像素的自定义滑块轨道，您需要有一个 11 像素宽的图像，无论您需要什么高度：左帽为 5，轨道拉伸为 1 像素宽，右边还有 5 个。没有玩过，我不知道使用大于 0 的 topCapHeight 是否按预期工作，但我怀疑它不会引起很多问题。

【讨论】：

糟糕。我在想你的左右两端只使用了 1 个像素。以这种方式阅读文档听起来好像你必须自己动手。

【解决方案6】：

我想要 UISlider 后面的模式。我最终将两个图像都设置为 nil 并在滑块下添加了一个视图，因为我不需要它在拇指的任何一侧都不同。如果您需要根据位置更改它，这将更加困难，但非常可行。

【讨论】：

【解决方案7】：

要制作您的自定义 UISlider，您有很多方法。取决于你想要什么定制。您可以设置默认属性来自定义 UIslider，如下所示： setThumbImage:forState: setMinimumTrackImage:forState: setMaximumTrackImage:forState: 如果您想进一步定制，可以参考以下链接 https://medium.com/@0209neha/creating-a-custom-uislider-7756bf898832#.o1l4qhymo https://github.com/0209Neha/ExploringSlider

【讨论】：