swift - 如何使用分段控制动态更改 collectionView 项目的大小（如 instagram）

Question

如何构建类似于 Instagram 的 UICollectionView？我已经创建了三列之一：

let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    let width = (view.frame.width/3)-2

    myCollectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
    layout.sectionInset = UIEdgeInsets(top: 49, left: 1, bottom: 1.5, right: 1)
    layout.itemSize = CGSize(width: width, height: width)
    layout.minimumInteritemSpacing = 1
    layout.minimumLineSpacing = 1

    myCollectionView?.dataSource = self
    myCollectionView?.delegate = self
    myCollectionView?.register(PhotoGalleryCell.self, forCellWithReuseIdentifier: cellid)
    myCollectionView?.backgroundColor = .white
    self.view.addSubview(myCollectionView!)

    myCollectionView!.addSubview(segmentedControl)
    segmentedControl.topAnchor.constraint(equalTo: myCollectionView!.topAnchor, constant: 12).isActive = true
    segmentedControl.centerXAnchor.constraint(equalTo: myCollectionView!.centerXAnchor).isActive = true
    segmentedControl.heightAnchor.constraint(equalToConstant: 25).isActive = true
    segmentedControl.widthAnchor.constraint(equalTo: myCollectionView!.widthAnchor, constant: -24).isActive = true

但是当 selectedControl 的值变为 1 时，我希望 Collection 视图的项目变为 1 列宽，然后如果值变回 0，则 collectionView 会变回 3 列设置。有没有办法做到这一点？

Answer 1

您需要根据预期的 UI- grid 或列表layout来更改的 在之间切换时。collectionViewsegmentsUISegmentedControl

首先，创建一个enum LayoutTypelike，

enum LayoutType {
    case list, grid
}

现在，在您的 中ViewController，创建一个最初设置为layoutType的类型的属性，即LayoutType.list

var layoutType = LayoutType.list

Next, implement the @IBAction for segmentedControl's valueChanged event. So, till now the ViewController looks like.

class VC: UIViewController, UICollectionViewDelegateFlowLayout {
    @IBOutlet weak var collectionView: UICollectionView!
    var layoutType = LayoutType.list

    @IBAction func onChange(_ sender: UISegmentedControl) {
        if sender.selectedSegmentIndex == 0 {
            layoutType = .list
        } else {
            layoutType = .grid
        }
        collectionView.reloadData()
    }
}

Now implement the UICollectionViewDataSource methods as required. You must've done that already.

Now to change the layout based on the layoutType, you need to conform to UICollectionViewDelegateFlowLayout protocol and implement the below methods,

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    switch layoutType {
    case .list:
        return CGSize(width: collectionView.bounds.width, height: 50)
    case .grid:
        return CGSize(width: (collectionView.bounds.width - 20) / 3, height: 50)
    }
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 10
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 10
}

This is how you can proceed with the things. Let me know in case you still face any issue.