UICollectionView水平滾動

Question

我有一個水平滾動UICollectionView。這裏是我的collectionView：

fileprivate(set) lazy var collectionView: UICollectionView = { 
     let width = UIScreen.main.bounds.width.multiplied(by: 0.9) 
     let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout() 
     layout.itemSize = CGSize(width: width, height: 50) 

     layout.sectionInset = UIEdgeInsets(top: 20, left: 20, bottom: 10, right: 20) 
     layout.scrollDirection = .horizontal 
     layout.minimumLineSpacing = 20 

     let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: self.frame.width, height: 50), collectionViewLayout: layout) 
     collectionView.translatesAutoresizingMaskIntoConstraints = false 
     collectionView.backgroundColor = .red 
     collectionView.isPagingEnabled = true 
     return collectionView 
    }() 

，它看起來像：

正如你看到的我有collectionView.isPagingEnabled = true的代碼，因爲我希望頁面效果。那麼，我想做到的，是讓項目看起來像在其他每一頁上面（20間隔上左和右）的圖片，但到目前爲止，我得到：

任何想法/提示如何達到理想的行爲？

Answer 1

下面是我在測試項目中使用的UICollectionViewDelegateFlowLayout以實現您想要的功能。

func collectionView(_ collectionView: UICollectionView, 
        layout collectionViewLayout: UICollectionViewLayout, 
        sizeForItemAt indexPath: IndexPath) -> CGSize { 
    return CGSize(width: UIScreen.main.bounds.width.multiplied(by: 0.9), height: 50.0) 
} 

// item spacing = vertical spacing in horizontal flow 
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat { 
    return (UIScreen.main.bounds.width.multiplied(by: 0.1)) 
} 

// line spacing = horizontal spacing in horizontal flow 
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat { 
    return (UIScreen.main.bounds.width.multiplied(by: 0.1)) 
} 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets { 
    return UIEdgeInsets(top: 0, left: (UIScreen.main.bounds.width.multiplied(by: 0.1)/2.0), bottom: 0, right: (UIScreen.main.bounds.width.multiplied(by: 0.1)/2.0)) 
} 

與您的代碼就好像在說：

fileprivate(set) lazy var collectionView: UICollectionView = { 
    let width = UIScreen.main.bounds.width.multiplied(by: 0.9) 
    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout() 
    layout.itemSize = CGSize(width: width, height: 50) 

    layout.sectionInset = UIEdgeInsets(top: 20, left: UIScreen.main.bounds.width.multiplied(by: 0.1)/2.0, bottom: 10, right: UIScreen.main.bounds.width.multiplied(by: 0.1)/2.0) 
    layout.scrollDirection = .horizontal 
    layout.minimumLineSpacing = UIScreen.main.bounds.width.multiplied(by: 0.1) 
    layout.minimumInteritemSpacing = UIScreen.main.bounds.width.multiplied(by: 0.1) // or any value you want 

    let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: self.frame.width, height: 50), collectionViewLayout: layout) 
    collectionView.translatesAutoresizingMaskIntoConstraints = false 
    collectionView.backgroundColor = .red 
    collectionView.isPagingEnabled = true 
    return collectionView 
}()