之前看到美团的订单详情页面很有特色,于是决定模仿一下这个效果。

其实就是简单的 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 实现时间线列表效果的更多相关文章

  1. iOS实现时间线列表效果(例如订单详情页面的效果)

    之前看到美团的订单详情页面很有特色,于是决定模仿一下这个效果. 其实就是简单的 TableView 技巧,下面我们就来一步一步实现它. 设计 TableViewCell 原型 子类化一个新的 UITa ...

  2. [RN] React Native 好用的时间线 组件

    React Native 好用的时间线 组件 效果如下: 实现方法: 一.组件封装 CustomTimeLine.js "use strict"; import React, {C ...

  3. CSS之实现垂直时间线展示相关内容效果

    如下,最近在工作中遇到实现时间线效果的需求,用纯css即可实现,下面给出详细实现代码. html: <div class="time_line_list_wrap hide" ...

  4. 一款纯css实现的垂直时间线效果

    今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文 ...

  5. echarts的时间线图表

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  6. iOS - 用 UIBezierPath 实现果冻效果

    最近在网上看到一个很酷的下拉刷新效果(http://iostuts.io/2015/10/17/elastic-bounce-using-uibezierpath-and-pan-gesture/). ...

  7. iOS CAReplicatorLayer 实现脉冲动画效果

    iOS CAReplicatorLayer 实现脉冲动画效果 效果图 脉冲数量.速度.半径.透明度.渐变颜色.方向等都可以设置.可以用于地图标注(Annotation).按钮长按动画效果(例如录音按钮 ...

  8. 实现移动端touch事件的横向滑动列表效果

    要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...

  9. EasyMvc入门教程-基本控件说明(3)时间线

    我们有时候经常看到如下的页面: 或者快递物流信息图标,那么利用EasyMvc如何实现呢?很简单,看下面的例子: @{ var data=new List<TimeLineItem>() { ...

随机推荐

  1. java中的异常结构

    1.基类为Throwable. 2.Error和Exception分别继承Throwable. 3.Error类异常描述了Java运行系统中的内部错误以及资源耗尽的情形.应用程序不应该抛出这种类型的对 ...

  2. 使用Thinkphp框架开发移动端接口

     本文给大家分享的是使用thinkphp框架开发移动端接口的2种方法,一种是开发API,另外一种是实现移动端访问自动切换移动主题模板,从而实现伪app访问,下面我们就来详细看下如何实现吧. 方案一:给 ...

  3. wechat-php-sdk

    wechat-php-sdk 微信公众平台php版开发包 支持消息加解密方式的明文模式.兼容模式.安全模式 支持自动接入微信公众平台(步骤) 功能模块 Wechat (处理自动接入.获取与回复微信消息 ...

  4. 重构oceanbase的一个函数

    我去,今天读了一下ob的源码,感觉有点乱啊!!!好吧,当作练手,我重构了一个函数 void* ObMySQLCallback::decode(easy_message_t* m) { uint32_t ...

  5. GNU INET SOCKET

    Linux程序设计入门 - socket/inetd programming UNIX Socket Programming基本上是一本书名.Socket programming其实需要相 当程度的基 ...

  6. Automated Telephone Exchange

    Time Limit: 3000MS Memory limit: 65536K 题目描述In St Petersburg phone numbers are formatted as “XXX–XX– ...

  7. 辉哥用的这种方法实现ZABBIX的MYSQL批量监控

    不错的.集中和分布式,总是一对要解决的问题.应该可以再想更好的策略~~ 一.方案需求及思路 因跑MySQL服务的服务器比较多,并且每台服务器可能会运行多个不同端口的数据库,如果单独手动一台一台去修改a ...

  8. Struts2 实现分页

    1.转自:http://www.cnblogs.com/shiyangxt/archive/2008/11/04/1316737.html环境:MyEclipse6.5+Mysql5+struts2. ...

  9. POJ- 2104 hdu 2665 (区间第k小 可持久化线段树)

    可持久化线段树 也叫函数式线段树也叫主席树,其主要思想是充分利用历史信息,共用空间 http://blog.sina.com.cn/s/blog_4a0c4e5d0101c8fr.html 这个博客总 ...

  10. super返回不过来

    class Fruit {     String color = "未确定颜色";     //定义一个方法,该方法返回调用该方法的实例     public Fruit getT ...