swift - 如何在 Ios 中为 UICollectionView 设置自定义布局

Question

我知道如何在 UICollectionView 中显示 Collection 单元格。但我想使用自定义布局来显示单元格。

我的收藏应该有两列，其中单元格的宽度是固定的，但单元格的高度可能会根据标签内容的大小而变化。

但是我不知道该怎么做。我想显示如下图所示的单元格集合

我想快速实现它。

Answer 1

以下是自定义布局的代码。在此布局中，单元格宽度是 Collection View 的一半，高度是每个单元格特定的。要为每个单元格设置高度，您必须执行“func heightFor(index : Int) -> CGFloat”。要实现此布局，请执行以下步骤。

1. 创建以下协议(protocol):

   //This protocol has to be confirmed in your controller.
   
     protocol CustomLayoutDelegate {
         //This method accept the height for your cell.
         func heightFor(index : Int) -> CGFloat
      }
   

2. 创建子类“UICollectionViewFlowLayout”:

   class CustomLayout: UICollectionViewFlowLayout {
      //Variables
      var layoutDelegate : CustomLayoutDelegate?
      var leftY = CGFloat(0)
      var rightY = CGFloat(0)
      var cache = [UICollectionViewLayoutAttributes]()
   
   //This method sets the frame (attributes) for every cell and store in chache.
   override func prepare() {
       guard  cache.isEmpty == true, let collectionView = collectionView else{
           return
       }
       let verticalSpacing = CGFloat(10)
       let horizontalSpacing = CGFloat(10)
       let margin = CGFloat(10)
       leftY = margin
       rightY = margin
       for item in 0..<collectionView.numberOfItems(inSection: 0){
           var frame = CGRect.zero
           let cellHeight = self.layoutDelegate!.heightFor(index: item)
           frame.size.height = cellHeight
           frame.size.width = (collectionView.frame.size.width - 2 * margin) / 2 - horizontalSpacing/2
           if item%2 == 0{
               frame.origin.x = margin
               frame.origin.y = leftY
               leftY += cellHeight + verticalSpacing
           }else{
               frame.origin.x = (collectionView.frame.size.width - 2 * margin) / 2 +  ((4 * horizontalSpacing) / 3)
               frame.origin.y = rightY
               rightY += cellHeight + verticalSpacing
           }
   
           let indexPath = IndexPath(item: item, section: 0)
           let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
           attributes.frame = frame
           cache.append(attributes)
       }
   
   }
   
   // This method returns the array of
   override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
       var visibleLayoutAttributes = [UICollectionViewLayoutAttributes]()
       // Loop through the cache and look for items in the rect
       for attributes in cache {
           if attributes.frame.intersects(rect) {
               visibleLayoutAttributes.append(attributes)
           }
       }
       return visibleLayoutAttributes
   }
   
   //This method sets the collection view's content size.
   override var collectionViewContentSize: CGSize{
       return CGSize.init(width: collectionView!.frame.size.width, height: max(leftY, rightY))
   }
   

3. 现在，在您的 View Controller 中编写以下代码:

   导入 UIKitViewController 类:UIViewController、UICollectionViewDataSource、CustomLayoutDelegate {

   @IBOutlet weak var collectionView: UICollectionView!
   
   override func viewDidLoad() {
       super.viewDidLoad()
   
       //Register the cell for collection view
       collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
   
       //Assign the delegate
       if let layout = collectionView.collectionViewLayout as? CustomLayout{
           layout.layoutDelegate = self
       }
   }
   
   //CustomLayoutDelegate method
   func heightFor(index: Int) -> CGFloat {
   
       //Implement your own logic to return the height for specific cell
       return CGFloat(max(1, index) * 50)
   }
   
   // UICollectionViewDataSource methods
   func numberOfSections(in collectionView: UICollectionView) -> Int {
       return 1
   }
   func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       return 10
   }
   func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
       let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
       cell.backgroundColor = UIColor.red
       return cell
   }
   }
   

4. 现在在你的 xib 上，添加 Collection View 并连接到

   @IBOutlate weak var collectionView: UICollectionView!

   并将我们的“CustomLayout”类分配给集合的布局:

现在，运行该项目后，您将看到以下输出。确保 Collection View 单元格具有不同的颜色，仅用于识别。