Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove list UICollectionView cell separators

I'm trying to build a list similiar to WhatsNewKit(WhatsNewKit) using the new CollectionView API.

My problem is that I can't seem to remove the cell separators. I am using as a cell the UICollectionViewListCell and so far I tried to change the cell separatorLayoutGuide like this cell.separatorLayoutGuide.heightAnchor.constraint(equalToConstant: 0).isActive = true but it just tells me that it breaks the CollectionView constraints.

( "<NSLayoutConstraint:0x600002364b90 UILayoutGuide:0x60000390a060'UICollectionViewListCellSeparatorLayoutGuide'.height == 0 (active)>", "<NSLayoutConstraint:0x600002364730 'UICollectionViewListCell-height-separatorLayoutGuide-constraint' UILayoutGuide:0x60000390a060'UICollectionViewListCellSeparatorLayoutGuide'.height == 0.333333 (active)>" )

Will attempt to recover by breaking constraint <NSLayoutConstraint:0x600002364730 'UICollectionViewListCell-height-separatorLayoutGuide-constraint' UILayoutGuide:0x60000390a060'UICollectionViewListCellSeparatorLayoutGuide'.height == 0.333333 (active)>)

So is there a way to remove those separators?

enter image description here

like image 721
Lobont Andrei Avatar asked Jul 23 '26 01:07

Lobont Andrei


2 Answers

You can hide the separator by changing property showsSeparators of UICollectionLayoutListConfiguration (you probably pass UICollectionLayoutListConfiguration to your collectionView.collectionViewLayout when configuring your collection view layout).

Example usage:

let provider = {(_: Int, layoutEnv: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
  var configuration = UICollectionLayoutListConfiguration(appearance: .grouped)
  configuration.showsSeparators = false // <----- hide separators
  return .list(using: configuration, layoutEnvironment: layoutEnv)
}
collectionView.collectionViewLayout = UICollectionViewCompositionalLayout(sectionProvider: provider)
like image 61
Mickey16 Avatar answered Jul 24 '26 14:07

Mickey16


Same as accepted answer, just with plain layout:

var config = UICollectionLayoutListConfiguration(appearance: .plain)
config.showsSeparators = false
        
let layout = UICollectionViewCompositionalLayout.list(using: config)
        
collectionView.collectionViewLayout = layout
like image 45
Starwave Avatar answered Jul 24 '26 15:07

Starwave



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!