iOS 实现时间线列表效果
之前看到美团的订单详情页面很有特色,于是决定模仿一下这个效果。
其实就是简单的 TableView 技巧,下面我们就来一步一步实现它。
画个泡泡
首先到 Sketch 里画出气泡的效果
很简单,一个圆角矩形 + 一个三角形,然后 Union 操作一下,勾个边,done!
然后导出图片文件,添加到 Xcode 中。
设计 TableViewCell 原型
子类化一个新的 UITableViewCell + Xib,简单拖拽几个控件。
我这里那两条线就没用 AutoLayout 了,太小了,回来直接用代码布局就行了。
拖线连几个 Outlet ,然后把气泡背景设置一下:
事实上,气泡的背景图我制作了两个版本,一个是未选中的状态,另外一个是选中的状态,背景颜色不一样,所以我在 setHighlighted(:_, :_) 这个函数中进行设置,其他的保持默认即可。
然后在 ViewController 中随便做一些假数据,先看看效果。
哈哈,已经初具雏形了。但是还有一点问题:
底部的线是断掉的,并且颜色不对
下拉时上边的线也会断掉
那么下面我们就来修复这些问题。
完善细节效果
这里我的思路是在 ViewController 中再添加两个 View,并且监听 TableView 的滚动,然后动态调节两个 View 的位置。
首先声明两个新 View:
然后修正线条的颜色:
我在 tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) 中获取到 Cell 中线条的颜色,这样我们随时修改 Cell 中的颜色,这里就会自动变换,而不用 Hardcode 。
然后是比较困难的线条位置调整,我们需要得到 Cell 中线条的位置,让其 x 坐标和宽度一致,y 坐标和高度动态调整。
首先解决 x 坐标和宽度:
还是在 willDisplay 的方法中,我们用到了 convertPoint 方法进行坐标系变换,就是将线条在 Cell 中的坐标映射到它应该在 SuperView 中的坐标。
然后解决 y 坐标和高度:
因为要动态调整,所以我们监听滚动事件,并在其中计算各个坐标。有关这个公式的推导大家可以看看下拉刷新里公式的推导,它们是一致的。
到这里我们就基本完成这个效果了,看看怎么样吧:
小提醒
不要在 UITableViewController 中添加自己的 Subview ,因为它的 view 属性就是 TableView,如果添加 Subview,它们会一起滚动,虽然 WWDC 中也介绍过怎么处理,但毕竟太麻烦,所以我还是推荐大家直接用 UIViewController + TableView 来处理这类比较复杂的效果。
iOS 实现时间线列表效果的更多相关文章
- iOS实现时间线列表效果(例如订单详情页面的效果)
之前看到美团的订单详情页面很有特色,于是决定模仿一下这个效果. 其实就是简单的 TableView 技巧,下面我们就来一步一步实现它. 设计 TableViewCell 原型 子类化一个新的 UITa ...
- [RN] React Native 好用的时间线 组件
React Native 好用的时间线 组件 效果如下: 实现方法: 一.组件封装 CustomTimeLine.js "use strict"; import React, {C ...
- CSS之实现垂直时间线展示相关内容效果
如下,最近在工作中遇到实现时间线效果的需求,用纯css即可实现,下面给出详细实现代码. html: <div class="time_line_list_wrap hide" ...
- 一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文 ...
- echarts的时间线图表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- iOS - 用 UIBezierPath 实现果冻效果
最近在网上看到一个很酷的下拉刷新效果(http://iostuts.io/2015/10/17/elastic-bounce-using-uibezierpath-and-pan-gesture/). ...
- iOS CAReplicatorLayer 实现脉冲动画效果
iOS CAReplicatorLayer 实现脉冲动画效果 效果图 脉冲数量.速度.半径.透明度.渐变颜色.方向等都可以设置.可以用于地图标注(Annotation).按钮长按动画效果(例如录音按钮 ...
- 实现移动端touch事件的横向滑动列表效果
要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...
- EasyMvc入门教程-基本控件说明(3)时间线
我们有时候经常看到如下的页面: 或者快递物流信息图标,那么利用EasyMvc如何实现呢?很简单,看下面的例子: @{ var data=new List<TimeLineItem>() { ...
随机推荐
- access_token的获取2
概述 access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token.开发者需要进行妥善保存. access_token的存储至少要保留512个字符空间.acces ...
- openerp import namespace
# If True, the Python modules inside the openerp namespace are made available# without the 'openerp. ...
- 项目任务管理(TaskMgr)设计篇
为什么使用void FilllXX(TypeA pParm1, TypeB pParm2) 应用场景色:void FillXX的好处是可以不用关心实例情况:如果在方法体中需要一个实例,而方法体只知道基 ...
- bzoj1038: [ZJOI2008]瞭望塔
Description 致力于建设全国示范和谐小村庄的H村村长dadzhi,决定在村中建立一个瞭望塔,以此加强村中的治安.我们将H村抽象为一维的轮廓.如下图所示 我们可以用一条山的上方轮廓折线(x1, ...
- java 知识结构
JAVA基础阶段 阶段 技术名称 技术内容 T线 JavaSE JAVA 开发基础知识 | Eclipse 开发环境 | JavaSE 7.0 API | JavaSE 8.0新特性 | 多线程技术 ...
- Ruby自学笔记(五)— 条件判断
条件判断,在编程语言中都存在,而Ruby中的条件判断和Java中类似,当然还是存在些许差别 Ruby中条件判断的条件: 1) 可以使用 ==,<,>等比较运算来作为条件,比较运算可以返回t ...
- Java中的多线程总结(转)
1.多线程概述 当一个程序运行时,内部可能包含了多个顺序执行流,每个顺序执行流就是一个线程.主要以下几个优点: 线程之间很容易实现共享内存 创建线程代价较小 Java语言内置多线程功能支持 2.线 ...
- Spring: DispacherServlet和ContextLoaderListener中的WebApplicationContext的关系
在Web容器(比如Tomcat)中配置Spring时,你可能已经司空见惯于web.xml文件中的以下配置代码: <context-param> <param-name>cont ...
- bzoj3208
乍一看感觉好神,仔细一看数据范围…… 什么水题啊,直接暴力就可以了…… ..,..] of longint; v:..,..] of boolean; i,j,k,a1,a2,b1,b ...
- COJ 0346 WZJ的旅行(二)更新动态树分治版本
WZJ的旅行(二) 难度级别:D: 运行时间限制:3000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 时隔多日,WZJ又来到了幻想国旅行.幻想国由N个城市组成,由 ...