如何结合UISlider与CollectionView实现UICollectionViewCell自动调整大小

1. 定义数据模型 #

先根据你JSON的结构创建Codable模型，这里假设每条数据包含数值和描述字段：

struct ItemModel: Codable {
    let value: Double
    let description: String
}

生成随机测试数据的方法：

func generateRandomData(count: Int) -> [ItemModel] {
    var items = [ItemModel]()
    for idx in 0..<count {
        let randomValue = Double.random(in: 0...100)
        items.append(ItemModel(value: randomValue, description: "条目\(idx + 1)"))
    }
    return items
}

2. 配置CollectionView #

注册自定义单元格 #

在ViewController的viewDidLoad中完成注册与代理设置：

collectionView.register(CustomCollectionViewCell.self, forCellWithReuseIdentifier: "CustomCell")
collectionView.delegate = self
collectionView.dataSource = self

实现DataSource协议方法 #

extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return dataArray.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCollectionViewCell
        let item = dataArray[indexPath.item]
        cell.descriptionLabel.text = item.description
        // 根据当前滑块值计算显示的数值（假设滑块范围0-100）
        let scaledValue = item.value * slider.value / 100
        cell.valueLabel.text = String(format: "%.1f", scaledValue)
        return cell
    }
}

3. 绑定UISlider更新逻辑 #

在viewDidLoad中添加滑块值改变的监听：

slider.addTarget(self, action: #selector(sliderValueChanged(_:)), for: .valueChanged)

实现滑块事件处理，触发CollectionView刷新：

@objc func sliderValueChanged(_ sender: UISlider) {
    // 仅刷新可见单元格提升性能
    collectionView.reloadItems(at: collectionView.indexPathsForVisibleItems)
    // 若需全量刷新则用：collectionView.reloadData()
}

4. 自定义CollectionViewCell #

创建包含UI元素的自定义单元格：

class CustomCollectionViewCell: UICollectionViewCell {
    let descriptionLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = .systemFont(ofSize: 14)
        return label
    }()
    
    let valueLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = .boldSystemFont(ofSize: 16)
        label.textAlignment = .right
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupUI() {
        contentView.addSubview(descriptionLabel)
        contentView.addSubview(valueLabel)
        
        NSLayoutConstraint.activate([
            descriptionLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8),
            descriptionLabel.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            valueLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8),
            valueLabel.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            valueLabel.widthAnchor.constraint(greaterThanOrEqualToConstant: 60)
        ])
        contentView.backgroundColor = .white
        contentView.layer.cornerRadius = 8
        contentView.layer.shadowColor = UIColor.black.cgColor
        contentView.layer.shadowOpacity = 0.1
        contentView.layer.shadowOffset = CGSize(width: 0, height: 2)
    }
}

5. 初始化数据源 #

在ViewController中定义数据源并初始化：

var dataArray = [ItemModel]()

override func viewDidLoad() {
    super.viewDidLoad()
    dataArray = generateRandomData(count: 20)
    // 其他配置代码
}

整个流程逻辑：滑块值变化时，触发可见单元格刷新，每个单元格根据当前滑块比例重新计算并展示对应数值。如果你的JSON结构不同，只需修改ItemModel结构和数据生成/解析逻辑即可。

内容的提问来源于stack exchange，提问作者Mateo Valencia Minota