程序员我是程序员;您好程先生;叫我序员就好了

类似去哪儿的订单状态栏封装

2017-12-17  本文已影响44人  Kevin_wzx

功能描述:

当前的状态是:文字橙色较大、点是双圈、左边线颜色较深双线、右边线颜色较浅双线;表示进行到当前,但未完成,例如下面的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
上一篇下一篇

猜你喜欢

热点阅读