iOS Swift UICollectionView橫向分頁滾動，cell左右排版

情況

最近在做表情鍵盤時遇到一個問題，我用UICollectionView來佈局表情，使用橫向分頁滾動，但在最後一頁出現瞭如圖所示的情況

情況分析圖

是的，現在的item分佈就是這個鬼樣子

現在想要做的，就是將現在這個鬼樣子變成另外一種樣子，如圖

那怎麼辦？只好重新佈局item了

解決方案

我是自定了一個Layout(LXFChatEmotionCollectionLayout)，讓UICollectionView在建立的時候使用了它

在 LXFChatEmotionCollectionLayout.swift 中

新增一個屬性來儲存所有item的attributes

// 儲存所有item的attributes
fileprivate var attributesArr: [UICollectionViewLayoutAttributes] = []
複製程式碼

重新佈局

// MARK:- 重新佈局
override func prepare() {
    super.prepare()
    
    let itemWH: CGFloat = kScreenW / CGFloat(kEmotionCellNumberOfOneRow)
    
    // 設定itemSize
    itemSize = CGSize(width: itemWH, height: itemWH)
    minimumLineSpacing = 0
    minimumInteritemSpacing = 0
    scrollDirection = .horizontal
    
    // 設定collectionView屬性
    collectionView?.isPagingEnabled = true
    collectionView?.showsHorizontalScrollIndicator = false
    collectionView?.showsVerticalScrollIndicator = true
    let insertMargin = (collectionView!.bounds.height - 3 * itemWH) * 0.5
    collectionView?.contentInset = UIEdgeInsetsMake(insertMargin, 0, insertMargin, 0)
    
    
    /// 重點在這裡
    var page = 0
    let itemsCount = collectionView?.numberOfItems(inSection: 0) ?? 0
    for itemIndex in 0..<itemsCount {
        let indexPath = IndexPath(item: itemIndex, section: 0)
        let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
        
        page = itemIndex / (kEmotionCellNumberOfOneRow * kEmotionCellRow)
        // 通過一系列計算, 得到x, y值
        let x = itemSize.width * CGFloat(itemIndex % Int(kEmotionCellNumberOfOneRow)) + (CGFloat(page) * kScreenW)
        let y = itemSize.height * CGFloat((itemIndex - page * kEmotionCellRow * kEmotionCellNumberOfOneRow) / kEmotionCellNumberOfOneRow)
        
        attributes.frame = CGRect(x: x, y: y, width: itemSize.width, height: itemSize.height)
        // 把每一個新的屬性儲存起來
        attributesArr.append(attributes)
    }
}
複製程式碼

返回所有當前可見的Attributes

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    var rectAttributes: [UICollectionViewLayoutAttributes] = []
    _ = attributesArr.map({
        if rect.contains($0.frame) {
            rectAttributes.append($0)
        }
    })
    return rectAttributes
}
複製程式碼

大功告成

完整程式碼

import UIKit

let kEmotionCellNumberOfOneRow = 8
let kEmotionCellRow = 3

class LXFChatEmotionCollectionLayout: UICollectionViewFlowLayout {
    // 儲存所有item
    fileprivate var attributesArr: [UICollectionViewLayoutAttributes] = []
    
    // MARK:- 重新佈局
    override func prepare() {
        super.prepare()
        
        let itemWH: CGFloat = kScreenW / CGFloat(kEmotionCellNumberOfOneRow)
        
        // 設定itemSize
        itemSize = CGSize(width: itemWH, height: itemWH)
        minimumLineSpacing = 0
        minimumInteritemSpacing = 0
        scrollDirection = .horizontal
        
        // 設定collectionView屬性
        collectionView?.isPagingEnabled = true
        collectionView?.showsHorizontalScrollIndicator = false
        collectionView?.showsVerticalScrollIndicator = true
        let insertMargin = (collectionView!.bounds.height - 3 * itemWH) * 0.5
        collectionView?.contentInset = UIEdgeInsetsMake(insertMargin, 0, insertMargin, 0)
        
        var page = 0
        let itemsCount = collectionView?.numberOfItems(inSection: 0) ?? 0
        for itemIndex in 0..<itemsCount {
            let indexPath = IndexPath(item: itemIndex, section: 0)
            let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
            
            page = itemIndex / (kEmotionCellNumberOfOneRow * kEmotionCellRow)
            // 通過一系列計算, 得到x, y值
            let x = itemSize.width * CGFloat(itemIndex % Int(kEmotionCellNumberOfOneRow)) + (CGFloat(page) * kScreenW)
            let y = itemSize.height * CGFloat((itemIndex - page * kEmotionCellRow * kEmotionCellNumberOfOneRow) / kEmotionCellNumberOfOneRow)
            
            attributes.frame = CGRect(x: x, y: y, width: itemSize.width, height: itemSize.height)
            // 把每一個新的屬性儲存起來
            attributesArr.append(attributes)
        }
        
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var rectAttributes: [UICollectionViewLayoutAttributes] = []
        _ = attributesArr.map({
            if rect.contains($0.frame) {
                rectAttributes.append($0)
            }
        })
        return rectAttributes
    }
    
}
複製程式碼

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