iPhone自定义UISlider预加载和圆边问题 [英] iPhone Custom UISlider preload and rounded edges issues

问题描述

我正在尝试实现一个自定义的UISlider，我用一个名为UISliderCustom的类扩展了它，它有以下代码：

< pre class =lang-cpp prettyprint-override> @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];
}

返回自我;
}

@end


我遇到两个小问题

1. 当我将滑块滑过其中一条边（进度= 0.0 /进度= 1.0）时，我可以清楚地看到遗留下来，我不知道如何处理它，不幸的是:)

   
   
   

   滑块图片：
   
   
   

   
   
   

   问题：

   
   
   




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

提前感谢您的任何帮助:)

Shai。

解决方案

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

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

您也不需要手动调用awakeFromNib，除非您还有一些特定的代码？如果您只使用IB中的滑块，那么这将是在子类中设置自定义图像的常见位置。

对于方形末端，问题是轨迹图像的极限边缘是方形的，因此它显示在拇指周围。使轨道图像的两端都圆化，中间有一个1px可伸缩区域，如下所示：

I'm trying to implement a custom UISlider, I've extended it with a class called UISliderCustom which has the following code:

@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

I ran into two small problems

1. When I slide over the slider to one of the edges (progress = 0.0 / progress = 1.0), I can clearly see "left overs" in the sides, im not sure how to handle that as well, unfortunately :)

   Slider images:

   Problem:

2. I see the regular UISlider (blue and silver) for a couple of seconds, and only then the custom graphics is loaded, or when i actually move the slider. I'm not sure why this is happening.. EDIT: This only happens in the simulator, works fine now.

Thanks in advance for any assistance :)
Shai.

解决方案

You have no need to subclass UISlider to achieve this effect, and if you did you certainly wouldn't set the track images in the drawRect method. drawRect should contain drawing code only, it is called whenever any part of the control needs redrawing.

Set the thumb and track images in a separate method, either within your subclass (called from initWithFrame and initWithCoder) or in the object that creates the slider in the first place. This only needs to be done once, when the slider is first created. Don't override drawRect.

You don't need to call awakeFromNib manually either, unless you have some specific code in there as well? That would be a common place to set custom images in a subclass, if you only ever used the slider from IB.

For the square ends, the problem is that the extreme edge of your track image is square, so it is showing around the thumb. Make both ends of the track image rounded, with a 1px stretchable area in the middle, like this:

这篇关于iPhone自定义UISlider预加载和圆边问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！