功能描述：
当前的状态是：文字橙色较大、点是双圈、左边线颜色较深双线、右边线颜色较浅双线；表示进行到当前，但未完成，例如下面的1支付，表示已经提交了订单，等着支付，但未完成支付
已经完成的状态：文字灰色较小、点是深色实心、左边线实线、右边线颜色较深双线
未进行的状态：文字橙色较大、点是浅色实心、左边线颜色较浅双线、右边线颜色较浅双线
备注：
点：分深色实心、浅色实心、双心
文字分灰色小字、橙色大字（还有一种是橙色大字浅色，可以用于未进行时，此处为了简单就不设置了）
线：分实线、深色双线、浅色双线
效果如图：
6A6B096717789A31399CE85A850F5DB7.jpg
屏幕快照 2017-12-17 上午11.38.29.png
封装的状态栏代码如下：
.h
#import <UIKit/UIKit.h>
@class UToStepsView;
typedef void (^UToStepsViewStepChangeBlock)(UToStepsView *slide,NSUInteger index);
@interface UToControl:UIControl
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UIImageView *imageView;
@end
@interface UToStepsView : UIView
@property (nonatomic, readonly) NSInteger currentSelectIndex;
@property (nonatomic, assign) BOOL isCanClick;
/**
初始化
@param frame frame
@param titleArray 标题
@param mariginSpace 边界距离
@param stepWith 控件宽度
@return UToStepsView
*/
+ (instancetype)slideViewWithFrame:(CGRect)frame titleArray:(NSArray *)titleArray mariginspace:(CGFloat)mariginSpace stepWith:(CGFloat)stepWith;
/**
选择步骤改变的回调
@param changeBlock 回调
*/
- (void)stepViewStepChangeCallBack:(UToStepsViewStepChangeBlock)changeBlock;
/**
设置当前选中的控件
@param selectIndex 第几个
*/
- (void)setSelectIndex:(NSInteger)selectIndex;
@end
.m
#import "UToStepsView.h"
#import "Masonry.h"
#define SlideTag 10
#define leftMarigin 10
@implementation UToControl
// 初始化
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
if (!_imageView) {
_imageView = [[UIImageView alloc]init];
[self addSubview:_imageView];
}
if (!_titleLabel) {
_titleLabel = [[UILabel alloc]init];
_titleLabel.textAlignment = NSTextAlignmentCenter;
[self addSubview:_titleLabel];
}
}
return self;
}
// 布局
- (void)layoutSubviews {
[super layoutSubviews];
[_imageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.mas_equalTo(self);
make.width.height.mas_equalTo(10);
make.top.mas_equalTo(0);
}];
[_titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.mas_equalTo(self);
make.centerY.mas_equalTo(self).offset(5);
}];
}
@end
@interface UToStepsView() {
CGFloat _width;
CGFloat _height;
NSArray *_titleArray;
CGFloat _distance;
CGFloat _mariginSpace;
CGFloat _stepWith;
NSInteger _selectedIndex;
}
@property (nonatomic, copy) UToStepsViewStepChangeBlock changeblock;
@property (nonatomic, weak) UToControl *selectControl;
@end
@implementation UToStepsView
// 初始化
- (instancetype)initWithFrame:(CGRect)frame titleArray:(NSArray*)titleArray mariginSpace:(CGFloat)mariginSpace stepWith:(CGFloat)stepWith {
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
self.clipsToBounds = YES;
_isCanClick = NO;
_width = frame.size.width;
_height = frame.size.height;
_titleArray = titleArray;
_stepWith = stepWith;
_mariginSpace = mariginSpace;
_distance = (_width-2*_mariginSpace-_stepWith*_titleArray.count)/(_titleArray.count-1);
_selectedIndex = 0;
[self createUI];
}
return self;
}
// 类方法
+ (instancetype)slideViewWithFrame:(CGRect)frame titleArray:(NSArray *)titleArray mariginspace:(CGFloat)mariginSpace stepWith:(CGFloat)stepWith {
return [[UToStepsView alloc] initWithFrame:frame titleArray:titleArray mariginSpace:mariginSpace stepWith:stepWith];
}
// 创建UI
- (void)createUI {
UIView *t = nil;
for (NSInteger i=0; i<_titleArray.count; i++) {
UToControl *control = [[UToControl alloc]init];
control.backgroundColor = [UIColor clearColor];
[self addSubview:control];
control.tag = i+SlideTag;
if (_titleArray) {
control.titleLabel.text = _titleArray[i];
} else {
control.titleLabel.text = [NSString stringWithFormat:@"%ld",i+1];
}
if (i < _selectedIndex) {
[control.titleLabel setFont:[UIFont systemFontOfSize:12]];
[control.titleLabel setTextColor:[UIColor grayColor]];
[control.imageView setImage:[UIImage imageNamed:@"dian2"]];
[control.imageView setHighlightedImage:[UIImage imageNamed:@"dian2"]];
} else if (i == _selectedIndex) {
[control.titleLabel setFont:[UIFont systemFontOfSize:16]];
[control.titleLabel setTextColor:[UIColor orangeColor]];
[control.imageView setImage:[UIImage imageNamed:@"dian3"]];
[control.imageView setHighlightedImage:[UIImage imageNamed:@"dian3"]];
} else {
[control.titleLabel setFont:[UIFont systemFontOfSize:16]];
[control.titleLabel setTextColor:[UIColor orangeColor]];
[control.imageView setImage:[UIImage imageNamed:@"dian1"]];
[control.imageView setHighlightedImage:[UIImage imageNamed:@"dian1"]];
}
[control addTarget:self action:@selector(stepButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
[control mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self);
make.width.equalTo(@(_stepWith));
make.left.equalTo(@(_mariginSpace+(_stepWith+_distance)*i));
make.height.mas_equalTo(_height);
}];
if (t) {
UIImageView *imageView = [[UIImageView alloc] init];
imageView.tag = i+SlideTag*2;
if (i < _selectedIndex) {
imageView.image = [UIImage imageNamed:@"juxing1"];
} else if (i == _selectedIndex) {
imageView.image = [UIImage imageNamed:@"juxing2"];
} else {
imageView.image = [UIImage imageNamed:@"juxing3"];
}
[self insertSubview:imageView atIndex:0];
[imageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@(4));
make.height.equalTo(@(2));
make.left.equalTo(t.mas_right).offset(-_stepWith/2);
make.right.equalTo(control.mas_left).offset(_stepWith/2);
}];
}
t = control;
}
_currentSelectIndex = _selectedIndex;
}
- (void)setSelectIndex:(NSInteger)selectIndex {
_selectedIndex = selectIndex;
_currentSelectIndex = selectIndex;
for (NSInteger i = 0; i < _titleArray.count; i++) {
UToControl *control = [self viewWithTag:i+SlideTag];
UIImageView *imageView = [self viewWithTag:i+SlideTag*2];
if (i < _selectedIndex) {
[control.titleLabel setFont:[UIFont systemFontOfSize:12]];
[control.titleLabel setTextColor:[UIColor grayColor]];
[control.imageView setImage:[UIImage imageNamed:@"dian2"]];
[control.imageView setHighlightedImage:[UIImage imageNamed:@"dian2"]];
imageView.image = [UIImage imageNamed:@"juxing1"];
} else if (i == _selectedIndex) {
[control.titleLabel setFont:[UIFont systemFontOfSize:16]];
[control.titleLabel setTextColor:[UIColor orangeColor]];
[control.imageView setImage:[UIImage imageNamed:@"dian3"]];
[control.imageView setHighlightedImage:[UIImage imageNamed:@"dian3"]];
imageView.image = [UIImage imageNamed:@"juxing2"];
} else {
[control.titleLabel setFont:[UIFont systemFontOfSize:16]];
[control.titleLabel setTextColor:[UIColor orangeColor]];
[control.imageView setImage:[UIImage imageNamed:@"dian1"]];
[control.imageView setHighlightedImage:[UIImage imageNamed:@"dian1"]];
imageView.image = [UIImage imageNamed:@"juxing3"];
}
}
if (self.changeblock) {
self.changeblock(self, self.currentSelectIndex);
}
}
// 点击方法
- (void)stepButtonClicked:(UToControl *)control {
if (_isCanClick) {
[self setSelectIndex:control.tag-SlideTag];
}
}
// block回调
- (void)stepViewStepChangeCallBack:(UToStepsViewStepChangeBlock)changeBlock {
self.changeblock = changeBlock;
}
@end
控制器调用的代码如下：
屏幕快照 2017-12-17 下午2.28.01.png
分别选中0、1、2、3的效果图：
0：提交
提交
1：支付
支付
2：检票
检票
3：完成
完成
isCanClick=YES，开启可点击模式：
开启点击模式.gif
网友评论