Cells jumping when appearing or changed

Question

Created Dec ’20

Replies 0

Boosts 0

Participants 1

I've adopted the techniques from 'Modern Collection Views' and I get a strange jump in the cell when the collection view appears on screen. The cells are slightly too small, and grows a couple of pixels. It looks like it's the spacing between the text and the secondaryText of the .subtitleCell() the grows from zero to some pixels.

Some cell also jumps a bit the first time it's updated.

Code is attached below.

Example.swift

//
//  CalendarEventCell.swift
//  Calendarly
//
//  Created by David Everlöf on 2020-12-14.
//  Copyright © 2020 David Everlöf. All rights reserved.
//

import Foundation

fileprivate extension UIConfigurationStateCustomKey {
    static let viewModel = UIConfigurationStateCustomKey("se...CalendarEventCell.event")
}

private extension UICellConfigurationState {
    var viewModel: CalendarEventViewModel? {
        set { self[.viewModel] = newValue }
        get { return self[.viewModel] as? CalendarEventViewModel }
    }
}

class _CalendarEventCell: UICollectionViewListCell {
    private var viewModel: CalendarEventViewModel? = nil

    func update(with newViewModel: CalendarEventViewModel) {
        guard viewModel != newViewModel else { return }
        viewModel = newViewModel
        setNeedsUpdateConfiguration()
    }

    override var configurationState: UICellConfigurationState {
        var state = super.configurationState
        state.viewModel = viewModel
        return state
    }
}

class CalendarEventCell: _CalendarEventCell {

    private func defaultListContentConfiguration() -> UIListContentConfiguration { return .subtitleCell() }

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

    private lazy var sswitch: UISwitch = {
        let sswitch = UISwitch()
        sswitch.onTintColor = UIColor.nicePurpleColor
        sswitch.addTarget(self, action: #selector(switchAction), for: .valueChanged)
        return sswitch
    }()

    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

        let defaultHorizontalCompressionResistance = listContentView.contentCompressionResistancePriority(for: .horizontal)
        listContentView.setContentCompressionResistancePriority(defaultHorizontalCompressionResistance - 1, for: .horizontal)

        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),
        ])
    }

    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
    }

    @objc func switchAction() {
        guard let viewModel = configurationState.viewModel else { return }
        FB.Mutate.toggleIsEnabled(viewModel.event, design: viewModel.design, calendarEvent: viewModel.calendarEvent)
    }

}

Boost