咳咳🙊
之前做的外包项目中要实现一个时间轴,效果类似这种
思路是cell中添加一条线,然后在view中再添加两个UIView,利用convertRect:(CGRect)rect toView:(nullable UIView *)view 方法,转换坐标系,获取x,y, 宽高。
之后设置滚动监听,动态变化高度。
很简单,先创建一个TableViewCell + xib 文件, 拖一个UIView ,拉好约束。
这样简单的完成初步样子,但是下拉以及空白部分的时间轴是没有的,那么接下来添加这两个部分的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);
}
好了到这里就实现了时间轴的效果,看看效果图