在 UIPickerView 中更改选定行的颜色，滚动时也是如此

Question

我必须更改UIPickerView 中所选行的颜色。

我确实设法改变了颜色，我知道这个问题已经有好几个回复了，无论如何这些都不能让我满意：通过这些实现，pickerview 的动画有问题，我不喜欢它。

这是当前解决方案的代码

func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {

    var label: UILabel
    if view == nil {
      label = UILabel()
    } else if view is UILabel {
      label = view as! UILabel
    } else {
      label = UILabel()
    }

    let title: NSAttributedString
    if self.model?.selectedValue == row {
      title = UIPickerView.attributedString(with: .selectedRow, text: "\(model?.years[row] ?? 0)")
    } else {
      title = UIPickerView.attributedString(with: .unselectedRow, text: "\(model?.years[row] ?? 0)")
    }

    label.attributedText = title
    return label
}

当用户滚动时，我会重新加载组件。

但正如您在下图中看到的，当用户滚动时，绿色区域会移动，并且有几分之一秒的时间，绿色标签位于选择器指示器下方，而选定的行为黑色。

我想要的是选择器指示器内部的所有内容都是绿色的，而外部保持默认的灰色阴影。

我该如何实现？

Answer 1

您应该为此使用attributedTitleForRow，而无需使用NSAttributedString 创建您自己的标签。在您的didSelectRow 中，您重新加载所有组件，以便能够重置所有颜色并将新选择的颜色设置为绿色。

func pickerView(_ pickerView: UIPickerView, attributedTitleForRow row: Int, forComponent component: Int) -> NSAttributedString? {
    let color = (row == pickerView.selectedRow(inComponent: component)) ? UIColor.green : UIColor.black
    return NSAttributedString(string: self.model[row], attributes: [NSForegroundColorAttributeName: color])
}

func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    pickerView.reloadAllComponents()
}

Answer 2

你可以简单地使用这个代码

func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
    let label = view as? UILabel ?? UILabel()

    if pickerView.selectedRow(inComponent: component) == row {
        label.backgroundColor = UIColor.green
        label.frame = CGRect(x: 0, y: 0, width: 36, height: 36)
        label.layer.cornerRadius = 18
        label.layer.masksToBounds = true
        label.textColor = .white
        label.text = String(numbers[row])
        label.textAlignment = .center
    }else {
        label.layer.cornerRadius = 25
        label.frame = CGRect(x: 0, y: 0, width: 36, height: 36)
        label.layer.cornerRadius = 18
        label.layer.masksToBounds = true
        label.textColor = .white
        label.text = String(numbers[row])
        label.textAlignment = .center
    }
    return label
}

func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    pickerView.reloadAllComponents()
}

Answer 3

效果更好，性能稍差。

extension ViewController: UIPickerViewDelegate{

    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        let info = BeatScalar.generalRates[row]
        let general = GeneralRateItem(info.cn, info.ita, info.val)
        // gray every row
        general.unselected()
        decorateView(pickerView, row: row)
        return general
    }


    // Here is the logic 
    func decorateView(_ picker: UIPickerView, row: Int){

        var frame = picker.frame
        frame.origin.y = frame.origin.y + frame.size.height * 0.42
        frame.size.height = frame.size.height * 0.16

        let mini = max(row-1, 0)
        //   19 is total number
        let maxi = min(18, row+1)
        for i in mini...maxi{
            if i != row, let item = picker.view(forRow: i, forComponent: 0) as? GeneralRateItem{
                let f = item.convert(item.frame, to: picker)
                if frame.intersects(f) == false{
                    // highlight the center row
                    item.selected()
                }
            }
        }
    }

    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
        return 44
    }
}


extension ViewController: UIPickerViewDataSource{
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {       // 19 is total number
        return 19
    }
}