iosswiftuicollectionviewiglistkit

IGListKit - Add Multiple Sections with a Supplementary Header View for each


I am trying to implement a list of stock orders and owned stocks in a UICollectionView. I am using IGListKit to implement the collection view and I am able to get the cells to show correctly. The problem arises when I try to add a Supplementary View to the OrderStockFeedListSectionController and the OwnedStockFeedListSectionController to create the header view.


If I just pass the model for the Order Stocks, I get the header that I expect:

enter image description here


But when I pass both models (the Order Stocks and Owned Stocks), I get a jumple of duplicate headers, and even a footer for some odd reason.

enter image description here

TSLA and WF are Order Stocks | AAPL and MSFT are Owned Stocks


I already looked at IGListKit's documentation and implemented the header views like they did, but I can't seem to be able to add multiple headers.

The ListAdapter Data Source


    func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
        var orderList: [OrderStockDataBucket] = []
        orderList.append(OrderStockDataBucket(Symbol: "TSLA", Name: "Tesla Motors", Price: 231.32, PercentChange: 2.32))
        orderList.append(OrderStockDataBucket(Symbol: "WF", Name: "Wells Fargo", Price: 231.32, PercentChange: 2.32))
        let orderStockDataBatch = OrderStockDataBatch(List: orderList)

        var ownedList: [OwnedStockDataBucket] = []
        ownedList.append(OwnedStockDataBucket(Symbol: "AAPL", Name: "Apple Inc.", Price: 123.21, PercentChange: 2.32))
        ownedList.append(OwnedStockDataBucket(Symbol: "MSFT", Name: "Microsoft Corp.", Price: 231.23, PercentChange: 22.32))
        let ownedStockDataBatch = OwnedStockDataBatch(List: ownedList)

        return [orderStockDataBatch, ownedStockDataBatch] as [ListDiffable]
    }

    func listAdapter(_ listAdapter: ListAdapter, sectionControllerFor object: Any) -> ListSectionController {
        if let _ = object as? OrderStockDataBatch {
            return OrderStockFeedListSectionController()
        }
        else if let _ = object as? OwnedStockDataBatch{
            return OwnedStockFeedListSectionController()
        }
        print("List Adapter object did not match any type!")
        return ListSectionController()
    }

    func emptyView(for listAdapter: ListAdapter) -> UIView? {
        nil
    }



The OrderStockFeedListSectionController (the OwnedStockFeedListSectionController is exactly the same, I just changed the header view label to say "Your Stocks")

import UIKit
import IGListKit

class OrderStockFeedListSectionController: ListSectionController, ListSupplementaryViewSource {

    private var orderStockDataBatch: OrderStockDataBatch?

    override init() {
        super.init()
        self.supplementaryViewSource = self
    }

    override func numberOfItems() -> Int {
        return orderStockDataBatch?.orderStockDataList.count ?? 0
    }

    override func sizeForItem(at index: Int) -> CGSize {
        let containerWidth = self.collectionContext?.containerSize.width ?? 50
        let containerHeight = self.collectionContext?.containerSize.height ?? 50
        let width: CGFloat!
        if (containerWidth < containerHeight) {
            width = containerWidth
        } else {
            width = containerHeight
        }
        let height = CGFloat(OwnedStockFeedCollectionViewCell.CELL_HEIGHT)
        return CGSize(width: width, height: height)
    }

    override func cellForItem(at index: Int) -> UICollectionViewCell {
        let cell = collectionContext!.dequeueReusableCell(of: OwnedStockFeedCollectionViewCell.self, for: self, at: index) as! OwnedStockFeedCollectionViewCell

        cell.symbolLabel.text = orderStockDataBatch?.orderStockDataList[index].stockSymbol
        cell.nameLabel.text = orderStockDataBatch?.orderStockDataList[index].stockName
        cell.priceLabel.text = "\(orderStockDataBatch?.orderStockDataList[index].stockPrice ?? 0)"
        cell.percentChangeLabel.text = "\(orderStockDataBatch?.orderStockDataList[index].stockPercentChange ?? 0)"
        //cell.percentChangeLabel.backgroundColor = UIColor(named: "MarketGreen")

        return cell
    }

    override func didUpdate(to object: Any) {
        orderStockDataBatch = object as? OrderStockDataBatch
    }



    func supportedElementKinds() -> [String] {
        return [UICollectionView.elementKindSectionHeader]
    }

    func viewForSupplementaryElement(ofKind elementKind: String, at index: Int) -> UICollectionReusableView {
        return userHeaderView(atIndex: index)
    }

    func sizeForSupplementaryView(ofKind elementKind: String, at index: Int) -> CGSize {
        return CGSize(width: collectionContext!.containerSize.width, height: 25)
    }

    private func userHeaderView(atIndex index: Int) -> UICollectionReusableView {
        let view = collectionContext!.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, for: self, class: UICollectionReusableView.self, at: index)

        let label = UIInsetLabel(frame: view.frame)
        label.text = "Your Orders"
        label.textColor = UIColor(named: "DarkLightGray")
        label.font = UIFont(name: "HelveticaNeue-Bold", size: 16)
        label.backgroundColor = UIColor(named: "LightDarkGray")
        label.contentInsets = UIEdgeInsets(top: 0, left: 15, bottom: 0, right: 0)
        view.addSubview(label)

        return view
    }

}



I have been looking for an answer for a few days now, but I have gotten nowhere. Please help.


Solution

  • My problem was what ugur pointed out. I just needed to extend a UICollectionReusableView on my own view. Then I would just obtain that view type when dequeueing the view. Thanks ugur once again.