How to realize the function of step progress bar by iOS

This article mainly introduces how to achieve the iOS step progress bar function, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

Source code

Encapsulate the step progress bar into a HQLStepView class, which is a subclass of UIView.

HQLStepView.h file

# import @ interface HQLStepView: UIView// specify initialization method-(instancetype) initWithFrame: (CGRect) frame titlesArray: (NSArray *) titlesArray stepIndex: (NSUInteger) stepIndex;// setup current step-(void) setStepIndex: (NSUInteger) stepIndex animation: (BOOL) animation;@end

HQLStepView.m file

# import "HQLStepView.h" / / step bar theme color # 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; / / progress bar [self addSubview:self.progressView]; for (NSString * title in _ titlesArray) {/ / Circle 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]; / title UILabel * label = [[UILabel alloc] init]; label.text = title; label.font = [UIFont systemFontOfSize:14]; label.textAlignment = NSTextAlignmentCenter; [self addSubview:label]; [self.titleLabelArray addObject:label];} / / current index number [self addSubview:self.indicatorLabel];} return self } / / layout update page elements-(void) layoutSubviews {NSInteger perWidth = self.frame.size.width / self.titlesArray.count; / / progress bar 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) {/ / Update Color self.stepIndex = stepIndex / / set the progress bar [self.progressView setProgress:stepIndex / (self.titlesArray.count-1) * 1.0) animated:animation]; / / set the current index number self.indicatorLabel.text = [NSString stringWithFormat:@ "% lu", stepIndex + 1]; self.indicatorLabel.center = ((UIView *) [self.circleViewArray objectAtIndex:stepIndex]) .center;}} @ end

API call:

-(void) viewDidLoad {[super viewDidLoad]; / / initialize _ hqlStepView = [[HQLStepView alloc] initWithFrame:CGRectMake (0,200, self.view.frame.size.width, 60) titlesArray:@ [@ "first step", @ "second step", @ "third step"] stepIndex:0]; [self.view addSubview:_hqlStepView];}-(void) viewDidAppear: (BOOL) animated {[super viewDidAppear:animated] / / set the current step, step index = array index [_ hqlStepView setStepIndex:0 animation:YES];}

Thank you for reading this article carefully. I hope the article "how to achieve the step progress bar function of iOS" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!