<acronym id='oicy1'><em id='oicy1'></em><td id='oicy1'><div id='oicy1'></div></td></acronym><address id='oicy1'><big id='oicy1'><big id='oicy1'></big><legend id='oicy1'></legend></big></address>
      <ins id='oicy1'></ins>

      <dl id='oicy1'></dl>
      <i id='oicy1'><div id='oicy1'><ins id='oicy1'></ins></div></i>

      <code id='oicy1'><strong id='oicy1'></strong></code>

      <fieldset id='oicy1'></fieldset>

    1. <tr id='oicy1'><strong id='oicy1'></strong><small id='oicy1'></small><button id='oicy1'></button><li id='oicy1'><noscript id='oicy1'><big id='oicy1'></big><dt id='oicy1'></dt></noscript></li></tr><ol id='oicy1'><table id='oicy1'><blockquote id='oicy1'><tbody id='oicy1'></tbody></blockquote></table></ol><u id='oicy1'></u><kbd id='oicy1'><kbd id='oicy1'></kbd></kbd>
        <span id='oicy1'></span>
            <i id='oicy1'></i>

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

            • 时间:
            • 浏览:5
            • 来源:124软件资讯网

              Qinz

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

              Qinz

              • 1.首先我们建立一个UIView,在上面放一个tableView,声明一个要领 ,通报两个参数 ,第一个参数是需要将该时间轴放在哪个视图上 ,第二个参数是通报数据源  ,头文件下:

              #import 
              @interface QinzTimeLine : UIView
              @property (nonatomic, strong) NSArray *titleArr;
              -(void)setSuperView:(UIView*)superView DataArr:(NSMutableArray*)dataArr;
              @end
              • 2.我们再来看看.m文件,也就是最简朴的tableView的应用  ,这里有一个 [self.tableView cellHeightForIndexPath:indexPath model:model keyPath:@"model" cellClass:[TimeLineCell class] contentViewWidth:self.frame.size.width]要领是用到了SDAutoLayout这个库用来自动盘算cell高度的

              #import "QinzTimeLine.h"
              #import "SDAutoLayout.h"
              #import "TimeLineCell.h"
              @interface QinzTimeLine ()
              @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 -- 每组返回几多个
              - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
              {
                  return self.dataArr.count;
              }
              #pragma mark -- 每个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 -- 每个cell显示的内容
              - (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 -- 选择每个cell执行的操作
              - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
                  
                  [tableView deselectRowAtIndexPath:indexPath animated:NO];
              }
              • 3.要害在于tableViewCell结构  ,接纳了Xib  ,利便对样式举行设置 ,结构依然接纳的是SDAutoLayout这个库

              • 4.看下结构代码,这里对titleLB的结构做高度自顺应 ,及设置autoHeightRatio为0即可  ,然后我们直接在设置模子中挪用 [self setupAutoHeightWithBottomView:self.titleLB bottomMargin:0]就自动完成了高度自顺应 ,是不是很利便

              - (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.到此 ,封装完毕 ,最后我们来看看控制器挪用代码

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

              总结:整体主要接纳tableView举行结构  ,然后让cell的高度自顺应  ,需要注重的地方就是Cell中时间轴中的线条需要保持连贯 ,以是需要对第一个cell举行判断  ,让线条恰好与原点毗连 。

              最后  ,附上demo供参考:http://git.oschina.net/Qinz_323/qinztimeline

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