iOS 实现步骤进度条

步骤进度条效果参考

iOS UIKit 框架中并没有提供类似的控件,我们可以使用 UIProgressView、UIView、UILabel 组合实现步骤进度条效果。

  • UIProgressView——实现水平的进度条效果;
  • UIView——把UIView裁剪成圆形,实现索引节点效果;
  • UILabel——每个节点下面的提示文字。

源码

将步骤进度条封装成一个 HQLStepView 类,它是 UIView 的子类。

HQLStepView.h 文件

#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 文件

#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

接口调用:

- (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是无效的。可以通过仿射变换的方式增加它的高度。

第三方框架

参考:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,612评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,814评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,427评论 0 239
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,743评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,104评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,455评论 1 214
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,764评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,454评论 0 196
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,159评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,446评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,953评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,294评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,927评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,028评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,784评论 0 193
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,485评论 2 270
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,395评论 2 264