UICollectionView動態自定義佈局

我想創建一個UICollectionView作爲我已附加的圖像的佈局類型。我對如何實現這種佈局有點困惑。UICollectionView動態自定義佈局

做了一些Google搜索後，似乎我需要編寫一個自定義UICollectionViewFlowLayout，但我似乎無法找到任何佈局的例子，每個項目有不同的節數。

如果你看樣板第一個項目有一個部分。圖像是風景，但中間項目有2個部分與2個人像圖像。

我看着錯誤的東西？有人能指引我正確的方向嗎？

Layout Mockup

來源

2015-04-28 Scott

你可以做到這一點使用UICollectionViewDelegateFlowLayout，無需子類。

下面是一個例子：

import UIKit 

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout { 

    @IBOutlet weak var collectionView: UICollectionView! 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     collectionView.delegate = self 
     collectionView.dataSource = self 
    } 

    // MARK: - UICollectionViewDataSource 

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int { 
     return 1 
    } 

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
     return 10 
    } 

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { 
     let cell = collectionView.dequeueReusableCellWithReuseIdentifier("TestCollectionViewCell", forIndexPath: indexPath) as! UICollectionViewCell 
     if indexPath.item % 3 == 0 { 
      cell.backgroundColor = UIColor.redColor() 
     } else { 
      cell.backgroundColor = UIColor.greenColor() 
     } 
     return cell 
    } 

    // MARK: - UICollectionViewDelegateFlowLayout 

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { 
     let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout 
     if indexPath.item % 3 == 0 { 
      let cellWidth = (CGRectGetWidth(collectionView.frame) - (flowLayout.sectionInset.left + flowLayout.sectionInset.right)) 
      return CGSize(width: cellWidth, height: cellWidth/2) 
     } else { 
      let cellWidth = (CGRectGetWidth(collectionView.frame) - (flowLayout.sectionInset.left + flowLayout.sectionInset.right) - flowLayout.minimumInteritemSpacing)/2 
      return CGSize(width: cellWidth, height: cellWidth) 
     } 
    } 

}

來源

2015-04-29 02:10:33

我喜歡雅各Howcroft的答案，而且我發現UICollectionViewDelegateFlowLayout方法還有待改進：

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { 

    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout 

    var numberOfCellsPerLine = 0 

    if indexPath.item % 3 == 0 { 
     numberOfCellsPerLine = 1 
    } else { 
     numberOfCellsPerLine = 2 
    } 

    // Generic cell width calculation 
    let cellWidth = (collectionView.bounds.width - (flowLayout.sectionInset.left + flowLayout.sectionInset.right) 
     - flowLayout.minimumInteritemSpacing * CGFloat(numberOfCellsPerLine - 1))/CGFloat(numberOfCellsPerLine) 
    return CGSize(width: cellWidth, height: 100) 

}

這使得更加明顯了多少，每行的細胞，你希望取決於indexPath（您可以根據您的要求使用「if/else」或開關）。

此外，它使這個代碼超級可重用，因爲您始終必須考慮相同的元素（section inset，minimumInterItemSpacing）。

來源

2016-08-31 11:00:21

UICollectionView動態自定義佈局

回答

相關問題