我正在尝试实现看起来像这样的“标签云”效果 -
每个Tag Item X都是一个单元格，#可以是图像、单元格或视图。它只需要这些是哈希标签。
我目前对标签云的尝试如下所示 -
我无法弄清楚如何偏移部分项目并将视图或任何类型插入该空间。
我确实尝试了破解或排序，因为每个单元格都包含图标和标签，然后我在第一个单元格之后隐藏每个单元格上的图标。但是，这不起作用，因为它Tag Item 3会包裹在图标下方，并且还存在一些重用问题。
请问我怎样才能实现这个用户界面？
我相信我可能需要渲染一个嵌套组，第一个单元格中带有图标和尾组中的 mu 标签？我无法完成这项工作。
import UIKit
final class CustomCell: UICollectionViewCell {
let label = UILabel(frame: .zero)
override init(frame: CGRect) {
super.init(frame: frame)
label.translatesAutoresizingMaskIntoConstraints = false
label.backgroundColor = .clear
label.font = .systemFont(ofSize: 16)
label.textColor = .white
label.textAlignment = .center
label.sizeToFit()
contentView.addSubview(label)
NSLayoutConstraint.activate([
label.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8),
label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8),
label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8)
])
}
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: "List Item \(index)") }),
Section(id: 1, type: .carousel, title: nil, subtitle: nil, data: Array(0...6).map { index in DummyData(text: "Carousel Item \(index)") }),
Section(id: 2, type: .tags, title: nil, subtitle: nil, data: Array(0...15).map { index in DummyData(text: "Tag 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.label.text = model.text
cell.label.sizeToFit()
cell.backgroundColor = indexPath.item % 2 == 0 ? .darkGray : .lightGray
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 .carousel: return self.makeCarouselSection()
case .tags: return self.makeTagSection()
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])
layoutGroup.interItemSpacing = .fixed(12)
let layoutSection = NSCollectionLayoutSection(group: layoutGroup)
layoutSection.contentInsets = .init(top: 0, leading: 16, bottom: 0, trailing: 16)
layoutSection.interGroupSpacing = 8
return layoutSection
}
func makeCarouselSection() -> NSCollectionLayoutSection {
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))
let layoutItem = NSCollectionLayoutItem(layoutSize: itemSize)
layoutItem.contentInsets = .init(top: 0, leading: 8, bottom: 0, trailing: 8)
let layoutGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.83), heightDimension: .estimated(350))
let layoutGroup = NSCollectionLayoutGroup.horizontal(layoutSize: layoutGroupSize, subitems: [layoutItem])
let layoutSection = NSCollectionLayoutSection(group: layoutGroup)
layoutSection.orthogonalScrollingBehavior = .groupPaging
layoutSection.contentInsets = .init(top: 0, leading: 8, bottom: 0, trailing: 24)
return layoutSection
}
func makeTagSection() -> NSCollectionLayoutSection {
let itemSize = NSCollectionLayoutSize(widthDimension: .estimated(100), heightDimension: .absolute(36))
let layoutItem = NSCollectionLayoutItem(layoutSize: itemSize)
let layoutGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: itemSize.heightDimension)
let layoutGroup = NSCollectionLayoutGroup.horizontal(layoutSize: layoutGroupSize, subitems: [layoutItem])
layoutGroup.interItemSpacing = .fixed(8)
let layoutSection = NSCollectionLayoutSection(group: layoutGroup)
layoutSection.contentInsets = .init(top: 0, leading: 16, bottom: 0, trailing: 16)
layoutSection.interGroupSpacing = 8
return layoutSection
}
}
