'How to expand collection view vertical in swift

I have a collection view section, when this VC is loaded for the first time, both sections (indoor and outdoor) initially will show just 4 items.

But after the user press "Arrow" Icon of the First cell, the section will expand vertically and show up all items available.

I am doing this but it expand horizontal

class SingleSecExpandableListViewController: UIViewController {

let modelObjects = [
    
    HeaderItem(title: "Communication", symbols: [
        SFSymbolItem(name: "mic"),
        SFSymbolItem(name: "mic.fill"),
        SFSymbolItem(name: "message"),
        SFSymbolItem(name: "message.fill"),
    ]),
    
    HeaderItem(title: "Weather", symbols: [
        SFSymbolItem(name: "sun.min"),
        SFSymbolItem(name: "sun.min.fill"),
        SFSymbolItem(name: "sunset"),
        SFSymbolItem(name: "sunset.fill"),
    ]),
    
    HeaderItem(title: "Objects & Tools", symbols: [
        SFSymbolItem(name: "pencil"),
        SFSymbolItem(name: "pencil.circle"),
        SFSymbolItem(name: "highlighter"),
        SFSymbolItem(name: "pencil.and.outline"),
    ]),
    
]

var collectionView: UICollectionView!
var dataSource: UICollectionViewDiffableDataSource<Section, ListItem>!

override func viewDidLoad() {
    super.viewDidLoad()
    
    self.title = "Single Section"
    
    // MARK: Create list layout
    let layoutConfig = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
    
    let listLayout = UICollectionViewCompositionalLayout.list(using: layoutConfig)
    
 
    // MARK: Configure collection view
    collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: listLayout)
   
   
    view.addSubview(collectionView)
    
    // Make collection view take up the entire view
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
        collectionView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor, constant: 0.0),
        collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0.0),
        collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0.0),
        collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0.0),
    ])
    
    // MARK: Cell registration
    let headerCellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, HeaderItem> {
        (cell, indexPath, headerItem) in
        
        // Set headerItem's data to cell
        var content = cell.defaultContentConfiguration()
        content.text = headerItem.title
        cell.contentConfiguration = content
        
        // Add outline disclosure accessory
        // With this accessory, the header cell's children will expand / collapse when the header cell is tapped.
        let headerDisclosureOption = UICellAccessory.OutlineDisclosureOptions(style: .header)
        cell.accessories = [.outlineDisclosure(options:headerDisclosureOption)]
    }
    
    let symbolCellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, SFSymbolItem> {
        (cell, indexPath, symbolItem) in
        
        // Set symbolItem's data to cell
        var content = cell.defaultContentConfiguration()
        content.image = symbolItem.image
        content.text = symbolItem.name
        cell.contentConfiguration = content
    }
    
    // MARK: Initialize data source
    dataSource = UICollectionViewDiffableDataSource<Section, ListItem>(collectionView: collectionView) {
        (collectionView, indexPath, listItem) -> UICollectionViewCell? in
        
        switch listItem {
        case .header(let headerItem):
            
            // Dequeue header cell
            let cell = collectionView.dequeueConfiguredReusableCell(using: headerCellRegistration,
                                                                    for: indexPath,
                                                                    item: headerItem)
            return cell
            
        case .symbol(let symbolItem):
            
            // Dequeue symbol cell
            let cell = collectionView.dequeueConfiguredReusableCell(using: symbolCellRegistration,
                                                                    for: indexPath,
                                                                    item: symbolItem)
            return cell
        }
    }
    
    // MARK: Setup snapshots
    var dataSourceSnapshot = NSDiffableDataSourceSnapshot<Section, ListItem>()
    
    // Create a section in the data source snapshot
    dataSourceSnapshot.appendSections([.main])
    dataSource.apply(dataSourceSnapshot)
    
    // Create a section snapshot for main section
    var sectionSnapshot = NSDiffableDataSourceSectionSnapshot<ListItem>()
    
    for headerItem in modelObjects {
        
        // Create a header ListItem & append as parent
        let headerListItem = ListItem.header(headerItem)
        sectionSnapshot.append([headerListItem])
        
        // Create an array of symbol ListItem & append as children of headerListItem
        let symbolListItemArray = headerItem.symbols.map { ListItem.symbol($0) }
        sectionSnapshot.append(symbolListItemArray, to: headerListItem)
        
        // Expand this section by default
        sectionSnapshot.expand([headerListItem])
    }
    
    // Apply section snapshot to main section
    dataSource.apply(sectionSnapshot, to: .main, animatingDifferences: false)
}

}



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source