作者：Mikeva鏈接：https://zhuanlan.zhihu.com/p/26762012來源：知乎著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)烛亦，非商業(yè)轉(zhuǎn)載請注明出處。
一灭翔、目的
這篇就是要教大家如何實(shí)作出水平的TableView紊遵。
就像下圖上面那一塊，可以當(dāng)作第二層的Tab Bar 使用贝次。
iOS預(yù)定地TableView是垂直滑動的效果，也就是由上往下看的動線彰导。
但是當(dāng)今天我們的UI需求是一個(gè)水平的呈現(xiàn)蛔翅，很直覺的會想到用UICollectionView去實(shí)作敲茄，
但其實(shí)用UITableView來改造，我個(gè)人覺得更加容易山析，多一個(gè)實(shí)作選項(xiàng)也未嘗不好堰燎。
二、原理
原理其實(shí)很簡單笋轨，就是靠旋轉(zhuǎn)秆剪。
如果圖片的原理看得懂的話，就可以直接跳過這邊爵政，到下一段落看Code的實(shí)作仅讽。
其實(shí)1.2.3步驟交換是沒有問題的。
1. 旋轉(zhuǎn) 270度 or - PI/2
第一步就是旋轉(zhuǎn)钾挟，270度也就是-PI/2或者3PI/2都是一樣的洁灵。然而會發(fā)現(xiàn)，他的旋轉(zhuǎn)是依據(jù)中心點(diǎn)做旋轉(zhuǎn)等龙。
2. 移動到要的位置
接著就是要移動处渣。依據(jù)跟原來的Table距離來看，
我們需要往左(+x方向)半個(gè)Table的長度然後往右半個(gè)Table的寬度(-x方向)
同理蛛砰，我們還需要向上半個(gè)(-y方向)半個(gè)Table的長度然後往下半個(gè)Table的寬度(+y方向)
3. 旋轉(zhuǎn)Cell
最後別忘了Cell因?yàn)楸恍D(zhuǎn)了，所以我們得把他轉(zhuǎn)回來黍衙，才能讓使用者看到正確的顯示泥畅。剛剛轉(zhuǎn)了-PI/2，現(xiàn)在我們讓他轉(zhuǎn)PI/2來矯正方向琅翻。
三位仁、程式碼實(shí)現(xiàn)(Swift)
說這麼多，直接來上Code最清楚方椎。
1. 旋轉(zhuǎn) 270度 or - PI/2 (UITableView)
self.transform = CGAffineTransform(rotationAngle: CGFloat(-Double.pi/2))
2. 移動到要的位置 (UITableView)
這邊要注意的是聂抢，因?yàn)槲覀冏隽诵D(zhuǎn)，所以顯示上面的長寬跟實(shí)際的長寬是顛倒的棠众。
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. 旋轉(zhuǎn)Cell (UITableViewCell)
self.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi/2)
完整程式碼連結(jié)
四琳疏、小結(jié)
有沒有覺得其實(shí)很簡單，不需要去處理UICollection的layout也是不錯(cuò)的呀!
