UISlider 设置带圆角的图片

Question

我需要一个圆形的 uslider，但是当我尝试设置图片时，它会显示矩形的图片。

我需要像这张图片一样的效果：

这是我的代码：

UIImage *volumeBackgroundImage = [[UIImage imageNamed:@"l2.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(9, 5, 7, 5)];
    [self.audioSlider setMinimumTrackImage:[[UIImage imageNamed:@"l1.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(9, 5, 7, 5)]
                               forState:UIControlStateNormal];
    [self.audioSlider setMaximumTrackImage:volumeBackgroundImage
                               forState:UIControlStateNormal];
    [self.audioSlider setThumbImage:[UIImage imageNamed:@"sliderhandle.png"]
                        forState:UIControlStateNormal];

有人能帮忙实现这个吗？

- dineshprasanna

Answer 1

您需要拥有圆角图片。例如：

然后只需像这样使用此图像：

[_slider setMinimumTrackImage:[[UIImage imageNamed:@"black_dot.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12)]
    forState:UIControlStateNormal];

[_slider setMaximumTrackImage:[[UIImage imageNamed:@"blue_dot.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12) 
    forState:UIControlStateNormal];

(其中black_dot.png是示例图片，而blue_dot.png将是相同的图片，但颜色为蓝色)

(如果图像出现了像素化 - 那么您需要将此图像放大两倍 - retina图像 - [e-mail])

(或者在您实际需要比给定示例更小的图像时，只需将此图像重命名为[e-mail]，并且代替：UIEdgeInsetsMake（12,12,12,12）使用：UIEdgeInsetsMake（6,6,6,6）)

在此处查看更多信息：https://dev59.com/4V7Va4cB1Zd3GeqPMLPF#8656216

- Guntis Treulands

Answer 2

你可以尝试绘制所需大小的图像，而不是添加可能导致失真的图像。 滑块失真解决方案

- Pooja Kamath

Answer 3

我认为这是因为UISlider本身生成了圆形端点。它假定滑块图像在极限位置时将覆盖端点，因此不会重新绘制它。

一个解决方法可能是自己处理端点的圆角：

self.audioSlider.layer.cornerRadius = 5.0;

尝试使用这个值，它应该可以工作。

或者，您可以确保您的图像具有圆形边缘。

- Mundi

---

不好意思，它还是无法工作，仍然返回相同的结果。有什么解决办法吗？ - dineshprasanna

你尝试了哪个解决方案？两个都试过了吗？ - Mundi

第一种情况下它们返回相同的结果。 第二种情况下，当我放置圆角图像时，它会显示为像素化图像。 - dineshprasanna

看起来只需要给图像提供更高的分辨率就可以了。 - Mundi