时间轴实现

话不多少，先上效果图,样式有点丑，请理性观看

效果图😄

这里实现的效果图主要包含两部分

tableview的头部视图+自定义cell

头部视图就不做叙述了,主要说的是自定义cell

cell声明文件，主要用于接收自定义model对象

    #import "OrderModel.h"

    @interface CTableViewCell : UITableViewCell

    @property(nonatomic,strong)OrderModel *model;

    @end

cell实现文件，初始化的控件,实现思路主要是把时间轴的竖线在每个cell里面的位置拆分为上划线和下划线

#import "CTableViewCell.h"

@interface CTableViewCell()

@property(nonatomic,strong)UIView *lineView;    //上划线

@property(nonatomic,strong)UIView *lastLineView; //下划线

@property(nonatomic,strong)UIImageView *TypeImageView; //状态图片

@property(nonatomic,strong)UILabel *text;              //文本内容

@property(nonatomic,strong)UILabel *datelabel;        //日期

@end

重写model的set方法
cell的样式主要通过model的type属性来判断显示不同的样式和下划线的颜色。

    - (void)setModel:(OrderModel *)model {

    _lineView.frame = CGRectMake(30, 0, 1, 35);

    _lastLineView.backgroundColor = [UIColor lightGrayColor];

    switch (model.type) {

    case 0:

    {

    //订单步骤失败状态

    _lineView.backgroundColor = [UIColor redColor];

    _TypeImageView.image = [UIImage imageNamed:@"失败"];

    _text.textColor = [UIColor redColor];

    break;

    }

    case 1:

    {

    //订单步骤成功状态

    //步骤完成

    _lineView.backgroundColor = [UIColor greenColor];

    _TypeImageView.image = [UIImage imageNamed:@"步骤完成"];

    _text.textColor = [UIColor greenColor];

    break;

    }

case 2:

{

//订单步骤等待状态

//步骤未完成

_lineView.backgroundColor = [UIColor lightGrayColor];

_TypeImageView.image = [UIImage imageNamed:@"步骤未完成"];

_text.textColor = [UIColor lightGrayColor];

break;

}

default:

break;

}

_TypeImageView.frame = CGRectMake(CGRectGetMinX(_lineView.frame) - 15, CGRectGetMaxY(_lineView.frame), 30, 30);

_text.frame = CGRectMake(CGRectGetMaxX(_TypeImageView.frame) + 10, CGRectGetMinY(_TypeImageView.frame), CGRectGetWidth(self.frame), CGRectGetHeight(_TypeImageView.frame));

_text.text = model.text;

_datelabel.frame = CGRectMake(CGRectGetMinX(_text.frame), CGRectGetMaxY(_text.frame), CGRectGetWidth(self.frame), CGRectGetHeight(_text.frame));

_datelabel.text = model.date;

//步骤4

if ([model.index integerValue] == 4) {

_text.font = [UIFont systemFontOfSize:12];

switch (model.type) {

case 0:

{

//订单步骤失败状态

_text.textColor = [UIColor redColor];

_TypeImageView.image = [UIImage imageNamed:@"失败状态 "];

_lineView.backgroundColor = [UIColor redColor];

break;

}

case 1:

{

//最后一个步骤状态(完成状态)

_text.textColor = [UIColor greenColor];

_TypeImageView.image = [UIImage imageNamed:@"已完成状态"];

_lineView.backgroundColor = [UIColor greenColor];

break;

}

case 2:

{

//订单步骤未完成状态

//未完成状态

_text.textColor = [UIColor lightGrayColor];

_TypeImageView.image = [UIImage imageNamed:@"未完成状态 "];

_lineView.backgroundColor = [UIColor lightGrayColor];

break;

}

default:

break;

}

_lastLineView.frame = CGRectZero;

}else {

_lastLineView.frame = CGRectMake(CGRectGetMinX(_lineView.frame), CGRectGetMaxY(_lineView.frame) + 5, 1, CGRectGetHeight(_text.frame) + CGRectGetHeight(_datelabel.frame));

}

//保存当前cell的高度

model.cellHeight = CGRectGetMaxY(_datelabel.frame);

//保存当前lastLineView,方便下一个步骤状态设置颜色

model.lastLineView = _lastLineView;

model.lineView = _lineView;

}

最后放上model类的实现代码

    typedef NS_ENUM(NSInteger) {

    OrderFail = 0,  // **< 等待状态 */

    orderSuccess,  // **< 成功状态 */

    OrderWaiting    // **< 失败状态 */

    }orderType;

    @interface OrderModel : NSObject

    @property(nonatomic,copy)NSString *text;  /**< 文本内容 */

    @property(nonatomic,copy)NSString *date;  /**< 日期    */

    @property(nonatomic,assign)orderType type; /**< 订单状态 */

    @property(nonatomic,copy)NSString *index;  /**< 订单的步骤 */

    /** cell的高度 */

    @property (nonatomic, assign) CGFloat cellHeight;

    /** 上划线 */

    @property (nonatomic, strong) UIView *lineView;

    /** 下划线 */

    @property (nonatomic, strong) UIView *lastLineView;

    + (instancetype)OrderWithDic:(NSDictionary *)dic;

    @end

    @implementation OrderModel

    + (instancetype)OrderWithDic:(NSDictionary *)dic

    {

    OrderModel *order = [[self alloc] init];

    [order setValuesForKeysWithDictionary:dic];

    return order;

    }

    @end

写得不好的地方还望大家指出,大家共同学习和进步.😄😄
demo链接 https://github.com/woshigaokeji/git_-.git