iOS Swift UICollectionView橫向分頁的問題

LinXunFeng發表於2017-12-14
iOSSwiftUIView

UICollectionView橫向分頁的問題

情況

直接看圖

滾前
滾後
已經設定collectionView的isPagingEnabled為true了，可是出現了這種情況，原因就是collectionView的contentSize不夠。

<UICollectionView: 0x7fc565076000; 
frame = (0 0; 375 197); 
clipsToBounds = YES; 
gestureRecognizers = <NSArray: 0x6180000557e0>; 
layer = <CALayer: 0x61000022a5a0>; 
contentOffset: {187.5, 0}; 
contentSize: {562.5, 192.25}
>
複製程式碼

解決方案

有兩種方式可以解決，資料只有11個，要分兩頁需要16個，那我們可以直接新增資料到16個，然後在dataSource中返回cell時進行判斷及處理即可。不過對於現在來說太小題大做了，我選第二種方式~

直接修改contentSize

我自定義了一個繼承於UICollectionViewFlowLayout的Layout(LXFChatMoreCollectionLayout)，讓UICollectionView在建立的時候使用了它

在 LXFChatMoreCollectionLayout.swift 中我們需要重寫父類的collectionViewContentSize，將contentSize取出來修改為我們自己建立的newSize就可以了程式碼如下

override var collectionViewContentSize: CGSize {
    let size: CGSize = super.collectionViewContentSize
    let collectionViewWidth: CGFloat = self.collectionView!.frame.size.width
    let nbOfScreen: Int = Int(ceil(size.width / collectionViewWidth))
    let newSize: CGSize = CGSize(width: collectionViewWidth * CGFloat(nbOfScreen), height: size.height)
    return newSize
}
複製程式碼

注：ceil函式的作用是求不小於給定實數的最小整數。ceil(2)=ceil(1.2)=cei(1.5)=2.00

效果

iOS Swift UICollectionView橫向分頁的問題

至於如何讓item水平佈局，請參考《iOS - Swift UICollectionView橫向分頁滾動，cell左右排版》

附上相關專案：Swift 3.0 高仿微信

相關文章