在 UICollection 视图中创建装饰视图作为自定义列 [英] Creating decoration view as custom column in UICollection View

问题描述

我有一个显示座位表的集合视图，我已经能够使用带有以下代码的集合视图流布局来实现这一点:

I have a collection view that displays a seating chart and I have been able to achieve this using the collection view Flow Layout with the following code:

 class SeatsLayout: UICollectionViewFlowLayout {

let cellsPerRow: Int
override var itemSize: CGSize {
    get {
        guard let collectionView = collectionView else { return super.itemSize }
        let marginsAndInsets = sectionInset.left + sectionInset.right + minimumInteritemSpacing * CGFloat(cellsPerRow - 1)
        let itemWidth = ((collectionView.bounds.size.width - marginsAndInsets) / CGFloat(cellsPerRow)).rounded(.down)
        return CGSize(width: itemWidth, height: itemWidth)
    }
    set {
        super.itemSize = newValue
    }
}

init(cellsPerRow: Int, minimumInteritemSpacing: CGFloat = 0, minimumLineSpacing: CGFloat = 0, sectionInset: UIEdgeInsets = .zero) {
    self.cellsPerRow = cellsPerRow
    super.init()

    self.minimumInteritemSpacing = minimumInteritemSpacing
    self.minimumLineSpacing = minimumLineSpacing
    self.sectionInset = sectionInset
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

override func invalidationContext(forBoundsChange newBounds: CGRect) -> UICollectionViewLayoutInvalidationContext {
    let context = super.invalidationContext(forBoundsChange: newBounds) as! UICollectionViewFlowLayoutInvalidationContext
    context.invalidateFlowLayoutDelegateMetrics = newBounds != collectionView?.bounds
    return context
}

}这将显示座位表，如下所示:

} This displays the seating chart as follows:

我希望能够像这样显示座位表以指示公共汽车中间的人行道间距:

I would like to be able to display the seating chart to indicate the walkway spacing in the middle of the bus like this:

我如何才能在 UICollectionView Flow Layout 中实现这一点?我对 IOS 很陌生，发现很难做到这一点.

How would I be able to achieve this in UICollectionView Flow Layout? I'm quite new to IOS and finding it quite difficult to achieve this.

推荐答案

我们可以使用的小技巧来解决这个问题.

Small trick we can use to get this.

Cell size 应该是 ViewController 的 1 - 五分之一.所以我们可以在一行中得到 5 个 Cell.你可以创建 numberOfItems 你需要什么.

Cell size should be one - fifth of ViewController. So we can get 5 Cells in one row. U can create numberOfItems what do u need.

在字典中创建和存储座位号.所以我们可以避免重复使用.

Create and store seat number in Dictionary. So we can avoid reuse.

我已经为 48 个座位做了样品.

I have did sample for 48 number of seats.

编码

var busSeatNumDict = [Int : String]()
var pathWayNumber = Int()
var seatNumer = Int()

override func viewDidLoad() {
    super.viewDidLoad()
    pathWayNumber = 2 // CENTER - PASSENGER CAN WALK
    seatNumer = 1  // STARTING NUMBER
    for i in 0...59
    {
        if i == pathWayNumber // If it s centre, values empty to dictionary
        {
            busSeatNumDict[i] = ""
            pathWayNumber = pathWayNumber + 5 // Position empty - 2,7,12,17,22 ...... like that
        }
        else
        {
            busSeatNumDict[i] = String(seatNumer)
            seatNumer = seatNumer + 1
        }

    }
}


override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier:  "Cell", for: indexPath) as! RulesCollectionViewCell

    cell.alpha = 0 // Initially alpha 0
    let text = busSeatNumDict[indexPath.row]!

    if text == "" || text == "2"
    {
        cell.alpha = 0
    }
    else
    {
        cell.alpha = 1
    }
    cell.backgroundColor = UIColor.clear

    cell.layer.borderColor = UIColor(red: 83/255, green: 50/255, blue: 129/255, alpha: 1.0).cgColor
    cell.layer.borderWidth = 1.0
    cell.txtLbl.text = text
    cell.txtLbl.textAlignment = .center
    cell.txtLbl.textColor = UIColor.darkGray
    cell.layer.cornerRadius = 5
    return cell
}

override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
     return 60
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    return CGSize(width: (self.collectionView?.frame.width)! / 5, height: (self.collectionView?.frame.width)! / 5)
}

输出

这篇关于在 UICollection 视图中创建装饰视图作为自定义列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！