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

Question

Created Dec ’20

Replies 1

Boosts 0

Views 1.7k

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 = .zero
cell.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