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 列设置。有没有办法做到这一点?
解决方案
您需要根据预期的 UI- grid 或列表layout
来更改的 在之间切换时。collectionView
segments
UISegmentedControl
首先,创建一个enum LayoutType
like,
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.
推荐阅读
- r - 如何在 R 中的数据操作之前和之后使用 ggplot 为 ggarrange 制作“持久”图
- sql - 从 PLC 到 PC 写入 SQL 表时数据损坏
- java - 引用是如何在 Java 中存储的
- sql - 无法通过完全外连接获取空值
- git - 使用git进行持续集成的工作流程是什么
- php - php + 身份服务器,check_session
- delegates - watchOS 中的扩展运行时会话在首次运行后停止工作
- firebase - 如何访问另一个集合中的集合?[颤振] [火力基地]
- flutter - 在 Flutter 中是否有可以在按下键盘上的 Return 按钮时捕获的命令?
- material-ui - `get` 和相对定位的赛普拉斯滚动行为