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:
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.
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.
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.