话不多少，先上效果图,样式有点丑，请理性观看
效果图😄
这里实现的效果图主要包含两部分
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
