Different margins with `UIListContentView` in subclass vs. using `UICollectionViewListCell` directly

Question

Created Dec ’20

Replies 1

Boosts 0

Views 1.8k

Participants 2

I get different to the top and bottom of the cell when I use UIListContentView in a subclass versus if I use UICollectionViewListCell directly.

Here's how I setup directly UICollectionViewListCell:

Code Block         let reg = UICollectionView.CellRegistration<UICollectionViewListCell, EventCellViewModel> { cell, indexPath, model in            var content = cell.defaultContentConfiguration()            content.text = model.titleText            content.secondaryText = model.subtitleText            var accessories: [UICellAccessory] = [.disclosureIndicator(displayed: .always, options: .init(tintColor: .nicePurpleColor))]            accessories.append(.customView(configuration: .init(customView: UIImageView(image: UIImage(systemName: "bell")), placement: .trailing())))            cell.accessories = accessories            cell.contentConfiguration = content        }

Here's how I use it in my subclass:

Initialize it

Code Block private lazy var listContentView = UIListContentView(configuration: defaultListContentConfiguration())

Setup the views:

Code Block     private func setupViewsIfNeeded() {        guard accessories.isEmpty else { return }        accessories = [            .disclosureIndicator(displayed: .always, options: .init(tintColor: .nicePurpleColor)),            .customView(configuration: .init(customView: sswitch, placement: .trailing()))        ]        contentView.addSubview(listContentView)        listContentView.translatesAutoresizingMaskIntoConstraints = false        NSLayoutConstraint.activate([            listContentView.topAnchor.constraint(equalTo: contentView.topAnchor),            listContentView.leftAnchor.constraint(equalTo: contentView.leftAnchor),            listContentView.rightAnchor.constraint(equalTo: contentView.rightAnchor),            listContentView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),        ])    }

and then lastly configure it:

Code Block     override func updateConfiguration(using state: UICellConfigurationState) {        setupViewsIfNeeded()        var content = defaultListContentConfiguration().updated(for: state)        content.text = state.viewModel?.titleText        content.secondaryText = state.viewModel?.subtitleText        content.axesPreservingSuperviewLayoutMargins = [.both]        listContentView.configuration = content        sswitch.isOn = state.viewModel?.isEnabledForCalendar ?? false    }

/best regards, David

Boost

Answer 1

Frameworks Engineer OP

Apple

Jan ’21

The different behavior you are seeing here is most likely due to the UIListContentView receiving different layout margins in these two cases. When running your app, in the debugger try checking the value of cell.contentView.layoutMargins (when you set the configuration to the cell directly), vs listContentView.layoutMargins (when you embed the UIListContentView manually yourself).

When you apply the configuration directly to the cell, the UIListContentView becomes the cell's contentView (in other words, the UIListContentView is a direct subview of the cell itself). However, when you embed the UIListContentView inside the existing cell contentView, you now have one extra UIView (the cell's plain contentView) in between the cell and the UIListContentView.

When embedding a UIListContentView manually in the cell, you may want to set the following properties on the cell's plain contentView:

Code Block swiftcell.contentView.layoutMargins = .zerocell.contentView.preservesSuperviewLayoutMargins = true

This should remove any effect of the intermediate contentView and allow the cell's layout margins to propagate to the UIListContentView inside, to more closely match the behavior where you set the configuration directly to the cell.

1