如何构建类似于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 时,集合视图的项目变为 1 列宽,然后如果值恢复为 0,则 collectionView 将恢复为 3 列设置。有没有办法做到这一点?
在UISegmentedControl
segments
之间切换时,您需要根据预期的 UI - 网格或列表更改collectionView
的layout
。
首先,创建一个像这样的enum LayoutType
,
enum LayoutType {
case list, grid
}
现在,在您的ViewController
中,创建一个最初设置为 .list
的 LayoutType
类型的属性layoutType
,即。
var layoutType = LayoutType.list
接下来,实现segmentedControl's
valueChanged
事件的@IBAction
。所以,到目前为止,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
方法。你一定已经这样做了。
现在要根据layoutType
更改layout
,您需要符合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
}
这就是你可以继续做这些事情的方式。如果您仍然遇到任何问题,请告诉我。