Timeline在一些app中很多场景都会用到，原理实现起来也比较简单。下面开始封装一个比较常用的时间轴。具体效果如下图：Qinz1。首先，我们创建一个UIView，在上面放一个tableView，声明一个方法，并传递两个参数。第一个参数是把时间轴放在哪个视图上，第二个参数是传递数据源，头文件下：#import@interfaceQinzTimeLine:UIView@property(nonatomic,strong)NSArray*titleArr;-(void)setSuperView:(UIView*)superViewDataArr:(NSMutableArray*)dataArr;@end2。我们再看一下.m文件，这是最简单的tableView应用。这是一个[self.tableViewcellHeightForIndexPath:indexPathmodel:modelkeyPath:@"model"cellClass:[TimeLineCellclass]contentViewWidth:self.frame.size。width]方法是利用SDAutoLayout库自动计算单元格高度#import"QinzTimeLine.h"#import"SDAutoLayout.h"#import"TimeLineCell.h"@interfaceQinzTimeLine()@property(nonatomic,strong)UITableView*tableView;@property(nonatomic,strong)NSMutableArray*dataArr;@end@implementationQinzTimeLine-(void)setSuperView:(UIView*)superViewDataArr:(NSMutableArray*)dataArr{self.frame=superView.bounds;[superViewaddSubview:self];[selfsetUp];self.dataArr=dataArr;}-(void)setUp{self.tableView=[[UITableViewalloc]init];self.tableView.delegate=self;self.tableView.dataSource=self;self.tableView.separatorStyle=UITableViewCellSeparatorStyleNone;[selfaddSubview:self.tableView];self.tableView.sd_layout.topEqualToView(self).leftEqualToView(self).bottomEqualToView(self).rightEqualToView(self);}#pragmamark--tableView的代理方法#pragmamark--返回多少组-(NSInteger)numberOfSectionsInTableView:(UITableView*)tableView{return1;}#pragmamark--每组返回多少个-(NSInteger)tableView:(UITableView*)tableViewnumberOfRowsInSection:(NSInteger)section{returnself.dataArr.count;}#pragmamark--每个单元格的高度-(CGFloat)tableView:(UITableView*)tableViewheightForRowAtIndexPath:(NSIndexPath*)indexPath{TimeLineModel*model=self.dataArr[indexPath.row];返回[self.tableViewcellHeightForIndexPath:indexPathmodel:modelkeyPath:@"model"cellClass:[TimeLineCellclass]contentViewWidth:self.frame.size.width];}#pragmamark--每个cell显示的内容-(UITableViewCell*)tableView:(UITableView*)tableViewcellForRowAtIndexPath:(NSIndexPath*)indexPath{TimeLineCell*cell=[TimeLineCelltimeLineCell:tableView];if(indexPath.row==0){cell.lineView.sd_layout.topSpaceToView(cell.pointView,0);cell.lineView.backgroundColor=[UIColorgrayColor];cell.pointView.backgroundColor=[UIColorredColor];}else{cell.lineView.sd_layout.topSpaceToView(cell.contentView,0);cell.pointView.backgroundColor=[UIColorgrayColor];cell.lineView.backgroundColor=[UIColorgrayColor];}cell.model=self.dataArr[indexPath.row];cell.selectionStyle=UITableViewCellSelectionStyleNone;returncell;}#pragmamark--选择每个cell执行的操作-(void)tableView:(UITableView*)tableViewdidSelectRowAtIndexPath:(NSIndexPath*)indexPath{[tableViewdeselectRowAtIndexPath:indexPathanimated:NO];}3.关键在于tableViewCell布局，使用xib，设置样式方便，布局还是用SDAutoLayout这个库图片。调用[自我设置自动HeightWithBottomView:self.titleLBbottomMargin:0]自动完成高度适配，是不是很方便-(void)awakeFromNib{[superawakeFromNib];self.pointView.sd_layout.topSpaceToView(self.contentView,20).leftSpaceToView(self.contentView,5).widthIs(8).heightEqualToWidth();self.pointView.sd_cornerRadius=@(4);self.lineView.sd_layout.topEqualToView(self.contentView).centerXEqualToView(self.pointView).widthIs(1).bottomSpaceToView(self.contentView,0);self.ttimeLB.sd_layout.centerYEqualToView(self.pointView).leftSpaceToView(self.pointView,10).rightSpaceToView(self.contentView,10).heightIs(20);self.titleLB.sd_layout.topSpaceToView(self.ttimeLB,15).leftEqualToView(self.ttimeLB).rightSpaceToView(self.contentView,10).autoHeightRatio(0);}-(void)setModel:(TimeLineModel*)model{_model=model;self.titleLB.text=model.title;self.ttimeLB.text=model.time;[selfsetupAutoHeightWithBottomView:self.titleLBbottomMargin:0];}5.至此，封装完成，***我们看一下controller调用代码-(void)viewDidLoad{[superviewDidLoad];self.automaticallyAdjustsScrollViewInsets=YES;self.timeLine=[[QinzTimeLinealloc]init];[selfsetData];[self.timeLinesetSuperView:self.viewDataArr:self.dataArr];}总结：整体布局主要是根据tableView，然后高度cell是自适应的，需要注意的是Cell中时间轴上的线需要连贯，所以需要判断第一个cell，让线刚好连接到原点***，附上demo供参考：https://gitee。com/Qinz_323/qinztimeline我是Qinz，希望我的文章对你有所帮助。
