我会帮助你,你问得非常好,所以这里有一个例子说明它是如何完成的。我不会回答问题 2 和 3,因为它与问题 1 基本相同,但在协议上有一些变化。所以我会尽力解释你的第一个问题:
让我从您可以下载的完整示例开始:https ://github.com/galots/CollectionView
现在解释:
您有一个 viewController 可以创建前几个单元格,这些是您作为第一张图片提供的 4 个自定义单元格。我想这对你来说很清楚:
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
lazy var collectionView : UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.backgroundColor = .white
collectionView.dataSource = self
collectionView.delegate = self
return collectionView
}()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.view.addSubview(collectionView)
collectionView.anchor(top: self.view.safeAreaLayoutGuide.topAnchor, leading: self.view.leadingAnchor, bottom: self.view.bottomAnchor, trailing: self.view.trailingAnchor)
collectionView.register(TopCell.self, forCellWithReuseIdentifier: "topCell")
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "topCell", for: indexPath) as! TopCell
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: self.collectionView.frame.size.width, height: self.collectionView.frame.size.height)
}
}
现在,在这些单元格中,您还有其他同时显示不同单元格的 collectionView。所以,到目前为止一切顺利。BaseCell 只是我为避免一直初始化单元格而创建的一个类。
class BaseCell : UICollectionViewCell {
override init(frame: CGRect) {
super.init(frame: frame)
setupViews()
}
func setupViews() { }
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
class TopCell: BaseCell, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, ButtonCellDelegate {
var model = "Text"
lazy var collectionView : UICollectionView = {
let layout = UICollectionViewFlowLayout()
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.backgroundColor = .white
collectionView.dataSource = self
collectionView.delegate = self
return collectionView
}()
override func setupViews() {
super.setupViews()
self.backgroundColor = .green
self.addSubview(collectionView)
collectionView.anchor(top: self.topAnchor, leading: self.leadingAnchor, bottom: self.bottomAnchor, trailing: self.trailingAnchor)
collectionView.register(ButtonsCell.self, forCellWithReuseIdentifier: "buttonsCell")
collectionView.register(InnerCollectionViewCell.self, forCellWithReuseIdentifier: "cvCell")
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 3
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if indexPath.item == 0 {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "buttonsCell", for: indexPath) as! ButtonsCell
cell.buttonCellDelegate = self
return cell
}
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cvCell", for: indexPath) as! InnerCollectionViewCell
cell.model = self.model
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: self.frame.width, height: 150)
}
func didPressButton(sender: String) {
switch sender {
case "buttonOne":
self.model = "Text"
self.collectionView.reloadData()
case "buttonTwo":
self.model = "New Text"
self.collectionView.reloadData()
default:
break
}
}
}
现在,这里是你要做大部分事情的地方。
// Protocol for buttons
protocol ButtonCellDelegate : class { func didPressButton (sender: String) }
// Buttons Cell
class ButtonsCell : BaseCell {
weak var buttonCellDelegate : ButtonCellDelegate?
let buttonOne : UIButton = {
let button = UIButton(frame: .zero)
button.setTitle("Button 1", for: .normal)
button.setTitleColor(.black, for: .normal)
return button
}()
let buttonTwo : UIButton = {
let button = UIButton(frame: .zero)
button.setTitle("Button 2", for: .normal)
button.setTitleColor(.black, for: .normal)
return button
}()
override func setupViews() {
super.setupViews()
self.addSubview(buttonOne)
buttonOne.anchor(top: self.topAnchor, leading: self.leadingAnchor, bottom: self.bottomAnchor, trailing: nil, size: .init(width: self.frame.width / 2, height: 0))
buttonOne.addTarget(self, action: #selector(buttonOnePressed), for: .touchUpInside)
self.addSubview(buttonTwo)
buttonTwo.anchor(top: self.topAnchor, leading: buttonOne.trailingAnchor, bottom: self.bottomAnchor, trailing: self.trailingAnchor)
buttonTwo.addTarget(self, action: #selector(buttonTwoPressed), for: .touchUpInside)
}
@objc func buttonTwoPressed (sender: UIButton) {
self.buttonCellDelegate?.didPressButton(sender: "buttonTwo")
}
@objc func buttonOnePressed (sender: UIButton) {
self.buttonCellDelegate?.didPressButton(sender: "buttonOne")
}
}
// Mark
class InnerCollectionViewCell : BaseCell, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
var model : String? {
didSet {
self.collectionView.reloadData()
}
}
lazy var collectionView : UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.backgroundColor = .red
collectionView.dataSource = self
collectionView.delegate = self
return collectionView
}()
override func setupViews() {
super.setupViews()
self.addSubview(collectionView)
collectionView.anchor(top: self.topAnchor, leading: self.leadingAnchor, bottom: self.bottomAnchor, trailing: self.trailingAnchor)
collectionView.register(InnerCollectionViewSubCell.self, forCellWithReuseIdentifier: "innerCell")
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 3
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "innerCell", for: indexPath) as! InnerCollectionViewSubCell
cell.model = self.model
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 100, height: 100)
}
}
// Mark
class InnerCollectionViewSubCell : BaseCell {
var model : String? {
didSet { label.text = model }
}
let label : UILabel = {
let label = UILabel(frame: .zero)
label.textColor = .black
label.textAlignment = .center
return label
}()
override func setupViews() {
super.setupViews()
self.addSubview(label)
label.anchor(top: self.topAnchor, leading: self.leadingAnchor, bottom: self.bottomAnchor, trailing: self.trailingAnchor)
}
}
// Extensions
extension UIView {
func anchor(top: NSLayoutYAxisAnchor?, leading: NSLayoutXAxisAnchor?, bottom: NSLayoutYAxisAnchor?, trailing: NSLayoutXAxisAnchor?, padding: UIEdgeInsets = .zero, size: CGSize = .zero) {
translatesAutoresizingMaskIntoConstraints = false
if let top = top { topAnchor.constraint(equalTo: top, constant: padding.top).isActive = true }
if let leading = leading { leadingAnchor.constraint(equalTo: leading, constant: padding.left).isActive = true }
if let bottom = bottom { bottomAnchor.constraint(equalTo: bottom, constant: -padding.bottom).isActive = true }
if let trailing = trailing { trailingAnchor.constraint(equalTo: trailing, constant: -padding.right).isActive = true }
if size.width != 0 { widthAnchor.constraint(equalToConstant: size.width).isActive = true }
if size.height != 0 { heightAnchor.constraint(equalToConstant: size.height).isActive = true }
}
}
ButtonsCell 有一个协议,可以由顶部单元格遵守以更新其他 collectionViewCells 的内容。每当在buttonsCell中按下一个按钮时,就会调用委托并var model
更新,这个模型也会传播到内部单元格reloadData()
,因为在topCellcellForItem
方法中我将innerCells的模型设置为与顶部细胞模型。didSet
在内部单元格中只是充当观察者,因此每当模型更新时,单元格的 UI 也应该更新。
现在,对于问题 2 和 3,我想如果你看一下这个例子,它基本上是相同的委托实现。您只需对协议函数进行一些更改以添加您需要的功能,您也可以在其他地方调用委托,例如在didSelectItem
内部 collectionViews 的方法中。
希望这可以帮助。