正文

iOS实现步骤进度条功能实例代码

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0709

这篇文章主要给大家介绍了关于iOS实现步骤进度条功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

在开发中,我们经常在很多场景下需要用到进度条,比如文件的下载,或者文件的上传等。 本文主要给大家介绍的是一个步骤进度条效果，步骤进度条效果参考

iOS实现步骤进度条功能实例代码

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];
}

效果：

iOS实现步骤进度条功能实例代码

因为 uiprogressview 实现的水平进度条高度值默认为1，设置frame是无效的。可以通过仿射变换的方式增加它的高度。

第三方框架

参考：

总结：

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对米米素材网的支持。

原文链接：https://www.jianshu.com/p/fb471ca68a1b