iOS之TimeLine(时间轴)的实现
这是一个关于OC时间轴的简单实现,我认为重要的是思路。
感谢作者:Cyandev 的文章《iOS 实现时间线列表效果》给的思路。这里先附上Objective-C的代码实现,有时间再去试试Swift
先看一下效果:

再看一段主要的代码:
//根据cell判断cell中bottomLine的颜色,如果不是最后一个,则颜色和topLine颜色一样。
cell.buttomLine.backgroundColor = indexPath.row == (_dataArray.count-) ? [UIColor grayColor] : cell.topLine.backgroundColor;
self.topLine.backgroundColor = cell.topLine.backgroundColor;
// cell.topLine.backgroundColor = indexPath.row == 0 ? [UIColor clearColor] : self.topLine.backgroundColor; //使创建的 topLine 视图背景颜色 等于 cell中 topLine 的背景颜色
self.topLine.backgroundColor = cell.topLine.backgroundColor;
//获取cell中topLine 或者bottomLine 的 x 位置。
/**
* 将像素point由point所在视图转换到目标视图view中,返回在目标视图view中的像素值
* (CGPoint)convertPoint:(CGPoint)point toView:(UIView *)view
*/
self.leadingSpaceOfLines = [cell convertPoint:cell.topLine.frame.origin toView:self.view].x; [self scrollViewDidScroll:tableView];
#pragma mark --important code--
//根据上下拉动,动态改变 topLine 和 bottomLine 的 y 轴坐标。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
_topLine.frame = CGRectMake(_leadingSpaceOfLines, , , -scrollView.contentOffset.y); CGFloat yOffSet = scrollView.frame.size.height - scrollView.contentSize.height + scrollView.contentOffset.y ;
_bottomLine.frame = CGRectMake(_leadingSpaceOfLines, self.view.frame.size.height - yOffSet, , self.view.frame.size.height); }
这里是我的GitHub上的demo:TimeLine
iOS之TimeLine(时间轴)的实现的更多相关文章
- timeline时间轴进度“群英荟萃”
timeline时间轴进度“群英荟萃” 是日,无论PC项目还是APP,都涉及到了通常称谓的“时间轴”UI展现布局.产品和设计师都喜欢横向.纵向的时间轴来传达产品的寓意.如此,如斯!总结一套 time ...
- vue使用iview Timeline 时间轴不显示问题
vue Timeline 时间轴不显示渲染的效果 官网代码 <Timeline pending> <TimelineItem>发布1.0版本</TimelineItem& ...
- iOS最为简单时间轴(GZTimeLine)
概述 迄今为止最为简单的时间轴 :可以自定义(类似于美团的送餐信息) 详细 代码下载:http://www.demodashi.com/demo/10797.html 迄今为止 最为简单的时间轴 :可 ...
- fiddler笔记:TimeLine时间轴选项卡
1.TimeLine选项卡介绍 TimeLine选项卡支持使用"瀑布"模型查看1~250个选中的Session.主要用于帮助性能分析和理解请求之间的关联.选项卡的主体内容是数据流视 ...
- [原创]首次制作JQueryUI插件-Timeline时间轴
特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...
- Jquery实现超酷的时间轴特效
Timeline时间轴Jquery特效是一款现在互联网上非常流行的一种布局结构,结合了瀑布流布局,最近很多网友问到这种特效,网站上有网友们分享过一款,功能虽然实现,但样式不太好看,今天就把它整理出来分 ...
- Timeline Portfolio - 时间轴作品集效果
这里分享一个超炫的时间轴展示作品集效果.设计师和前端开发人员可以借助这个效果来制作新颖的作品集和个人简历.时间轴专门用来呈现出年代的一系列事件.您可以把这种效果嵌入各种媒体,包括微博,视频和地图,并把 ...
- 超炫的时间轴jquery插件Timeline Portfolio
Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...
- Alamofire源码解读系列(十二)之时间轴(Timeline)
本篇带来Alamofire中关于Timeline的一些思路 前言 Timeline翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...
随机推荐
- Datalogic组网模式下通讯
1.首先要在visiset工具下,设置好地址端口号,组网模式master slave参数: 2.打开工具hercules,选择TCP Client选项,设置参数好连接并通讯,发送打开.关闭 按钮指令, ...
- Linux软件包管理
Linux软件包管理 Linux软件包管理主要有2类:是二进制包管理.源码包管理 二进制包管理 主要有RPM和YUM两种 RPM包管理 安装 --ivh:-v ,-vv,-vvv显示的安装信息依次详细 ...
- apache 配虚拟主机转发到tomcat
我用的是apache2.4.23, 连接tomcat使用自带的 proxy-ajp,需要开启相关模块 引用 http://www.server110.com/apache/201404/10273.h ...
- PHP中::、->、self、$this操作符的区别
在访问PHP类中的成员变量或方法时,如果被引用的变量或者方法被声明成const(定义常量)或者static(声明静态),那么就必须使用操作符::,反之如果被引用的变量或者方法没有被声明成const或者 ...
- 3篇NeuroImage文献分析
鉴于之前读的一些文章很容易就忘掉了,故打算花点时间记录下所读的文献. 这几天花了一些时间读了3篇文献: Intersubject consistency of cortical MEG signals ...
- EndNote(二)之英文引文导入方式
在上一篇EndNote教程(一)--基本介绍中介绍了基本使用,今天将来介绍如何将常用文献引文导入EndNote中. EndNote在文献管理方面有着很多优点,可以节约很多精力.但是,不同文献查询网站可 ...
- 【JavaScript】JS 中 原始字符串 和 HTML 字符转换
参考资料:http://www.sjyhome.com/javascript/js-html-escape.html JS转换HTML转义符 SJY • 发表于:2013年10月05日 17:04 • ...
- 网站底部版权信息区(bootstrap)
bootstrap的强大功能毋庸置疑.所以,网站底部版权信息区可以用bootstrap的“栅格系统”完成. 下面是一个未经处理的底部版权信息区的样式: <div class="cont ...
- ORACLE发送带附件邮件的二三事之一
在oracle使用过程中,我们可以通过pl/sql生成数据文件,也可以通过spool on spool off生成,但某些环境下,我们需要通过存储过程处理数据,数据处理完,需要自动生成数据文件,手工导 ...
- 使用野狗(Wilddog)云setValue写入数据
- (void)viewDidLoad { [super viewDidLoad]; //创建野狗实例化对象 用于随时监听数值变化 Wilddog *myRootRef = [[Wilddog all ...