在聊完幾次理論後，今天給大家帶來一篇關於UI的文章，看標題大家已經知道了，沒錯，就是大家所熟悉的UICollectionView。說起github上赫赫有名的卡片展示視圖iCarousel，大多數iOS開發人員或多或少都有聽過或使用過，其豐富的展示樣式經常出現在某些APP的一級路徑，其實，蘋果公司針對卡片樣式祭出了自己的解決方案——UICollectionView

廢話少說，先上干貨HJCarouselDemo

看完GIF展示的效果，各位是否已經蠢蠢欲動，這不就是iCarousel視圖嘛，沒錯！但是今天我們采用UICollectionView實現這些效果。平常開發中，最熟悉的莫過於UICollectionViewFlowLayout，其實UICollectionViewFlowLayout相當於蘋果提前定義的一個特殊UICollectionViewLayout。

先看看UICollectionViewLayout類的官方文檔（好吧，原諒我半天打不開蘋果網址，最近敏感期，各種和諧)，還是直接看代碼吧，總之，自定義UICollectionViewLayout，必須實現以下幾個函數

• collectionViewContentSize

• layoutAttributesForElementsInRect:

• layoutAttributesForItemAtIndexPath:

• layoutAttributesForSupplementaryViewOfKind:atIndexPath: (if your layout supports supplementary views)

• layoutAttributesForDecorationViewOfKind:atIndexPath: (if your layout supports decoration views)

• shouldInvalidateLayoutForBoundsChange:

看函數名就可以知道各個函數實現的功能：第一個定位View的contentSize，第二個函數定義屏幕展示的范圍和數量，第三個定義cell的布局，第四個和第五個是可選項，定義SupplementaryView以及DecorationView的布局，最後一個定義是否重新布局

UICollectionViewLayout的精髓在於你可以定義每個cell的UICollectionViewLayoutAttributes屬性，包括

@property (nonatomic) CGRect frame;
@property (nonatomic) CGPoint center;
@property (nonatomic) CGSize size;
@property (nonatomic) CATransform3D transform3D;
@property (nonatomic) CGRect bounds NS_AVAILABLE_IOS(7_0);
@property (nonatomic) CGAffineTransform transform NS_AVAILABLE_IOS(7_0);
@property (nonatomic) CGFloat alpha;
@property (nonatomic) NSInteger zIndex; // default is 0

通過定義transform3D屬性可以實現視圖的旋轉、放大以及透視等效果，具體實現參考HJCarouselDemo

在這裡格外需要強調的一點，那就是page屬性，當滑動停止時，希望UICollectionView滑動到卡片的中心，而不是任意位置

UICollectionViewLayout定義函數

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity

其中 ，proposedContentOffset為系統期望滑動到的位置，velocity為加速度，你可以通過這兩個參數以及當前所在的位置計算出你希望它滑動到的位置，具體算法根據需求的不同來實現

有用過我們天天動聽iOS客戶端或者QQ音樂的朋友，可能都非常熟悉這個動畫效果，天天動聽的推薦頁面以及QQ音樂的MV界面，是不是就這樣，嘿嘿！重要的事說三遍，趕快下載天天動聽客戶端，跟我們一起搖擺起來~~~

番外篇

說完View，接下來聊聊Controller，談什麼了？談談它們之間的關系，最近業界對設計模式的話題討論比較熱烈，MVC、MVVM、MVP等等，不知道各位在實際開發中一般使用什麼樣的設計模式，有什麼好的想法都可以在下面留言，下期再見！