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翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...
随机推荐
- 【错误总结】java.lang.NoClassDefFoundError: org/objectweb/asm/ClassVisitor
运行环境 JDK1.7 64位 Window 7 64位 Ecplise Java EE IDE Struts 2.3.9 Tomcat 7 说明: ...
- mysql 中基础英语单词 (一)关于数据库创建与查找 (包括简写单词)
create 创建 limit 限制 count 计算 rollup 几上归纳 drop 降下,撤销 ...
- Linux学习之七--mysql的安装使用
安装mysql: CentOS7后的版本,的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1. 下载mysql的repo源 # wget http:// ...
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- rewrite
http://www.iis.net/downloads/microsoft/url-rewrite
- cat命令
[cat] 合并文件和打印到标准输出 命令格式: cat [OPTION]... [FILE]... 命令功能: 拼接文件或者做标准输入输出 命令格式: cat [OPTION].. ...
- js_跨域
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- Latex中插入C语言代码
Latex是一个文本排版的语言,能排版出各种我们想要的效果.而且用代码排版的优点是易于修改板式,因此在文本内容的排版时,Latex应用十分广泛. 当我们需要在Latex中插入代码时,就需要用到 \us ...
- 获取URL参数值
function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*) ...
- Qt在ui中使用代码添加新的控件
QLabel* label = new QLabel(ui->centralWidget);