iOS 14 UICollectionView - 自定义单元格约束

如何解决iOS 14 UICollectionView - 自定义单元格约束

我正在尝试在 iOS 14 上使用 UICollectionView 实现一个带有自定义单元格的简单列表。我的自定义单元格应该以以下样式显示标题和相应的值。

但现在的实际结果是这样的：

我开始使用使用 UICellConfigurationState 配置单元格的新方法。

我的解决方案包括：

• 自定义 UIContentConfiguration
• 自定义 UIContentView
• 自定义 UICollectionViewListCell

现在我不知道如何约束我的自定义 UIContentView 以与单元格分隔符布局指南对齐。我的代码如下所示：

// MARK: - UIContentConfiguration
struct DisplayCellContentConfiguration: UIContentConfiguration,Hashable {
    
    var title: String?
    var value: String?
    
    func makeContentView() -> UIView & UIContentView {
        return DisplayCellContentView(configuration: self)
    }
    
    func updated(for state: UIConfigurationState) -> Self {
        
        // Perform update on parameters that does not related to cell's data items
        // Make sure we are dealing with instance of UICellConfigurationState
        guard state is UICellConfigurationState else {
            return self
        }
        
        // Update self based on the current state
        let updatedConfiguration = self
        
        return updatedConfiguration
    }
}

// MARK: - Content View
class DisplayCellContentView: UIView,UIContentView {
    
    // MARK: - UI Properties
    private lazy var stackView = UIStackView().with {
        $0.translatesAutoresizingMaskIntoConstraints = false
        $0.axis = .horizontal
        $0.distribution = .equalSpacing
        $0.isLayoutMarginsRelativeArrangement = true
    }
    
    private lazy var titleLabel = UILabel().with {
        $0.translatesAutoresizingMaskIntoConstraints = false
        $0.textColor = .label
        $0.font = UIFont.preferredFont(forTextStyle: .body)
        $0.adjustsFontForContentSizeCategory = true
    }
    
    private lazy var valueLabel = UILabel().with {
        $0.translatesAutoresizingMaskIntoConstraints = false
        $0.textColor = .secondaryLabel
        $0.font = UIFont.preferredFont(forTextStyle: .body)
        $0.adjustsFontForContentSizeCategory = true
    }
    
    // MARK: - UIContentView conforming
    private var currentConfiguration: DisplayCellContentConfiguration!
    var configuration: UIContentConfiguration {
        get {
            currentConfiguration
        }
        set {
            // Make sure the given configuration is of type DisplaySettingsCellContentConfiguration
            guard let newConfiguration = newValue as? DisplayCellContentConfiguration else {
                return
            }
            
            // Apply the new configuration
            // also update currentConfiguration to newConfiguration
            apply(configuration: newConfiguration)
        }
    }
    
    // MARK: - Initializers
    init(configuration: DisplayCellContentConfiguration) {
        super.init(frame: .zero)
        
        // Create the content view UI
        setupView()
        
        // Apply the configuration (set data to UI elements / define custom content view appearance)
        apply(configuration: configuration)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

// MARK: - Content View UI Setup
private extension DisplayCellContentView {
    
    private func setupView() {
    
        //TODO:  I would expect leading to be 16 here,but this does not work on real devices. In the simulator 16 is correct,on real devices it is 20
        addSubview(stackView)
        NSLayoutConstraint.activate([
            stackView.leadingAnchor.constraint(equalTo: leadingAnchor,constant: 20),stackView.topAnchor.constraint(equalTo: topAnchor,constant: 11),stackView.trailingAnchor.constraint(equalTo: trailingAnchor,constant: -11),stackView.bottomAnchor.constraint(equalTo: bottomAnchor,constant: -11)
        ])
        stackView.addArrangedSubview(titleLabel)
        stackView.addArrangedSubview(valueLabel)
    }
    
    private func apply(configuration: DisplayCellContentConfiguration) {
        
        // Only apply configuration if new configuration and current configuration are not the same
        guard currentConfiguration != configuration else {
            return
        }
        
        // Replace current configuration with new configuration
        currentConfiguration = configuration
        
        // Set data to UI elements
        titleLabel.text = configuration.title
        valueLabel.text = configuration.value
    }
}

// MARK: - UICollectionViewListCell

/// A UICollectionViewListCell that displays a title on the left and a corresponding value on the right side of the cell
class DisplayListCell: UICollectionViewListCell {
    
    var item: DisplayValueCell?
    
    override func updateConfiguration(using state: UICellConfigurationState) {
        // Create new configuration object and update it base on state
        var newConfiguration = DisplayCellContentConfiguration().updated(for: state)
        
        // Update any configuration parameters related to data item
        newConfiguration.title = item?.title
        newConfiguration.value = item?.value
        
        // Set content configuration in order to update custom content view
        contentConfiguration = newConfiguration
    }
}

我在此代码中看到的问题是 DisplayCellContentView.setupView()。这里的布局约束值是猜测而不是真正知道，而且仅适用于真实设备而不适用于模拟器。所以我的问题是，如何始终将我的自定义单元格视图与分隔符布局指南前导锚点对齐？

感谢任何帮助！