作者：Mikeva链接：https://zhuanlan.zhihu.com/p/26762012来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

一、目的

這篇就是要教大家如何實作出水平的TableView。

就像下圖上面那一塊，可以當作第二層的Tab Bar 使用。

iOS預定地TableView是垂直滑動的效果，也就是由上往下看的動線。

但是當今天我們的UI需求是一個水平的呈現，很直覺的會想到用UICollectionView去實作，

但其實用UITableView來改造，我個人覺得更加容易，多一個實作選項也未嘗不好。

二、原理

原理其實很簡單，就是靠旋轉。

如果圖片的原理看得懂的話，就可以直接跳過這邊，到下一段落看Code的實作。

其實1.2.3步驟交換是沒有問題的。

1. 旋轉 270度 or - PI/2

第一步就是旋轉，270度也就是-PI/2或者3PI/2都是一樣的。然而會發現，他的旋轉是依據中心點做旋轉。

2. 移動到要的位置

接著就是要移動。依據跟原來的Table距離來看，

我們需要往左(+x方向)半個Table的長度然後往右半個Table的寬度(-x方向)

同理，我們還需要向上半個(-y方向)半個Table的長度然後往下半個Table的寬度(+y方向)

3. 旋轉Cell

最後別忘了Cell因為被旋轉了，所以我們得把他轉回來，才能讓使用者看到正確的顯示。剛剛轉了-PI/2，現在我們讓他轉PI/2來矯正方向。

三、程式碼實現(Swift)

說這麼多，直接來上Code最清楚。

1. 旋轉 270度 or - PI/2 (UITableView)

self.transform = CGAffineTransform(rotationAngle: CGFloat(-Double.pi/2))

2. 移動到要的位置 (UITableView)

這邊要注意的是，因為我們做了旋轉，所以顯示上面的長寬跟實際的長寬是顛倒的。

let xOrigin = (frame.size.width - frame.size.height) / 2.0;

let yOrigin = (frame.size.height - frame.size.width) / 2.0;

self.frame = CGRect(x: xOrigin, y: yOrigin, width: frame.size.height, height: frame.size.width);

3. 旋轉Cell (UITableViewCell)

self.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi/2)

完整程式碼連結

四、小結

有沒有覺得其實很簡單，不需要去處理UICollection的layout也是不錯的呀!