如何在UIPicker两列组件之间添加中间文本标签？

需求效果参考：

核心思路是不要尝试在Picker的组件、行视图里添加标签——这类视图会跟着滚轮滚动，无法实现固定在中间的效果，正确做法是直接在UIPickerView上叠加独立的固定标签，同时在定义组件宽度时给标签预留出显示空隙，避免标签遮挡滚轮内容。

具体实现步骤 #

• 实现UIPickerView的数据源代理，设置总共2个选择组件，通过pickerView(_:widthForComponent:)代理方法自定义组件宽度，在两个组件中间预留30~40pt的空隙用来放标签。
• 初始化一个UILabel作为中间标签，文本设置为"to"，字体样式和Picker选项的字体保持一致，关闭标签的用户交互（避免拦截滚轮滑动手势）。
• 将标签直接添加到UIPickerView上，通过自动布局把标签固定在Picker的垂直居中、水平中心位置，刚好落在两个组件的预留空隙里。

Swift 代码示例 #

import UIKit

class RangePickerViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    private let pickerView = UIPickerView()
    // 持有中间标签，避免被提前释放
    private let middleToLabel: UILabel = {
        let label = UILabel()
        label.text = "to"
        label.font = .systemFont(ofSize: 17)
        label.textAlignment = .center
        label.isUserInteractionEnabled = false // 关键：关闭交互不挡手势
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        pickerView.delegate = self
        pickerView.dataSource = self
        view.addSubview(pickerView)
        // 这里省略pickerView自身的布局代码
        
        // 添加中间标签到picker上
        pickerView.addSubview(middleToLabel)
        middleToLabel.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            middleToLabel.centerXAnchor.constraint(equalTo: pickerView.centerXAnchor),
            middleToLabel.centerYAnchor.constraint(equalTo: pickerView.centerYAnchor),
            middleToLabel.widthAnchor.constraint(equalToConstant: 40)
        ])
    }

    // MARK: - UIPicker DataSource
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 2 // 左右两个选择组件
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return 100 // 按自身业务需求返回行数
    }

    // MARK: - UIPicker Delegate
    func pickerView(_ pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat {
        let totalWidth = pickerView.bounds.width
        let middleReservedWidth: CGFloat = 40 // 和标签宽度保持一致
        return (totalWidth - middleReservedWidth) / 2 // 两个组件平分剩余宽度
    }
    
    // 其余代理方法按业务需求实现即可
}

注意事项 #

• 如果需要适配横竖屏切换，不用手动调整标签位置，自动布局会自动把标签保持在中心位置
• 不要把标签添加到UIPickerView的父视图上，否则会出现层级错位、跟随布局偏移的问题，直接add到UIPickerView本身即可
• 如果需要做iOS 15+的原生日期范围选择，也可以直接用系统提供的UIDatePicker的.dateRange选择模式，自带中间连接标签，不需要自定义。

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