iOS 实现步骤进度条

栏目: IOS · 发布时间: 6年前

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

步骤进度条效果参考

iOS 实现步骤进度条

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

  • UIProgressView——实现水平的进度条效果;

  • UIView——把UIView裁剪成圆形,实现索引节点效果;

  • UILabel——每个节点下面的提示文字。

源码

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

HQLStepView.h 文件

#import 
  
    

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

效果:

iOS 实现步骤进度条

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

第三方框架

GitHub: ISTimeline *900

GitHub: TimelineTableViewCell *800

作者:独木舟的木

链接:https://www.jianshu.com/p/fb471ca68a1b


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

六度分隔

六度分隔

邓肯·J·瓦茨 / 陈禹 / 中国人民大学出版社 / 2011-3 / 46.00元

正如副标题所表明的,《六度分隔:一个相互连接的时代的科学》的基本内容是介绍一门正在形成中的新科学——关于网络的一般规律的科学。有这样一门科学吗?它的内容和方法是什么?近年来,这门学科有什么实质性的进展吗?在《六度分隔:一个相互连接的时代的科学》中,作者根据自己的亲身经历娓娓道来,用讲故事的方式,对于这些问题给出了令人信服的回答 除了简要的背景和总结以外,《六度分隔:一个相互连接的时代的科学》......一起来看看 《六度分隔》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具