iOS时间轴的实现与设计思路分享

咳咳

之前做的外包项目中要实现一个时间轴，效果类似这种

timeline.png

思路是cell中添加一条线，然后在view中再添加两个UIView，利用convertRect:(CGRect)rect toView:(nullable UIView *)view 方法，转换坐标系，获取x,y， 宽高。
之后设置滚动监听，动态变化高度。

很简单，先创建一个TableViewCell + xib 文件， 拖一个UIView ，拉好约束。

屏幕快照 2016-12-16 14.32.51.png

这样简单的完成初步样子，但是下拉以及空白部分的时间轴是没有的，那么接下来添加这两个部分的UI。
新建两个UIView 初始化好，添加到view 上

@property (strong,nonatomic)UIView* v_top;
@property (strong,nonatomic)UIView* v_bottom;

//初始化时间轴
    self.v_top = [[UIView alloc]init];
    [self.view addSubview:self.v_top];
    [self.v_top setBackgroundColor:[UIColor colorWithRed:71/255.0f green:176/255.0f blue:237/255.0f alpha:1.0f]];
    
    self.v_bottom = [[UIView alloc]init];
    [self.view addSubview:self.v_bottom];
    [self.v_bottom setBackgroundColor:[UIColor colorWithRed:71/255.0f green:176/255.0f blue:237/255.0f alpha:1.0f]];

接下来就是解决两个view 的x，y坐标 还有宽高

//用convertRect 方法转换cell 中的坐标系到当前view中
-(CGRect)convertRect:(CGRect)rect toView:(nullable UIView *)view;

@property (assign,nonatomic)CGRect timeLineRect;

//手动刷新布局 防止layout布局未完成 导致位置不正确（我另一个项目里会这样，但是好像跟约束设置的有关系）
    [cell.contentView setNeedsLayout];
    [cell.contentView layoutIfNeeded];
    self.timeLineRect = [cell convertRect:cell.v_line.frame toView:self.view];

然后用UISrcollwView代理方法 监听滚动，动态改变高度

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    self.v_top.frame = CGRectMake(self.timeLineRect.origin.x, 0,self.timeLineRect.size.width, -scrollView.contentOffset.y);
    
    CGFloat yOffSet = scrollView.frame.size.height - scrollView.contentSize.height + scrollView.contentOffset.y ;
    self.v_bottom.frame = CGRectMake(self.timeLineRect.origin.x, self.view.frame.size.height - yOffSet,self.timeLineRect.size.width, self.view.frame.size.height);
}

好了到这里就实现了时间轴的效果，看看效果图

屏幕快照 2016-12-16 14.50.39.png

如果有别的想法，就留言探讨探讨吧！