这是一个关于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(时间轴)的实现的更多相关文章

  1. timeline时间轴进度“群英荟萃”

    timeline时间轴进度“群英荟萃”  是日,无论PC项目还是APP,都涉及到了通常称谓的“时间轴”UI展现布局.产品和设计师都喜欢横向.纵向的时间轴来传达产品的寓意.如此,如斯!总结一套 time ...

  2. vue使用iview Timeline 时间轴不显示问题

    vue Timeline 时间轴不显示渲染的效果 官网代码 <Timeline pending> <TimelineItem>发布1.0版本</TimelineItem& ...

  3. iOS最为简单时间轴(GZTimeLine)

    概述 迄今为止最为简单的时间轴 :可以自定义(类似于美团的送餐信息) 详细 代码下载:http://www.demodashi.com/demo/10797.html 迄今为止 最为简单的时间轴 :可 ...

  4. fiddler笔记:TimeLine时间轴选项卡

    1.TimeLine选项卡介绍 TimeLine选项卡支持使用"瀑布"模型查看1~250个选中的Session.主要用于帮助性能分析和理解请求之间的关联.选项卡的主体内容是数据流视 ...

  5. [原创]首次制作JQueryUI插件-Timeline时间轴

    特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...

  6. Jquery实现超酷的时间轴特效

    Timeline时间轴Jquery特效是一款现在互联网上非常流行的一种布局结构,结合了瀑布流布局,最近很多网友问到这种特效,网站上有网友们分享过一款,功能虽然实现,但样式不太好看,今天就把它整理出来分 ...

  7. Timeline Portfolio - 时间轴作品集效果

    这里分享一个超炫的时间轴展示作品集效果.设计师和前端开发人员可以借助这个效果来制作新颖的作品集和个人简历.时间轴专门用来呈现出年代的一系列事件.您可以把这种效果嵌入各种媒体,包括微博,视频和地图,并把 ...

  8. 超炫的时间轴jquery插件Timeline Portfolio

    Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...

  9. Alamofire源码解读系列(十二)之时间轴(Timeline)

    本篇带来Alamofire中关于Timeline的一些思路 前言 Timeline翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...

随机推荐

  1. 忘记mysql root 密码修改小技巧

    首先我说一下我的情况,我并不是忘记了我的root密码,只不过是我在使用phpmyadmin的时候更改密码的时候选择了如图1 的这个方法将密码加密并更改了,然后就再次登录的时候登录不上,所以对于菜鸟级的 ...

  2. hdu 4481 Time travel(高斯求期望)(转)

    (转)http://blog.csdn.net/u013081425/article/details/39240021 http://acm.hdu.edu.cn/showproblem.php?pi ...

  3. MiniProfiler

    1.安装MiniProfiler包 PM> Install-Package MiniProfiler 2.在Views下的web.config中引入命名空间: <pages pageBas ...

  4. ueditor 1.4.3 gbk asp 上传中文乱码 终极解决方法 ie6 ie8 也适用

    [摘要:百度编纂器1.43 gbk asp 题目 1.firefox3.0下 单图上传 面没有了 面多图上传 中央的蓝色按钮(即 面击挑选图片)没有表现(附件上传出那个题目) 没有晓得我的水狐吃翔了 ...

  5. web页面跳转的几种方式

    可用客户端触发或服务端触发的方式来实现页面跳转. 客户端触发 方式一:使用Javascript 利用window.location对象的href属性.assign()方法或replace()方法来实现 ...

  6. 学习 opencv---(8)非线性滤波:中值滤波,双边滤波

    正如我们上一篇文章中讲到的,线性滤波可以实现很多种不同的图像变换.然而非线性滤波,如中值滤波器和双边滤波器,有时可以达到更好的实现效果. 邻域算子的其他一些例子还有对 二值图像进行操作的形态学算子,用 ...

  7. 函数floor(n)

    Matlab函数floor(n): 仅取整数部分,剔除小数部分 例如: floor(9.2)=9; 仅此

  8. Python3.5在Windows 7下连接ORACLE数据库

    1.首先需要安装好oracle数据库,本机适用plsql连接数据库正常,记录下数据库名称 2.安装cx_oracle模块 pip install cx_Oracle 3.python中引入模块 imp ...

  9. JNDI

    这两天研究了一下 context.lookup("java:comp/env/XXX")和直接context.lookup("XXX")的区别 网上关于这两个的 ...

  10. 【原创】threejs实现一个全景地球

    介绍 本demo实现一个旋转的全景地球,效果如下 技术分析 1.球体 2.球体表面贴图 实现 创建容器 <div id="container"></div> ...