PickerView内のテキストのオートレイアウト

Question

実現したいこと

現在、タイマーのアプリを作成しております。実現したいこととしましては、タイトルにあるようにPickerView内のテキスト（設定時間）のオートレイアウトになります。できれば、設定時間の部分だけでなく、時・分・秒のテキストもオートレイアウトしたいと思っております。
詳細としては、最初の0の列Leading edgeと最後の列となる”秒”のTrailing edgeのmarginを合わせ、数字と時間単位の幅をそれぞれ均一にできればと思っております。もし、上記の方法をご存知でしたら、方法をご教示いただけると幸いです。また、参考になるリンク・サンプルコードを頂けるととても助かります。何卒よろしくお願い致します。

発生している問題

PickerView内のテキストをオートレイアウトしていないため、異なるスクリーンサイズのデバイスを使用した際、レイアウトが崩れてしまっています。レイアウトが崩れてしまっているスクリーンショットを添付しましたのでご参考までに。

スクリーンショット

コード

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    @IBOutlet weak var pickerOutlet: UIPickerView!

    let dataList = [[Int](0...24), [Int](0...60), [Int](0...60)]

    override func viewDidLoad() {
        super.viewDidLoad()
        pickerOutlet.delegate = self
        pickerOutlet.dataSource = self
        setAndDisplayPicker()
    }
    
    func setAndDisplayPicker() {
        
        let hStr = UILabel()
        hStr.text = "hours"
        hStr.textColor = .white
        hStr.sizeToFit()
        hStr.frame = CGRect(x: pickerOutlet.bounds.width/2.96 - hStr.bounds.width/2, y: pickerOutlet.bounds.height/1.8 - hStr.bounds.height, width: hStr.bounds.width, height: hStr.bounds.height)
        pickerOutlet.addSubview(hStr)
        
        let mStr = UILabel()
        mStr.text = "min"
        mStr.textColor = .white
        mStr.sizeToFit()
        mStr.frame = CGRect(x: pickerOutlet.bounds.width/1.72 - mStr.bounds.width/2, y: pickerOutlet.bounds.height/1.8 - mStr.bounds.height, width: mStr.bounds.width, height: mStr.bounds.height)
        pickerOutlet.addSubview(mStr)
        
        let sStr = UILabel()
        sStr.text = "sec"
        sStr.textColor = .white
        sStr.sizeToFit()
        sStr.frame = CGRect(x: pickerOutlet.bounds.width/1.18 - sStr.bounds.width/2, y: pickerOutlet.bounds.height/1.8 - sStr.bounds.height, width: sStr.bounds.width, height: sStr.bounds.height)
        pickerOutlet.addSubview(sStr)
        
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return dataList[component].count
    }
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return String(dataList[component][row])
    }
    
    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {

        let label = UILabel(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 50))
        label.textAlignment = .center
        label.text = String(dataList[component][row])
        label.font = UIFont(name: String(dataList[component][row]),size: 15)
        label.textColor = .white
        return label
    }
    
    func pickerView(_ pickerView: UIPickerView, widthForComponent component:Int) -> CGFloat {
        return pickerOutlet.bounds.width * 1/4
    }

補足情報

swift: 4.2
XCode: 11.5

Comments

[TsukubaDepot]

たとえば、下記の例は参考になりませんでしょうか。ちょっと古い記事ですが、ほぼそのまま使えたかと思います。
- UIPickerViewに固定のラベルをつける[複数Component対応][iOS8対応]　
http://mjhd.hatenablog.com/entry/uipickerview-with-labels

[at3250]

TsukubaDeptさんから頂いたリンクをベースに行ったら解決できました。ありがとうございます。

Answer 1

http://mjhd.hatenablog.com/entry/uipickerview-with-labels