前言
在開發(fā)中,我們經(jīng)常在很多場(chǎng)景下需要用到進(jìn)度條,比如文件的下載,或者文件的上傳等。 本文主要給大家介紹的是一個(gè)步驟進(jìn)度條效果，步驟進(jìn)度條效果參考
ios uikit 框架中并沒有提供類似的控件，我們可以使用 uiprogressview、uiview、uilabel 組合實(shí)現(xiàn)步驟進(jìn)度條效果。
- uiprogressview——實(shí)現(xiàn)水平的進(jìn)度條效果；
- uiview——把uiview裁剪成圓形，實(shí)現(xiàn)索引節(jié)點(diǎn)效果；
- uilabel——每個(gè)節(jié)點(diǎn)下面的提示文字。
源碼
將步驟進(jìn)度條封裝成一個(gè) hqlstepview 類，它是 uiview 的子類。
hqlstepview.h 文件
|
1
2
3
4
5
6
7
8
9
10
11
|
#import <uikit/uikit.h>@interface hqlstepview : uiview// 指定初始化方法- (instancetype)initwithframe:(cgrect)frame titlesarray:(nsarray *)titlesarray stepindex:(nsuinteger)stepindex;// 設(shè)置當(dāng)前步驟- (void)setstepindex:(nsuinteger)stepindex animation:(bool)animation;@end |
hqlstepview.m 文件
|
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
#import "hqlstepview.h"// 步驟條主題色#define tint_color [uicolor colorwithred:35/255.f green:135/255.f blue:255/255.f alpha:1]@interface hqlstepview ()@property (nonatomic, copy) nsarray *titlesarray;@property (nonatomic, assign) nsuinteger stepindex;@property (nonatomic, strong) uiprogressview *progressview;@property (nonatomic, strong) nsmutablearray *circleviewarray;@property (nonatomic, strong) nsmutablearray *titlelabelarray;@property (nonatomic, strong) uilabel *indicatorlabel;@end@implementation hqlstepview#pragma mark - init- (instancetype)initwithframe:(cgrect)frame titlesarray:(nsarray *)titlesarray stepindex:(nsuinteger)stepindex { self = [super initwithframe:frame]; if (self) { _titlesarray = [titlesarray copy]; _stepindex = stepindex; // 進(jìn)度條 [self addsubview:self.progressview]; for (nsstring *title in _titlesarray) { // 圓圈 uiview *circle = [[uiview alloc] initwithframe:cgrectmake(0, 0, 13, 13)]; circle.backgroundcolor = [uicolor lightgraycolor]; circle.layer.cornerradius = 13.0f / 2; [self addsubview:circle]; [self.circleviewarray addobject:circle]; // 標(biāo)題 uilabel *label = [[uilabel alloc] init]; label.text = title; label.font = [uifont systemfontofsize:14]; label.textalignment = nstextalignmentcenter; [self addsubview:label]; [self.titlelabelarray addobject:label]; } // 當(dāng)前索引數(shù)字 [self addsubview:self.indicatorlabel]; } return self;}// 布局更新頁面元素- (void)layoutsubviews { nsinteger perwidth = self.frame.size.width / self.titlesarray.count; // 進(jìn)度條 self.progressview.frame = cgrectmake(0, 0, self.frame.size.width - perwidth, 1); self.progressview.center = cgpointmake(self.frame.size.width / 2, self.frame.size.height / 4); cgfloat startx = self.progressview.frame.origin.x; for (int i = 0; i < self.titlesarray.count; i++) { // 圓圈 uiview *cycle = self.circleviewarray[i]; if (cycle) { cycle.center = cgpointmake(i * perwidth + startx, self.progressview.center.y); } // 標(biāo)題 uilabel *label = self.titlelabelarray[i]; if (label) { label.frame = cgrectmake(perwidth * i, self.frame.size.height / 2, self.frame.size.width / self.titlesarray.count, self.frame.size.height / 2 ); } } self.stepindex = self.stepindex;}#pragma mark - custom accessors- (uiprogressview *)progressview { if (!_progressview) { _progressview = [[uiprogressview alloc] initwithprogressviewstyle:uiprogressviewstyledefault]; _progressview.progresstintcolor = tint_color; _progressview.progress = self.stepindex / ((self.titlesarray.count - 1) * 1.0); } return _progressview;}- (uilabel *)indicatorlabel { if (!_indicatorlabel) { _indicatorlabel = [[uilabel alloc] initwithframe:cgrectmake(0, 0, 23, 23)]; _indicatorlabel.textcolor = tint_color; _indicatorlabel.textalignment = nstextalignmentcenter; _indicatorlabel.backgroundcolor = [uicolor whitecolor]; _indicatorlabel.layer.cornerradius = 23.0f / 2; _indicatorlabel.layer.bordercolor = [tint_color cgcolor]; _indicatorlabel.layer.borderwidth = 1; _indicatorlabel.layer.maskstobounds = yes; } return _indicatorlabel;}- (nsmutablearray *)circleviewarray { if (!_circleviewarray) { _circleviewarray = [[nsmutablearray alloc] initwithcapacity:self.titlesarray.count]; } return _circleviewarray;}- (nsmutablearray *)titlelabelarray { if (!_titlelabelarray) { _titlelabelarray = [[nsmutablearray alloc] initwithcapacity:self.titlesarray.count]; } return _titlelabelarray;}// 設(shè)置當(dāng)前進(jìn)度索引，更新圓形圖片、文本顏色、當(dāng)前索引數(shù)字- (void)setstepindex:(nsuinteger)stepindex { for (int i = 0; i < self.titlesarray.count; i++) { uiview *cycle = self.circleviewarray[i]; uilabel *label = self.titlelabelarray[i]; if (stepindex >= i) { cycle.backgroundcolor = tint_color; label.textcolor = tint_color; } else { cycle.backgroundcolor = [uicolor lightgraycolor]; label.textcolor = [uicolor lightgraycolor]; } }}#pragma mark - public- (void)setstepindex:(nsuinteger)stepindex animation:(bool)animation { if (stepindex < self.titlesarray.count) { // 更新顏色 self.stepindex = stepindex; // 設(shè)置進(jìn)度條 [self.progressview setprogress:stepindex / ((self.titlesarray.count - 1) * 1.0) animated:animation]; // 設(shè)置當(dāng)前索引數(shù)字 self.indicatorlabel.text = [nsstring stringwithformat:@"%lu", stepindex + 1]; self.indicatorlabel.center = ((uiview *)[self.circleviewarray objectatindex:stepindex]).center; }}@end |
接口調(diào)用：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
- (void)viewdidload { [super viewdidload]; // 初始化 _hqlstepview = [[hqlstepview alloc] initwithframe:cgrectmake(0, 200, self.view.frame.size.width, 60) titlesarray:@[@"第一步", @"第二步", @"第三步"] stepindex:0]; [self.view addsubview:_hqlstepview];}- (void)viewdidappear:(bool)animated { [super viewdidappear:animated]; // 設(shè)置當(dāng)前步驟，步驟索引=數(shù)組索引 [_hqlstepview setstepindex:0 animation:yes];} |
效果：
因?yàn)?uiprogressview 實(shí)現(xiàn)的水平進(jìn)度條高度值默認(rèn)為1，設(shè)置frame是無效的。可以通過仿射變換的方式增加它的高度。
第三方框架
- github: istimeline ??900
- github: timelinetableviewcell ??800
參考：
總結(jié)：
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)服務(wù)器之家的支持。
原文鏈接：https://www.jianshu.com/p/fb471ca68a1b
