如何在swift3中的UICollectionView中显示两个不同的单元格

Question

I am trying to achieve the following image by using the UICollectionViewCell.

But i have got 3 different cases for this: A) A particular type of journey only onward journey time is visible. B) A particular type of journey both onward journey and return journey is visible(as shown in the below image). C) A particular type of journey has 2 onward journey and 2 return journey time.

So i am trying to use the collection view for this. Am i correct in doing this approach and how to achieve this logic using collection view?

Answer 1

I would probably subclass my UICollectionViewCell, define all necessary layout type enums and pass it in my cellForItemAtIndexPath as a parameter in a custom method, so the custom collection view cell knows how to layout itself.

Something like this:

enum MyLayoutType
{
    case layoutA
    case layoutB
    case layoutC
}

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource
{
    override func viewDidLoad()
    {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning()
    {
        super.didReceiveMemoryWarning()
    }

// MARK: Collection View DataSource

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int
    {
        return 1
    }

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

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

        // Decide here what layout type you would like to set

        cell.setUpWithType(layoutType: .layoutA)
        return cell
    }
}

And then, in your custom collection view cell subclass (don't forget to assign the Custom class in your interface builder file):

class MyCustomCVCell: UICollectionViewCell
{
    func setUpWithType(layoutType: MyLayoutType)
    {
        switch layoutType
        {
        case .layoutA:
            self.backgroundColor = .red
        case .layoutB:
            self.backgroundColor = .yellow
        case .layoutC:
            self.backgroundColor = .blue
        }
    }
}