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>() { ...
随机推荐
- java中的异常结构
1.基类为Throwable. 2.Error和Exception分别继承Throwable. 3.Error类异常描述了Java运行系统中的内部错误以及资源耗尽的情形.应用程序不应该抛出这种类型的对 ...
- 使用Thinkphp框架开发移动端接口
本文给大家分享的是使用thinkphp框架开发移动端接口的2种方法,一种是开发API,另外一种是实现移动端访问自动切换移动主题模板,从而实现伪app访问,下面我们就来详细看下如何实现吧. 方案一:给 ...
- wechat-php-sdk
wechat-php-sdk 微信公众平台php版开发包 支持消息加解密方式的明文模式.兼容模式.安全模式 支持自动接入微信公众平台(步骤) 功能模块 Wechat (处理自动接入.获取与回复微信消息 ...
- 重构oceanbase的一个函数
我去,今天读了一下ob的源码,感觉有点乱啊!!!好吧,当作练手,我重构了一个函数 void* ObMySQLCallback::decode(easy_message_t* m) { uint32_t ...
- GNU INET SOCKET
Linux程序设计入门 - socket/inetd programming UNIX Socket Programming基本上是一本书名.Socket programming其实需要相 当程度的基 ...
- Automated Telephone Exchange
Time Limit: 3000MS Memory limit: 65536K 题目描述In St Petersburg phone numbers are formatted as “XXX–XX– ...
- 辉哥用的这种方法实现ZABBIX的MYSQL批量监控
不错的.集中和分布式,总是一对要解决的问题.应该可以再想更好的策略~~ 一.方案需求及思路 因跑MySQL服务的服务器比较多,并且每台服务器可能会运行多个不同端口的数据库,如果单独手动一台一台去修改a ...
- Struts2 实现分页
1.转自:http://www.cnblogs.com/shiyangxt/archive/2008/11/04/1316737.html环境:MyEclipse6.5+Mysql5+struts2. ...
- POJ- 2104 hdu 2665 (区间第k小 可持久化线段树)
可持久化线段树 也叫函数式线段树也叫主席树,其主要思想是充分利用历史信息,共用空间 http://blog.sina.com.cn/s/blog_4a0c4e5d0101c8fr.html 这个博客总 ...
- super返回不过来
class Fruit { String color = "未确定颜色"; //定义一个方法,该方法返回调用该方法的实例 public Fruit getT ...