Swift - 使用网格（UICollectionView）的自定义布局实现复杂页面

网格UICollectionView除了使用流布局，还可以使用自定义布局。实现自定义布局需要继承UICollectionViewLayout，同时还要重载下面的三个方法：

// 内容区域总大小，不是可见区域
override var collectionViewContentSize: CGSize {
}
 
// 所有单元格位置属性
override func layoutAttributesForElements(in rect: CGRect)
    -> [UICollectionViewLayoutAttributes]? {
}
 
// 这个方法返回每个单元格的位置和大小
override func layoutAttributesForItem(at indexPath: IndexPath)
    -> UICollectionViewLayoutAttributes? {
}

下面实现一个自定义布局的例子，单元格有大小两种。网格从上到下，先是左边一个大单元格右边两个小单元格，接着左边两个小单元格右边一个大单元格，依次同上循环排列。
效果图如下：

Simulator Screen Shot - iPhone SE (2nd generation) - 2020-06-28 at 16.29.08.png

自定义布局 CustomLayout.swift

import UIKit

class CustomLayout: UICollectionViewLayout {

    // 内容区域总大小，不是可见区域
    override var collectionViewContentSize: CGSize {
        // 宽度就是屏幕宽度减去左右边距
        let width = collectionView!.bounds.size.width - collectionView!.contentInset.left
            - collectionView!.contentInset.right
        // 一行三个，一个大的两个小的，
        let height = CGFloat((collectionView!.numberOfItems(inSection: 0) + 1) / 3)
            * (width / 3 * 2)
        return CGSize(width: width, height: height)
    }
    
    // 所有单元格位置属性
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        // 创建属性数组
        var attributesArray = [UICollectionViewLayoutAttributes]()
        // 获取单元格个数
        let itemCount = self.collectionView!.numberOfItems(inSection: 0)
        // 循环创建单元格的属性
        for i in 0..<itemCount {
            let indexPath = IndexPath(item: i, section: 0)
            let layoutAttributes = self.layoutAttributesForItem(at: indexPath)
            attributesArray.append(layoutAttributes!)
        }
        return attributesArray
    }
    
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        // 获取当前的布局属性
        let attribute = UICollectionViewLayoutAttributes(forCellWith: indexPath)
        
        // 单元格边长
        let largeCellSide = collectionViewContentSize.width / 3 * 2
        let smallCellSide = collectionViewContentSize.width / 3
        
        // 当前行数,每行显示3个图片，1大2小
        let line: Int = indexPath.item / 3
        // 当前y坐标的值
        let lineOriginY = CGFloat(line) * largeCellSide
        
        //右侧单元格X坐标，这里按左右对齐，所以中间空隙大
        // 大单元格在左
        let rightLargeX = collectionViewContentSize.width - largeCellSide
        // 大单元格在右
        let rightSmallX = collectionViewContentSize.width - smallCellSide
        
        // 每行2个图片，2行循环一次，一共6种位置
        if (indexPath.item % 6 == 0) {
            attribute.frame = CGRect(x:0, y:lineOriginY, width:largeCellSide,
                                     height:largeCellSide)
        } else if (indexPath.item % 6 == 1) {
            attribute.frame = CGRect(x:rightSmallX, y:lineOriginY, width:smallCellSide,
                                     height:smallCellSide)
        } else if (indexPath.item % 6 == 2) {
            attribute.frame = CGRect(x:rightSmallX,
                                     y:lineOriginY + smallCellSide,
                                     width:smallCellSide, height:smallCellSide)
        } else if (indexPath.item % 6 == 3) {
            attribute.frame = CGRect(x:0, y:lineOriginY, width:smallCellSide,
                                     height:smallCellSide )
        } else if (indexPath.item % 6 == 4) {
            attribute.frame = CGRect(x:0,
                                     y:lineOriginY + smallCellSide,
                                     width:smallCellSide, height:smallCellSide)
        } else if (indexPath.item % 6 == 5) {
            attribute.frame = CGRect(x:rightLargeX, y:lineOriginY,
                                     width:largeCellSide,
                                     height:largeCellSide)
        }
         
        return attribute
        
    }
    
}
/*
     //如果有页眉、页脚或者背景，可以用下面的方法实现更多效果
     func layoutAttributesForSupplementaryViewOfKind(elementKind: String!,
     atIndexPath indexPath: NSIndexPath!) -> UICollectionViewLayoutAttributes!
     func layoutAttributesForDecorationViewOfKind(elementKind: String!,
     atIndexPath indexPath: NSIndexPath!) -> UICollectionViewLayoutAttributes!
     */

主页面 ViewController.swift

import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource
{

    var collectionView: UICollectionView!
    
    //课程名称和图片，每一门课程用字典来表示
    let dateSource = [
        ["name":"Swift","pic":"swift.png"],
        ["name":"Xcode","pic":"xcode.png"],
        ["name":"Java","pic":"java.png"],
        ["name":"PHP","pic":"php.png"],
        ["name":"JS","pic":"js.png"],
        ["name":"React","pic":"react.png"],
        ["name":"Ruby","pic":"ruby.png"],
        ["name":"HTML","pic":"html.png"],
        ["name":"C#","pic":"c#.png"]
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        /// 设置UI
        setupUI()
    }

    /// 设置UI
    func setupUI()
    {
        let layout = CustomLayout()
        let frame = CGRect(x:0, y:20, width: view.bounds.size.width,
                           height:view.bounds.height-20)
        
        collectionView = UICollectionView(frame: frame, collectionViewLayout: layout)
        collectionView.register(collectionViewCell.self, forCellWithReuseIdentifier: "collectionViewCell")
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.backgroundColor = UIColor.white
        view.addSubview(collectionView)
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return dateSource.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionViewCell", for: indexPath) as! collectionViewCell
        let data = dateSource[indexPath.row]
        cell.imageView.image = UIImage(named: data["pic"] ?? "");
        cell.titleLabel.text = data["name"] ?? ""
        return cell
    }
}

class collectionViewCell: UICollectionViewCell
{
    var titleLabel: UILabel!
    var imageView: UIImageView!
    
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        imageView = UIImageView()
        imageView.frame = CGRect(x: 0, y: 0, width: self.bounds.size.width, height: self.bounds.size.height)
        imageView.contentMode = .scaleAspectFit
        
        titleLabel = UILabel(frame: CGRect(x: 0, y: 0, width: self.bounds.size.width, height: 20))
        titleLabel.textAlignment = .center
        titleLabel.textAlignment = .center
        titleLabel.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.2)
        
        addSubview(imageView)
        addSubview(titleLabel)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

原文出自：www.hangge.com 转载请保留原文链接：https://www.hangge.com/blog/cache/detail_591.html