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:

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.

回答1:

Small trick we can use to get this.

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.

I have did sample for 48 number of seats.

Coding

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)
}

Output

回答2:

You probably can't do it with UICollectionViewFlowLayout, but you could certainly do it by writing your own layout.

However, I would question whether this is a good use of a collection view in the first place. It would be a lot simpler just to lay this all out in code directly.

来源：https://stackoverflow.com/questions/48670189/creating-decoration-view-as-custom-column-in-uicollection-view

标签

swift

uicollectionview