3DCardLayout – 立體卡片佈局

這次做個橫向移動的卡片佈局。


3DCardLayout

如上面的動畫顯示,卡片可以左右滑動,當滑動經過 x 軸中央時,卡片會向左後方或者右後方凹折過去。


CardCell

卡片的樣式,可以放一張圖片以及對應的文字。

資料通過 CardModel 封裝,在 cell 內部設定圓角、邊框顏色等,對外提供一個 loadContent 方法來加載內容。


Card3dFlowLayout

從 itemSize 以及 Inset 開始設定。

我們希望一個完整的畫面中只會出現一張卡片,而卡片的兩側要有邊距。

卡片的寬度由 collectionView.bounds 去掉兩邊的邊距。

一開始左邊的邊距通過 sectionInset 來的,而卡片之間的邊距通過 minimumLineSpacing 而來。

layoutAttributes

根據 collectionView 滑動的情況,改變 mainIndexPath / movingInIndexPath / difference / previousOffset 的值。

針對 mainIndexPath 和 movingInIndexPath 給予不同的 attributes

CATransform3D

卡片是通過 CATransform3D 變形的,而變形的方式是根據 collectionView 滑動的情況來改變的。

以畫面中心為標準,當卡片向左滑動的時候執行

當卡片向右滑動的之後執行

而變形的角度就根據卡片距離中心點移動的距離。


HomeViewController

讓 collectionView 使用我們自己的佈局樣式(Card3DFlowLayout)


Reference

  • 在 Github 上可以看到本文相關的 Source Code

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *