作为UICollectionViewListCell自定义accessory的UISlider超出单元格边界问题

问题原因 #

UISlider默认没有固定的固有宽度，UICellAccessory.customView默认不会主动限制自定义视图的宽度，cell布局时会优先展示左侧文本内容，剩余空间不足就会导致右侧的滑块超出单元格边界。

修复方案 #

给UISlider主动添加宽度约束，同时配置accessory的预留布局宽度即可，修改后代码如下：

let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, String>.init { cell, indexPath, itemIdentifier in
    var config = cell.defaultContentConfiguration()
    config.text = itemIdentifier
    cell.contentConfiguration = config
    
    let slider = UISlider()
    slider.translatesAutoresizingMaskIntoConstraints = false
    // 可根据业务需求调整宽度值
    slider.widthAnchor.constraint(equalToConstant: 140).isActive = true
    
    let sliderAccessory = UICellAccessory.customView(configuration: .init(
        customView: slider,
        placement: .trailing(),
        reservedLayoutWidth: .custom(140),
        maintainsFixedSize: true
    ))
    cell.accessories = [sliderAccessory]
}

可选优化 #

如果需要滑块适配不同屏幕宽度，可将固定宽度约束改为最大宽度约束：

slider.widthAnchor.constraint(lessThanOrEqualToConstant: 200).isActive = true

同时将reservedLayoutWidth改为.default即可，系统会自动分配可用宽度给滑块。

内容的提问来源于stack exchange，提问作者MH175