如何結合 UISlider 和 CollectionView 來自動調整 UICollectionViewCell 的單元格

Question

我需要創建下一個 UI

用戶界面

但我不知道從哪里開始以及 UISlider 如何更新 CollectionView 的單元格。

這個想法是使用隨機 JSON 並將每個項目渲染到 CollectionView 的單元格中。

Answer 1

// Set default value of how many cells to be displayed per row.
var numberOfItemsPerRow:Int = 4

override func viewDidLoad() {
    super.viewDidLoad()
    configureSlider()
}
func configureSlider() {
    let slider = UISlider(frame:CGRect(x: 0, y: 0, width: 300, height: 20))
    slider.center = self.view.center
    // minimum number of rows required
    slider.maximumValue = 1
    // maximum number of rows required
    slider.maximumValue = 10
    slider.value = 1
    slider.isContinuous = true
    stepper.addTarget(self, action: #selector(sliderValueChanged(_:)), for: .valueChanged)
    self.view.addSubview(stepper)
    numberOfItemsPerRow = Int(stepper.value)
}

@objc func sliderValueChanged(_ sender:UISlider!) {
    numberOfItemsPerRow  = Int(sender.value)
    
    self.collectionView.performBatchUpdates {
        self.collectionView.reloadData()
    }
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = (self.view.frame.width)/CGFloat(numberOfItemsPerRow)
    return CGSize(width: width, height: width)
}

希望您可以配置剩余的委托方法。