自定义UISlider

来源：互联网发布：mac上可以玩什么网游编辑：程序博客网时间：2024/06/06 21:06

自定义UISlider

iOS Bear 1年前 (2015-03-12) 1923浏览 0评论

iOS的Slider控件可是常用的，在各种视频播放器，音乐播放器，图片查看器还有地图这些软件中可是非常常见的。
屏幕快照 2015-03-12 下午11.30.35
这是Xcode里自带的slider控件。但是很多情况下我们是需要对slider的外观根据需要进行调整，所以就会对slider进行自定义。
比如我们想把slider做成如下效果
屏幕快照 2015-03-13 上午12.31.56
来分析下这个图，slider有背景图，左侧划过的颜色和右侧没有划过的颜色不同的，关键是横条上面还悬浮着一列白点。这堆白点比较麻烦，当时花了我不少功夫，才突然想起来一中方法。待会代码会有提及。设置尺寸什么的我就不详说了。直接上代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
- (void)viewDidLoad {
    [superviewDidLoad];
     
    #pragma mark 设置滑动条
     
    //时间滑动条参数准备
    CGFloat slider_w = ScreenWidth * 0.95;
    CGFloat slider_h = 70;
    CGFloat slider_offX = (ScreenWidth - slider_w)/2;
    CGFloat slider_offY = 20;
    CGFloat slider_deltaX = slider_w * 0.09;//slider的校正x值
     
    //滑动条
    UISlider *timeSlider = [[UISlider alloc] initWithFrame:CGRectMake(slider_offX + slider_deltaX, CGRectGetHeight(self.view.bounds) - slider_offY - slider_h - 3, slider_w - 2 * slider_deltaX, slider_h)];
    //滑动条的背景图
    UIImageView *sliderBgV = [[UIImageView alloc] initWithFrame:CGRectMake(slider_offX, CGRectGetHeight(self.view.bounds) - slider_offY - slider_h, slider_w, slider_h)];
    sliderBgV.image = [UIImage imageNamed:@"progress_bg"];
    [self.view addSubview:sliderBgV];
    [self.view addSubview:timeSlider];
     
    //设置滑动条
    timeSlider.minimumValue = 0;
    timeSlider.maximumValue = 24;
    timeSlider.value = 5;
    //设置滚动条左侧和右侧不同的颜色
    [timeSlider setMaximumTrackImage:[UIImage imageNamed:@"progress_right"] forState:UIControlStateNormal];
    [timeSlider setMinimumTrackImage:[UIImage imageNamed:@"progress_left"] forState:UIControlStateNormal];
    [timeSlider setThumbImage:[UIImage imageNamed:@"progress_point"] forState:UIControlStateNormal];
    [timeSlider setThumbImage:[UIImage imageNamed:@"progress_point"] forState:UIControlStateHighlighted];
     
    //画点的参数准备
    intpoint_w = 6;
    intpoint_dis = 20;//点间距
    intpoint_offX = 10;
    intpoint_num = CGRectGetWidth(timeSlider.bounds)/point_dis;
     
    //注意！！！这里背景View的高度为0是重点
    //点的背景view，注：高度为0，防止干扰slider，并且可以悬浮在中间的精度条上
    UIView *pointBgV = [[UIView alloc] initWithFrame:CGRectMake(slider_offX + slider_deltaX, CGRectGetHeight(self.view.bounds) - slider_offY - slider_h - 3, CGRectGetWidth(timeSlider.bounds), 0)];
    pointBgV.backgroundColor = [UIColor blackColor];
    [self.view addSubview:pointBgV];
    //画点
    for(inti = 0; i < point_num; i ++) {
        UIImageView *pointImg = [[UIImageView alloc] initWithFrame:CGRectMake(point_offX + i * point_dis, 0, point_w, point_w)];
        pointImg.image = [UIImage imageNamed:@"progress_dot"];
        pointImg.center = CGPointMake(pointImg.center.x, CGRectGetHeight(sliderBgV.bounds)/2);
        [pointBgV addSubview:pointImg];
    }
}

我们来看下运行效果
slider

最后，奉上demo
sliderTest

0 0