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翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...
随机推荐
- UvaLA 3938 "Ray, Pass me the dishes!"
"Ray, Pass me the dishes!" Time Limit: 3000MS Memory Limit: Unkn ...
- bzoj4237 稻草人
我是萌萌的传送门 题意不难理解吧-- 一开始看到这道题的时候lrd告诉我这题要分治,还给我讲了讲分治要怎么写,好像是CDQ+树状数组来着--(好吧我已经忘了--)然而我第一眼看完题之后的思路是数据结构 ...
- HTTP Status 400 - Required String parameter 'userName' is not present 错误
HTTP Status 400 - Required String parameter 'userName' is not present 错误 先mark 有时间详细写 参考链接: https:/ ...
- C# I/O
获取运行时的动态目录 private static string GetDataDir_Data() { var parent = Directory.GetParent(Directory.GetC ...
- ubuntu-docker-consul-swarm-shipyard-portainer
--- env --- root@node1:~# cat /etc/issueUbuntu 12.04.4 LTS \n \l root@node1:~# docker -vDocker versi ...
- Google Code Jam 2016 Round 1C C
题意:三种物品分别有a b c个(a<=b<=c),现在每种物品各选一个进行组合.要求每种最和最多出现一次.且要求任意两个物品的组合在所有三个物品组合中的出现总次数不能超过n. 要求给出一 ...
- swift错误 Expressions are not allowed at the top level
``` ... earlier we said top-level code isn't allowed in most of your app's source files. The excepti ...
- Xcode 快速开发 代码块
Xcode的代码片段(Code Snippets)创建自定义的代码片段,当你重用这些代码片段时,会给你带来很大的方便. 常用的: 1.strong:@property (nonatomic,stron ...
- mysql主从
1 系统规划 1.1 mysql版本 Mysql版本 mysql-5.5.51 1.2 服务器地址 服务器地址 10.180.2.167 1.3 mysql目录 主 ...
- 获取QQ缓存图片