時(shí)間軸在一些app中用的場景還不少，原理實(shí)現(xiàn)起來較為簡單，下面我們就來動手封裝一個(gè)比較常用的時(shí)間軸，具體效果看下圖：

Qinz

1.首先我們創(chuàng)建一個(gè)UIView,在上面放一個(gè)tableView,聲明一個(gè)方法，傳遞兩個(gè)參數(shù)，***個(gè)參數(shù)是需要將該時(shí)間軸放在哪個(gè)視圖上，第二個(gè)參數(shù)是傳遞數(shù)據(jù)源，頭文件下：

#import <UIKit/UIKit.h> 
@interface QinzTimeLine : UIView 
@property (nonatomic, strong) NSArray *titleArr; 
-(void)setSuperView:(UIView*)superView DataArr:(NSMutableArray*)dataArr; 
@end 

2.我們再來看看.m文件,也就是最簡單的tableView的應(yīng)用，這里有一個(gè) [self.tableView cellHeightForIndexPath:indexPath model:model keyPath:@"model" cellClass:[TimeLineCell class]contentViewWidth:self.frame.size.width]方法是用到了SDAutoLayout這個(gè)庫用來自動計(jì)算cell高度的

#import "QinzTimeLine.h" 
#import "SDAutoLayout.h" 
#import "TimeLineCell.h" 
@interface QinzTimeLine ()<UITableViewDelegate,UITableViewDataSource> 
@property (nonatomic, strong) UITableView *tableView; 
@property (nonatomic, strong) NSMutableArray *dataArr; 
@end 
@implementation QinzTimeLine 
-(void)setSuperView:(UIView *)superView DataArr:(NSMutableArray *)dataArr{ 
    self.frame = superView.bounds; 
    [superView addSubview:self]; 
    [self setUp]; 
    self.dataArr = dataArr; 
} 
-(void)setUp{ 
    self.tableView = [[UITableView alloc]init]; 
    self.tableView.delegate = self; 
    self.tableView.dataSource = self; 
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; 
    [self addSubview:self.tableView]; 
    self.tableView.sd_layout.topEqualToView(self).leftEqualToView(self).bottomEqualToView(self).rightEqualToView(self); 
} 
#pragma mark -- tableView的代理方法 
#pragma mark -- 返回多少組 
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView 
{ 
    return 1; 
} 
#pragma mark -- 每組返回多少個(gè) 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 
{ 
    return self.dataArr.count; 
} 
#pragma mark -- 每個(gè)cell的高度 
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    TimeLineModel*model = self.dataArr[indexPath.row]; 
    return [self.tableView cellHeightForIndexPath:indexPath model:model keyPath:@"model" cellClass:[TimeLineCell class] contentViewWidth:self.frame.size.width]; 
} 
#pragma mark -- 每個(gè)cell顯示的內(nèi)容 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    TimeLineCell*cell = [TimeLineCell timeLineCell:tableView]; 
    if (indexPath.row == 0) { 
        cell.lineView.sd_layout.topSpaceToView(cell.pointView, 0); 
        cell.lineView.backgroundColor = [UIColor grayColor]; 
        cell.pointView.backgroundColor = [UIColor redColor]; 
    }else{ 
        cell.lineView.sd_layout.topSpaceToView(cell.contentView, 0); 
        cell.pointView.backgroundColor = [UIColor grayColor]; 
        cell.lineView.backgroundColor = [UIColor grayColor]; 
    } 
    cell.model = self.dataArr[indexPath.row]; 
    cell.selectionStyle = UITableViewCellSelectionStyleNone; 
    return cell; 
} 
#pragma mark -- 選擇每個(gè)cell執(zhí)行的操作 
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ 
    [tableView deselectRowAtIndexPath:indexPath animated:NO]; 
} 

3.關(guān)鍵在于tableViewCell布局，采用了Xib，方便對樣式進(jìn)行設(shè)置，布局依然采用的是SDAutoLayout這個(gè)庫

圖片.png

4.看下布局代碼,這里對titleLB的布局做高度自適應(yīng)，及設(shè)置autoHeightRatio為0即可，然后我們直接在設(shè)置模型中調(diào)用 [self setupAutoHeightWithBottomView:self.titleLB bottomMargin:0]就自動完成了高度自適應(yīng)，是不是很方便

- (void)awakeFromNib { 
    [super awakeFromNib]; 
    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; 
    [self setupAutoHeightWithBottomView:self.titleLB bottomMargin:0]; 
} 

5.到此，封裝完畢，***我們來看看控制器調(diào)用代碼

- (void)viewDidLoad { 
    [super viewDidLoad]; 
    self.automaticallyAdjustsScrollViewInsets = YES; 
    self.timeLine = [[QinzTimeLine alloc]init]; 
    [self setData]; 
    [self.timeLine setSuperView:self.view DataArr:self.dataArr]; 
} 

總結(jié)：整體主要采用tableView進(jìn)行布局，然后讓cell的高度自適應(yīng)，需要注意的地方就是Cell中時(shí)間軸中的線條需要保持連貫，所以需要對***個(gè)cell進(jìn)行判斷，讓線條剛好與原點(diǎn)連接。

***，附上demo供參考：https://gitee.com/Qinz_323/qinztimeline

我是Qinz,希望我的文章對你有幫助。