logo标签列表

自定义 UISlider 外观

ioscocoa-touchuikituislider
10

要自定义UISlider的视觉外观，您可以设置拇指和轨道图像。轨道图像的一部分会被拉伸到相应的宽度。根据文档：

一个可拉伸的区域位于两个端帽区域之间。端帽定义了保持不变且不被拉伸的图像部分。可拉伸区域是端帽之间的1点宽度区域，可以复制以使图像看起来更长。

现在我遇到的问题是，我的可拉伸区域需要超过1点宽度（它是一个图案）。不幸的是，SDK中好像将1点宽度硬编码了。

有没有人想出如何解决这个问题的想法？或者我是否必须从头开始编写自己的滑块？

7个回答
12

只需使用透明图片作为跟踪图像，并在下方放置UIImageView即可 :)

你可以简单地设置 [self setMinimumTrackImage:nil forState:UIControlStateNormal]; [self setMaximumTrackImage:nil forState:UIControlStateNormal];。如果你这样做，你还需要设置 [self setThumbImage:[UIImage imageNamed:@"whatever.png"] forState:UIControlStateNormal];。 - Sam Soffes
7
传递 nil 是不行的，因为当没有设置任何内容时，框架会默认使用默认图像。你实际上需要使用透明图像。 - Rafael Bugajewski
如果您不打算在用户随时间更改值时更改trackImage的外观，则可以使用此功能。 - EFE
2

我知道回答晚了。

但是我按照以下方式解决了这个问题:

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

UIImage *minimum = [UIImage imageNamed:@"slider_minimum.png"];
[slider setMinimumTrackImage:[minimum stretchableImageWithLeftCapWidth:4 topCapHeight:0]
                      forState:UIControlStateNormal];
strechableImageWithLeftCapWidth:已被弃用，应使用resizableImageWithCapInsets:代替，后者使整个过程更加容易。 - Q8i
1

我相信您将需要编写自己的滑块来完成此操作。似乎没有（公开的）API可以更改UISlider有关可拉伸区域的行为。

1

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

1
这并不是真正的问题。问题在于只使用了1个点的宽度来拉伸图像。 - tcurdt
但你不能只使用一个非可拉伸的图像吗？只需创建一个宽度为480px的外观符合要求的图像，然后使用该图像即可。 - Ed Marty
如果您的滑块有固定的宽度，那么这个方法就可以使用。如果您需要一个可变宽度的滑块，您可以将图片设置为大于所需的最大尺寸，但是当拇指在最小位置时，滑块的最小端和当拇指在最大位置时，滑块的最大端不会显示他们图像的末端部分。图片会被直接切掉超过滑块长度的部分。 - arlomedia
0
0

我想在我的UISlider后面添加一个图案。最终，我将两个图像都设置为nil，并在滑块下方添加了一个视图，因为我不需要它在拇指的任一侧有所不同。如果您需要根据位置更改它，则可能会更加困难，但是完全可行。

0
你需要使用stretchableImageWithLeftCapWidth:topCapHeight:来初始化你的图片。leftCapWidth和topCapHeight是图像对象上的只读属性，但使用该函数可以设置它们。你只需设置左侧和顶部，因为左右两侧的帽子大小相同，上下也是如此。因此，要使用具有5像素左侧大小的自定义滑块轨道，你需要拥有一个宽度为11像素的图像，高度为你需要的任何高度：5个用于左侧帽子，1像素宽度的被拉伸的轨道，以及5个用于右侧。我没有尝试过使用大于0的topCapHeight是否按预期工作，但我怀疑它不会引起太多问题。
哎呀，我一直以为它只使用了一个像素来处理你的左右端点。按照那种方式阅读文档似乎确实需要自己编写代码。 - HitScan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接