'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 |
---|