時(shí)間軸在一些app中用的場(chǎng)景還不少疯坤，原理實(shí)現(xiàn)起來(lái)較為簡(jiǎn)單着裹，下面我們就來(lái)動(dòng)手封裝一個(gè)比較常用的時(shí)間軸，具體效果看下圖：
Qinz
1.首先我們創(chuàng)建一個(gè)UIView,在上面放一個(gè)tableView,聲明一個(gè)方法剂公，傳遞兩個(gè)參數(shù)起便，第一個(gè)參數(shù)是需要將該時(shí)間軸放在哪個(gè)視圖上念脯，第二個(gè)參數(shù)是傳遞數(shù)據(jù)源狞洋，頭文件下：
#import
@interfaceQinzTimeLine:UIView
@property(nonatomic,strong)NSArray*titleArr;
-(void)setSuperView:(UIView*)superView DataArr:(NSMutableArray*)dataArr;
@end
2.我們?cè)賮?lái)看看.m文件,也就是最簡(jiǎn)單的tableView的應(yīng)用，這里有一個(gè) [self.tableView cellHeightForIndexPath:indexPath model:model keyPath:@"model" cellClass:[TimeLineCell class]?contentViewWidth:self.frame.size.width]方法是用到了SDAutoLayout這個(gè)庫(kù)用來(lái)自動(dòng)計(jì)算cell高度的
#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*)superView DataArr:(NSMutableArray*)dataArr{
self.frame = superView.bounds;
[superView addSubview: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);
}
#pragma mark -- tableView的代理方法
#pragma mark -- 返回多少組
- (NSInteger)numberOfSectionsInTableView:(UITableView*)tableView
{
return1;
}
#pragma mark -- 每組返回多少個(gè)
- (NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section
{
returnself.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:[TimeLineCellclass] 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 = [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;
}
#pragma mark -- 選擇每個(gè)cell執(zhí)行的操作
- (void)tableView:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath*)indexPath{
[tableView deselectRowAtIndexPath:indexPath animated:NO];
}
3.關(guān)鍵在于tableViewCell布局绿店，采用了Xib吉懊，方便對(duì)樣式進(jìn)行設(shè)置，布局依然采用的是SDAutoLayout這個(gè)庫(kù)
圖片.png
4.看下布局代碼,這里對(duì)titleLB的布局做高度自適應(yīng)，及設(shè)置autoHeightRatio為0即可借嗽，然后我們直接在設(shè)置模型中調(diào)用 ?[self setupAutoHeightWithBottomView:self.titleLB bottomMargin:0]就自動(dòng)完成了高度自適應(yīng)怕午，是不是很方便
- (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.titleLB bottomMargin:0];
}
5.到此，封裝完畢淹魄，最后我們來(lái)看看控制器調(diào)用代碼
- (void)viewDidLoad {
[superviewDidLoad];
self.automaticallyAdjustsScrollViewInsets =YES;
self.timeLine = [[QinzTimeLine alloc]init];
[selfsetData];
[self.timeLine setSuperView:self.view DataArr:self.dataArr];
}
總結(jié)：整體主要采用tableView進(jìn)行布局郁惜，然后讓cell的高度自適應(yīng)，需要注意的地方就是Cell中時(shí)間軸中的線條需要保持連貫甲锡，所以需要對(duì)第一個(gè)cell進(jìn)行判斷兆蕉，讓線條剛好與原點(diǎn)連接。
歡迎加入iOS技術(shù)交流群710170781缤沦，獲取更多有用技術(shù)干貨虎韵、文檔資料。有一句話叫三人行必有我?guī)煾追希瑲g迎進(jìn)群共同進(jìn)步包蓝。
