Resizable/Dynamic UICollectionView 宽度(不是单元格动态宽度!!)
Resizable/Dynamic UICollectionView width (not a cell dynamic width!!)
我有一个带绿色背景的水平 UICollectionView(附图),我想根据可用单元格的数量调整其宽度。之后,按钮需要附加到 collection views trailing anchor
例如:我在 collection 视图中有一张照片,其视图宽度为 100。用户按下按钮,将照片添加到 collection,并且宽度增加到 200。因此 addImageButton已向右移动。
它应该看起来像这样:
resizable collection view
我目前的代码是这样的:
class ImagesViewController: UIViewController {
lazy var collectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.minimumLineSpacing = 8
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.register(ImagesCollectionViewCell.self, forCellWithReuseIdentifier: ImagesCollectionViewCell.reuseIdentifier)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.translatesAutoresizingMaskIntoConstraints = false
return collectionView
}()
lazy var addImageButton: UIButton = {
let btn = UIButton()
btn.layer.cornerRadius = 8
btn.clipsToBounds = true
btn.contentMode = .scaleAspectFill
btn.backgroundColor = Colors.tintDefault
btn.setImage(UIImage(named: "addImage"), for: .normal)
btn.translatesAutoresizingMaskIntoConstraints = false
btn.addTarget(self, action: #selector(handleAddImage), for: .touchUpInside)
return btn
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = Colors.backgroundPrimary
[collectionView, addImageButton].forEach { view.addSubview ([=11=]) }
collectionView.anchor(top: top.bottomAnchor, leading: view.leadingAnchor, paddingTop: 20, width: 272, height: 80)
collectionView.backgroundColor = .green
addImageButton.centerYAnchor.constraint(equalTo: collectionView.centerYAnchor).isActive = true
addImageButton.anchor(leading: collectionView.trailingAnchor, paddingLeft: 32, width: 24, height: 24)
}
}
extension ImagesViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
// Some code here... (numberOfItemsInSection, cellForItemAt, etc)
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 80, height: 80)
}
}
请仔细阅读问题!
动态collection需要视图宽度,而不是单元格宽度!
请帮我设置 collection 视图的动态宽度
尝试以下操作:
- 像这样在
UIViewController
子类中声明一个变量。
private var contentSizeObservation: NSKeyValueObservation?
- 在
viewDidLoad()
内或设置 myCollectionView
时,开始观察 contentSize 的变化。
contentSizeObservation = myCollectionView.observe(\.contentSize, options: .new, changeHandler: { [weak self] (cv, _) in
guard let self = self else { return }
self.myCollectionViewWidthConstraint.constant = cv.contentSize.width
})
- 不要忘记在
deinit
调用 - 中清理它
deinit {
contentSizeObservation?.invalidate()
}
此方法将确保您的 myCollectionView
宽度始终与其内容一样大。
我有一个带绿色背景的水平 UICollectionView(附图),我想根据可用单元格的数量调整其宽度。之后,按钮需要附加到 collection views trailing anchor
例如:我在 collection 视图中有一张照片,其视图宽度为 100。用户按下按钮,将照片添加到 collection,并且宽度增加到 200。因此 addImageButton已向右移动。
它应该看起来像这样:
resizable collection view
我目前的代码是这样的:
class ImagesViewController: UIViewController {
lazy var collectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.minimumLineSpacing = 8
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.register(ImagesCollectionViewCell.self, forCellWithReuseIdentifier: ImagesCollectionViewCell.reuseIdentifier)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.translatesAutoresizingMaskIntoConstraints = false
return collectionView
}()
lazy var addImageButton: UIButton = {
let btn = UIButton()
btn.layer.cornerRadius = 8
btn.clipsToBounds = true
btn.contentMode = .scaleAspectFill
btn.backgroundColor = Colors.tintDefault
btn.setImage(UIImage(named: "addImage"), for: .normal)
btn.translatesAutoresizingMaskIntoConstraints = false
btn.addTarget(self, action: #selector(handleAddImage), for: .touchUpInside)
return btn
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = Colors.backgroundPrimary
[collectionView, addImageButton].forEach { view.addSubview ([=11=]) }
collectionView.anchor(top: top.bottomAnchor, leading: view.leadingAnchor, paddingTop: 20, width: 272, height: 80)
collectionView.backgroundColor = .green
addImageButton.centerYAnchor.constraint(equalTo: collectionView.centerYAnchor).isActive = true
addImageButton.anchor(leading: collectionView.trailingAnchor, paddingLeft: 32, width: 24, height: 24)
}
}
extension ImagesViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
// Some code here... (numberOfItemsInSection, cellForItemAt, etc)
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 80, height: 80)
}
}
请仔细阅读问题!
动态collection需要视图宽度,而不是单元格宽度!
请帮我设置 collection 视图的动态宽度
尝试以下操作:
- 像这样在
UIViewController
子类中声明一个变量。
private var contentSizeObservation: NSKeyValueObservation?
- 在
viewDidLoad()
内或设置myCollectionView
时,开始观察 contentSize 的变化。
contentSizeObservation = myCollectionView.observe(\.contentSize, options: .new, changeHandler: { [weak self] (cv, _) in
guard let self = self else { return }
self.myCollectionViewWidthConstraint.constant = cv.contentSize.width
})
- 不要忘记在
deinit
调用 - 中清理它
deinit {
contentSizeObservation?.invalidate()
}
此方法将确保您的 myCollectionView
宽度始终与其内容一样大。