iOS 使用ScrollView自定义Slider

首先说下为什么要自定义Slider

UISlider系统提供的方法：

- (void)setThumbImage:(UIImage *)image forState:(UIControlState)state;

- (void)setMinimumTrackImage:(UIImage *)image forState:(UIControlState)state;

- (void)setMaximumTrackImage:(UIImage *)image forState:(UIControlState)state;

只能更改3种背景图片。如果设计要做成这样...基本就可以放弃使用UISlider了

自定义Slider

基本思路

创建UIimageView  ＊ linBgImageView        slide未被选中的背景 

创建UIView          ＊ linView                       slide选中的背景 

创建UIImageView ＊ linBgPointImageView  slide上面的刻度

创建UIImageView ＊ touchImageView         slide上面拖动的点

实现touchesEnded方法比较麻烦，代码如下：

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{

NSInteger allLenght = linBgImageView.frame.size.width;

NSInteger originX = linBgImageView.frame.origin.x+3;

NSInteger unitLenght = (allLenght/12); //7个等级分成12份

//逻辑

//    if (touchX <= originX + unitLenght) {  //等级0

//        touchX = originX + unitLenght * 0;

//    }

//    else if (touchX <= originX + unitLenght * 3)//等级1

//    {

//        touchX = originX+unitLenght * 2;

//    }

//    else if (touchX <= originX + unitLenght * 5)//等级1

//    {

//        touchX = originX+unitLenght * 4;

//    }

for (int i = 0; i < 7; i++) {

NSInteger level = (i*2+1);

if (touchX <= originX + unitLenght * level)//等级1

{

touchX = originX + unitLenght * (level-1);

touchImageView.center = CGPointMake(touchX, linBgImageView.center.y);

[self setvalueLineview];

nowLevel = (((long)level-1)/2)+1;

nowLevelImageView.alpha = 1;

[self performSelectorInBackground:@selector(levelAction) withObject:nil];

return;

}

}

}

- (void)setvalueLineview

{

linView.frame = CGRectMake(linBgImageView.frame.origin.x, linBgImageView.frame.origin.y, touchImageView.center.x-linBgImageView.frame.origin.x, 3);

linView.center = CGPointMake(linView.center.x, linBgImageView.center.y);

}

我又重新整理下代码，可能会有一些不同的地方。但是主要逻辑是一样的。

代码地址：github:https://github.com/YBYHunter/YUSlider （如果喜欢star下，谢谢）