前言
在開發中,我們經常在很多場景下需要用到進度條,比如文件的下載,或者文件的上傳等。 本文主要給大家介紹的是一個步驟進度條效果，步驟進度條效果參考
ios uikit 框架中并沒有提供類似的控件，我們可以使用 uiprogressview、uiview、uilabel 組合實現步驟進度條效果。
- uiprogressview——實現水平的進度條效果；
- uiview——把uiview裁剪成圓形，實現索引節點效果；
- uilabel——每個節點下面的提示文字。
源碼
將步驟進度條封裝成一個 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;// 設置當前步驟- (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; // 進度條 [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]; // 標題 uilabel *label = [[uilabel alloc] init]; label.text = title; label.font = [uifont systemfontofsize:14]; label.textalignment = nstextalignmentcenter; [self addsubview:label]; [self.titlelabelarray addobject:label]; } // 當前索引數字 [self addsubview:self.indicatorlabel]; } return self;}// 布局更新頁面元素- (void)layoutsubviews { nsinteger perwidth = self.frame.size.width / self.titlesarray.count; // 進度條 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); } // 標題 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;}// 設置當前進度索引，更新圓形圖片、文本顏色、當前索引數字- (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; // 設置進度條 [self.progressview setprogress:stepindex / ((self.titlesarray.count - 1) * 1.0) animated:animation]; // 設置當前索引數字 self.indicatorlabel.text = [nsstring stringwithformat:@"%lu", stepindex + 1]; self.indicatorlabel.center = ((uiview *)[self.circleviewarray objectatindex:stepindex]).center; }}@end |
接口調用：
|
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]; // 設置當前步驟，步驟索引=數組索引 [_hqlstepview setstepindex:0 animation:yes];} |
效果：
因為 uiprogressview 實現的水平進度條高度值默認為1，設置frame是無效的。可以通過仿射變換的方式增加它的高度。
第三方框架
- github: istimeline ??900
- github: timelinetableviewcell ??800
參考：
總結：
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對服務器之家的支持。
原文鏈接：https://www.jianshu.com/p/fb471ca68a1b
