自定义UISlider
iOS的Slider控件可是常用的，在各种视频播放器，音乐播放器，图片查看器还有地图这些软件中可是非常常见的。
这是Xcode里自带的slider控件。但是很多情况下我们是需要对slider的外观根据需要进行调整，所以就会对slider进行自定义。
比如我们想把slider做成如下效果
来分析下这个图，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 {
[
super
viewDidLoad];
#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];
//画点的参数准备
int
point_w = 6;
int
point_dis = 20;
//点间距
int
point_offX = 10;
int
point_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
(
int
i = 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];
}
}
|
我们来看下运行效果
最后，奉上demo
sliderTest
7936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
