iOS开发之带你5分钟封装一个时间轴

移动开发
时间轴在一些app中用的场景还不少,原理实现起来较为简单,下面我们就来动手封装一个比较常用的时间轴

时间轴在一些app中用的场景还不少,原理实现起来较为简单,下面我们就来动手封装一个比较常用的时间轴,具体效果看下图:

 


Qinz

1.首先我们创建一个UIView,在上面放一个tableView,声明一个方法,传递两个参数,***个参数是需要将该时间轴放在哪个视图上,第二个参数是传递数据源,头文件下:

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

2.我们再来看看.m文件,也就是最简单的tableView的应用,这里有一个 [self.tableView cellHeightForIndexPath:indexPath model:model keyPath:@"model" cellClass:[TimeLineCell class]contentViewWidth:self.frame.size.width]方法是用到了SDAutoLayout这个库用来自动计算cell高度的

  1. #import "QinzTimeLine.h" 
  2. #import "SDAutoLayout.h" 
  3. #import "TimeLineCell.h" 
  4. @interface QinzTimeLine ()<UITableViewDelegate,UITableViewDataSource> 
  5. @property (nonatomic, strong) UITableView *tableView; 
  6. @property (nonatomic, strong) NSMutableArray *dataArr; 
  7. @end 
  8. @implementation QinzTimeLine 
  9. -(void)setSuperView:(UIView *)superView DataArr:(NSMutableArray *)dataArr{ 
  10.     self.frame = superView.bounds; 
  11.     [superView addSubview:self]; 
  12.     [self setUp]; 
  13.     self.dataArr = dataArr; 
  14. -(void)setUp{ 
  15.     self.tableView = [[UITableView alloc]init]; 
  16.     self.tableView.delegate = self; 
  17.     self.tableView.dataSource = self; 
  18.     self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; 
  19.     [self addSubview:self.tableView]; 
  20.     self.tableView.sd_layout.topEqualToView(self).leftEqualToView(self).bottomEqualToView(self).rightEqualToView(self); 
  21. #pragma mark -- tableView的代理方法 
  22. #pragma mark -- 返回多少组 
  23. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView 
  24.     return 1; 
  25. #pragma mark -- 每组返回多少个 
  26. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 
  27.     return self.dataArr.count
  28. #pragma mark -- 每个cell的高度 
  29. - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath 
  30.     TimeLineModel*model = self.dataArr[indexPath.row]; 
  31.     return [self.tableView cellHeightForIndexPath:indexPath model:model keyPath:@"model" cellClass:[TimeLineCell class] contentViewWidth:self.frame.size.width]; 
  32. #pragma mark -- 每个cell显示的内容 
  33. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
  34.     TimeLineCell*cell = [TimeLineCell timeLineCell:tableView]; 
  35.     if (indexPath.row == 0) { 
  36.         cell.lineView.sd_layout.topSpaceToView(cell.pointView, 0); 
  37.         cell.lineView.backgroundColor = [UIColor grayColor]; 
  38.         cell.pointView.backgroundColor = [UIColor redColor]; 
  39.     }else
  40.         cell.lineView.sd_layout.topSpaceToView(cell.contentView, 0); 
  41.         cell.pointView.backgroundColor = [UIColor grayColor]; 
  42.         cell.lineView.backgroundColor = [UIColor grayColor]; 
  43.     } 
  44.     cell.model = self.dataArr[indexPath.row]; 
  45.     cell.selectionStyle = UITableViewCellSelectionStyleNone; 
  46.     return cell; 
  47. #pragma mark -- 选择每个cell执行的操作 
  48. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ 
  49.     [tableView deselectRowAtIndexPath:indexPath animated:NO]; 

3.关键在于tableViewCell布局,采用了Xib,方便对样式进行设置,布局依然采用的是SDAutoLayout这个库

 


图片.png

4.看下布局代码,这里对titleLB的布局做高度自适应,及设置autoHeightRatio为0即可,然后我们直接在设置模型中调用 [self setupAutoHeightWithBottomView:self.titleLB bottomMargin:0]就自动完成了高度自适应,是不是很方便

  1. - (void)awakeFromNib { 
  2.     [super awakeFromNib]; 
  3.     self.pointView.sd_layout.topSpaceToView(self.contentView, 20).leftSpaceToView(self.contentView, 5).widthIs(8).heightEqualToWidth(); 
  4.     self.pointView.sd_cornerRadius = @(4); 
  5.     self.lineView.sd_layout.topEqualToView(self.contentView).centerXEqualToView(self.pointView).widthIs(1).bottomSpaceToView(self.contentView, 0); 
  6.     self.ttimeLB.sd_layout.centerYEqualToView(self.pointView).leftSpaceToView(self.pointView, 10).rightSpaceToView(self.contentView, 10).heightIs(20); 
  7.     self.titleLB.sd_layout.topSpaceToView(self.ttimeLB, 15).leftEqualToView(self.ttimeLB).rightSpaceToView(self.contentView, 10).autoHeightRatio(0); 
  8. -(void)setModel:(TimeLineModel *)model{ 
  9.     _model = model; 
  10.     self.titleLB.text=  model.title; 
  11.     self.ttimeLB.text = model.time
  12.     [self setupAutoHeightWithBottomView:self.titleLB bottomMargin:0]; 

5.到此,封装完毕,***我们来看看控制器调用代码

  1. - (void)viewDidLoad { 
  2.     [super viewDidLoad]; 
  3.     self.automaticallyAdjustsScrollViewInsets = YES; 
  4.     self.timeLine = [[QinzTimeLine alloc]init]; 
  5.     [self setData]; 
  6.     [self.timeLine setSuperView:self.view DataArr:self.dataArr]; 

总结:整体主要采用tableView进行布局,然后让cell的高度自适应,需要注意的地方就是Cell中时间轴中的线条需要保持连贯,所以需要对***个cell进行判断,让线条刚好与原点连接。

***,附上demo供参考:https://gitee.com/Qinz_323/qinztimeline

我是Qinz,希望我的文章对你有帮助。

责任编辑:未丽燕 来源: 简书
相关推荐

2020-10-30 15:04:16

开发技能代码

2021-06-07 12:08:06

iOS Python API

2020-09-14 11:30:26

HTTP3运维互联网

2020-11-23 16:23:59

CSS设计技术

2010-12-10 17:23:56

IBMIaaS

2018-11-08 13:53:15

Flink程序环境

2012-06-28 10:26:51

Silverlight

2014-04-15 11:19:19

2021-06-02 09:12:04

App自动化测试测试自动化

2019-12-23 16:42:44

JavaScript前端开发

2021-04-30 16:23:58

WebRTC实时音频

2020-06-30 10:45:28

Web开发工具

2011-07-11 09:58:52

2021-10-19 07:27:08

HTTP代理网络

2013-08-02 10:20:03

android时间轴

2022-06-17 08:05:28

Grafana监控仪表盘系统

2021-02-16 09:17:40

VimLinux编辑器

2021-01-06 05:23:15

ServiceMesh网络阿帕网

2021-12-01 06:59:27

架构

2016-09-12 17:28:45

云存储应用软件存储设备
点赞
收藏

51CTO技术栈公众号