我正在尝试使用UICollectionViewCompositionalLayout
我想要一个全宽的项目部分,然后是一个以这种方式包装的部分
基本人力资源、财务福利和员工敬业度都将是一个部分中的一个单元格。请忽略其他 UI 元素。
此部分还需要支持多行,因为可能有 1 到 15 个标签。
我已经尝试过了,但无法使用每个项目的 来创建包装效果,没有每个项目的宽度intrinsicContentSize
。
到目前为止,我目前的尝试是
import UIKit
final class CustomCell: UICollectionViewCell {
let label = UILabel(frame: .zero)
override init(frame: CGRect) {
super.init(frame: frame)
label.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(label)
NSLayoutConstraint.activate([
label.topAnchor.constraint(equalTo: contentView.topAnchor),
label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
])
}
required init?(coder: NSCoder) {
return nil
}
}
protocol SectionData {
var text: String { get }
}
struct DummyData: SectionData {
let text: String
}
enum SectionType: Int, CaseIterable {
case single
case double
case carousel
case tags
}
struct Section {
let id: Int
let type: SectionType
let title: String?
let subtitle: String?
let data: [SectionData]
}
class ViewController: UIViewController {
private var items: [Section] = [] {
didSet { collectionView.reloadData() }
}
private(set) lazy var collectionView: UICollectionView = {
let collectionView = UICollectionView(frame: view.frame, collectionViewLayout: makeLayout())
collectionView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
collectionView.backgroundColor = .systemBackground
collectionView.dataSource = self
collectionView.register(CustomCell.self, forCellWithReuseIdentifier: "CustomCell")
return collectionView
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(collectionView)
items = [
Section(id: 0, type: .single, title: nil, subtitle: nil, data: Array(0...3).map { index in DummyData(text: "Item \(index)") }),
Section(id: 1, type: .tags, title: nil, subtitle: nil, data: Array(0...15).map { index in DummyData(text: "Item \(index)") })
]
}
}
extension ViewController: UICollectionViewDataSource {
func numberOfSections(in collectionView: UICollectionView) -> Int {
return items.count
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return items[section].data.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let model = items[indexPath.section].data[indexPath.item]
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCell
cell.backgroundColor = indexPath.item % 2 == 0 ? .darkGray : .lightGray
cell.label.text = model.text
return cell
}
}
extension ViewController {
func makeLayout() -> UICollectionViewLayout {
let layout = UICollectionViewCompositionalLayout { [weak self] index, env in
guard let self = self else { return nil }
let section = self.items[index]
switch section.type {
case .single: return self.makeSingleSection()
case .tags: return self.makeTagSection(count: section.data.count)
default: return nil
}
}
let config = UICollectionViewCompositionalLayoutConfiguration()
config.interSectionSpacing = 20
layout.configuration = config
return layout
}
func makeSingleSection() -> NSCollectionLayoutSection {
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))
let layoutItem = NSCollectionLayoutItem(layoutSize: itemSize)
let layoutGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(100))
let layoutGroup = NSCollectionLayoutGroup.horizontal(layoutSize: layoutGroupSize, subitems: [layoutItem])
let layoutSection = NSCollectionLayoutSection(group: layoutGroup)
return layoutSection
}
func makeTagSection(count: Int) -> NSCollectionLayoutSection {
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))
let layoutItem = NSCollectionLayoutItem(layoutSize: itemSize)
let layoutGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(100))
let layoutGroup = NSCollectionLayoutGroup.horizontal(layoutSize: layoutGroupSize, subitem: layoutItem, count: count)
let layoutSection = NSCollectionLayoutSection(group: layoutGroup)
return layoutSection
}
}
我真的很感激任何帮助,我可以理解如何实现这个布局。