swift - 如何使用分段控件动态更改collectionView项的大小(如instagram)

如何建立类似于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列设置。
有没有办法做到这一点？

最佳答案

在layout的collectionView之间切换时，需要根据预期的UI（网格或列表）更改segments的UISegmentedControl。

首先，创建一个enum LayoutType

enum LayoutType {
    case list, grid
}

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

var layoutType = LayoutType.list

接下来，为@IBAction segmentedControl's事件实现valueChanged。因此，到目前为止，ViewController看起来像。

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()
    }
}

现在，根据需要实现UICollectionViewDataSource方法。您一定已经做到了。

现在要基于layout更改layoutType，您需要遵循UICollectionViewDelegateFlowLayout协议并实现以下方法，

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
}

这是您可以继续进行的方式。如果您仍然遇到任何问题，请告诉我。

关于swift - 如何使用分段控件动态更改collectionView项的大小(如instagram)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57207062/