这是一个关于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字符转义

    在字符串中,某些序列具有特殊含义.这些序列均用反斜线('\')开始,即所谓的转义字符.MySQL识别下面的转义序列: \0 ASCII 0(NUL)字符. \' 单引号('''). \" 双 ...

  2. 创伤后应激障碍(PTSD)

    创伤后应激障碍(Post Traumatic Stress Disorder,PTSD)又称延迟性心因性反应(Delayed Psychogenic Reaction),是由应激性事件或处境而引起的延 ...

  3. iOS6新特征:UICollectionView介绍

    http://blog.csdn.net/eqera/article/details/8134986 1.1. Collection View 全家福: UICollectionView, UITab ...

  4. Maven的POM.xml配置大全

    <?xml version="1.0" encoding="utf-8"?> <project xmlns="http://mave ...

  5. python , angular js 学习记录【3】

    1.Alembic是SQLAlchemy作者编写的Python数据库迁移工具.用它实现模型类和数据库的同步更新.(安装以及操作步骤 使用Alembic迁移数据库) 使用Alembic添加数据库字段操作 ...

  6. Android实现双击事件的两种方式

    Work around的方法是先监听onTouch事件来监听连续点击次数,每次点击都布置一个间隔时间的延时任务,延时任务执行时判断间隔内是否还有点击,如果没有则发布点击次数,重置计数. 实现代码如下: ...

  7. css3伪类、伪元素选择器---nth-child()和nth-of-type()选择器的区别

    p:nth-child(2) 要满足两个条件,1:选择的是p元素的父元素的第二个子元素   2:选择的第二个子元素必须是p元素,如果不满足,则将不显示 p:nth-of-type(2) 选择父元素下的 ...

  8. CRUD操作

    1.增加 insert into 表名 values(列的值,列的值) insert into 表名(列名,列名)valuse(值,值) 2.删除 delete from 表明 delete from ...

  9. 【Tomcat】配置Tomcat

    写这篇博文的原因:因为发布Maven项目的时候,始终无法访问.所以顺便重新配置了Tomcat. 1.首先到官网下载一个Tomcat7版本的zip包,解压后,放入C盘(根据个人需求放置). 2.修改co ...

  10. appium java 环境搭建

    appium是一款open source 移动自动化测试框架,既支持Android 也支持IOS. appium 基于webdriver协议执行测试脚本. 今天,如炒剩饭,介绍一下搭建appium A ...