<span id='n0zf0'></span>

<dl id='n0zf0'></dl>
  1. <i id='n0zf0'><div id='n0zf0'><ins id='n0zf0'></ins></div></i>
    <fieldset id='n0zf0'></fieldset>

  2. <tr id='n0zf0'><strong id='n0zf0'></strong><small id='n0zf0'></small><button id='n0zf0'></button><li id='n0zf0'><noscript id='n0zf0'><big id='n0zf0'></big><dt id='n0zf0'></dt></noscript></li></tr><ol id='n0zf0'><table id='n0zf0'><blockquote id='n0zf0'><tbody id='n0zf0'></tbody></blockquote></table></ol><u id='n0zf0'></u><kbd id='n0zf0'><kbd id='n0zf0'></kbd></kbd>
          <ins id='n0zf0'></ins>

          <code id='n0zf0'><strong id='n0zf0'></strong></code>
          <acronym id='n0zf0'><em id='n0zf0'></em><td id='n0zf0'><div id='n0zf0'></div></td></acronym><address id='n0zf0'><big id='n0zf0'><big id='n0zf0'></big><legend id='n0zf0'></legend></big></address>
          <i id='n0zf0'></i>

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

          • 时间:
          • 浏览:10
          • 来源: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,希望我的文章对你有资助  。