iPhone自定义UISlider预加载和圆角边缘问题

Question

我正在尝试实现一个自定义的UISlider，我已经使用名为UISliderCustom的类进行了扩展，其中包含以下代码：

@implementation UISliderCustom

- (id)initWithCoder:(NSCoder *)aDecoder{
    if(self == [super initWithCoder:aDecoder]){
        self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, 200, 13);

        UIImage *slideMin = [[UIImage imageNamed:@"slideMinimum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
        UIImage *slideMax = [[UIImage imageNamed:@"slideMaximum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];

        [self setThumbImage:[UIImage imageNamed:@"slideThumb.png"] forState:UIControlStateNormal];
        [self setThumbImage:[UIImage imageNamed:@"slideThumb.png"] forState:UIControlStateHighlighted];

        [self setMinimumTrackImage:slideMin forState:UIControlStateNormal];
        [self setMaximumTrackImage:slideMax forState:UIControlStateNormal];
    }

    return self;
}    

@end

我遇到了两个小问题：

1. 当我将滑块滑动到边缘（进度=0.0 / 进度=1.0）时，我可以清楚地看到边缘上的“剩余部分”，不确定如何处理这个问题。

   滑块图片：

   问题：

   

2. 我看到常规的UISlider（蓝色和银色）几秒钟，然后才加载自定义图形，或者当我实际移动滑块时。我不确定为什么会发生这种情况... 编辑：这只在模拟器中发生，在真机上正常运行。

感谢您提前的帮助 :)
Shai.

- Shai Mishali

---

只是一个小提示- 显然第一个问题（加载延迟）只会在模拟器中出现，所以我的主要问题是第二个。 - Shai Mishali

Answer 1

我自己也遇到了非常相似的问题。事实证明，我在界面构建器中添加的滑块的尺寸（宽度x高度）与我用于自定义滑块的图像的尺寸不匹配。一旦我使它们匹配，那些滑块末端的“剩余”就消失了。

- user1664147

Answer 2

您无需子类化UISlider即可实现此效果，如果您这样做了，肯定不会在drawRect方法中设置轨道图像。 drawRect应该仅包含绘图代码，每当控件的任何部分需要重绘时都会调用它。

在单独的方法中设置拇指和轨道图像，可以在您的子类中（从initWithFrame和initWithCoder中调用）或首次创建滑块的对象中完成。这只需要在创建滑块时执行一次。不要覆盖drawRect。

您也不需要手动调用awakeFromNib，除非您还有其他特定代码？如果您只从IB使用滑块，则这将是设置自定义图像的常见位置。

对于正方形端点，问题在于轨道图像的极端边缘是正方形的，因此它显示在拇指周围。将轨道图像的两端都变成圆形，并在中间放置1px可拉伸区域，就像这样：

- jrturton

---

感谢这些信息，但无论如何都不能解决我的问题。这只是一个最佳实践的答案（我很高兴学习），但它无法解决奇怪的边缘问题，我不确定为什么会出现这种情况。 - Shai Mishali

我不确定边缘问题是否是由于您覆盖drawRect引起的。您能否在问题中包含您的轨迹图像？ - jrturton

我有一种感觉是因为所有的资源都是PNG格式，但我需要透明度，所以我不能使用其他任何资源... - Shai Mishali

将圆形端点放在轨道图像的每个端点上，中间有1个像素会被拉伸。就这样！ - jrturton

你可以将左侧帽子大小设定为固定量（在本例中为12像素）。iOS假定下一个像素是可以被拉伸的部分（例如，可以重复无畸变）并且图像的剩余部分是右侧帽子。 - jrturton