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 實現時間軸列表效果