UIPickerView 不会在自定义 UIView 上滚动

Question

我有一个符合 UIView 的自定义类。它包含 UIPickerView 和 UIButton。我正在使用以下代码：

class ColorPickerView: UIView {

    // MARK: - Subviews

    private lazy var colorPicker: UIPickerView = {
        let picker = UIPickerView()
        picker.translatesAutoresizingMaskIntoConstraints = false
        picker.dataSource = self
        picker.delegate = self
        picker.isHidden = false
        return picker
    }()
    
    private lazy var colorSave: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("Save", for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.isHidden = false
        button.backgroundColor = .black
        button.addTarget(self, action: #selector(didTapColorSave), for: .touchUpInside)
        return button
    }()
    
    // MARK: - Lifecycle

    init() {
        super.init(frame: .zero)
        addSubviews()
        setupConstraints()
    }
    
    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // MARK: - Actions
    
    @IBAction func didTapColorSave(sender: AnyObject) {
        hideUI()
    }
    
    // MARK: - Private
    
    private func addSubviews() {
        self.isUserInteractionEnabled = false
        addSubview(colorSave)
        addSubview(colorPicker)
    }
    
    private func setupConstraints() {
        NSLayoutConstraint.activate([
            colorSave.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
            colorSave.topAnchor.constraint(equalTo: bottomAnchor, constant: -64),
            colorSave.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
            colorSave.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -16),
            
            colorPicker.leadingAnchor.constraint(equalTo: leadingAnchor),
            colorPicker.topAnchor.constraint(equalTo: bottomAnchor, constant: -256),
            colorPicker.trailingAnchor.constraint(equalTo: trailingAnchor),
            colorPicker.bottomAnchor.constraint(equalTo: colorSave.topAnchor, constant: -16)
        ])
    }
    
    private func hideUI() {
        colorPicker.isHidden = true
        colorSave.isHidden = true
    }
}

extension ColorPickerView: UIPickerViewDataSource, UIPickerViewDelegate {
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int{
        return customColor.allValues.count
    }
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        print(customColor.allValues[row].rawValue)
        return customColor.allValues[row].rawValue
    }
}

UIPickerView

用于从枚举

customColor

中选择颜色。然后可以使用

colorSave

按钮隐藏所有元素。

然而，一旦我放置

ColorPickerView

类的实例，它就会正确显示，但不会滚动。我究竟做错了什么？和

isUserInteractionEnabled

有关系吗？

Answer 1

您的自定义视图没有高度。我建议你完全重做你的约束，使它们更容易遵循。假设您想要选择器视图下方的按钮，请执行以下操作：

NSLayoutConstraint.activate([
    colorPicker.leadingAnchor.constraint(equalTo: leadingAnchor),
    colorPicker.trailingAnchor.constraint(equalTo: trailingAnchor),
    colorPicker.topAnchor.constraint(equalTo: topAnchor, constant: 16),

    colorSave.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
    colorSave.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
    colorSave.heightAnchor.constraint(equalToConstant: 50),
    colorSave.topAnchor.constraint(equalTo: colorPicker.bottomAnchor, constant: 20),
    colorSave.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -16),    
])

这些约束假设 UIPickerView 具有固有高度。我认为确实如此，但我可能是错的。如果没有，则根据需要向

colorPicker

添加高度约束。

目前，它使选取器的顶部距视图顶部 16 点，按钮距视图底部 16 点。它在选择器和按钮之间设置了 20 个点的间隙。它将按钮高度设置为 50 点。根据需要调整这些。

设置约束时，考虑自上而下的布局和/或左右布局要简单得多。您的代码使所有设置都基于视图的底部。您从未将视图的顶部锚点设置为任何内容，因此您的主视图没有高度。这就是您的选择器和按钮不起作用的原因。它们被零高度的父视图剪切。