ios - UIPickerView(单元格大小)

Question

我正在尝试制作水平UIPivkerView。我做了所有事情，但我不明白如何设置单元格的大小，因为有些单词太长。我尝试了解每个单词的长度，并根据它设置单元格大小。但这对我不起作用。我注意到，如果我也按比例增加单元格的大小和宽度，则可以增加单元格的大小。

我需要一个像50宽度和50高度的PickerView，但我不明白如何处理单元格。

如果我设置值85，我会得到:

如果设置50:

import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    var data = ["Hello", "WorldWorld", "Of", "PickerPickerPicker", "View"]

    let viewPicker = UIPickerView()
    var rotationAngele: CGFloat!

    var width: CGFloat = 85
    var height: CGFloat = 85
    //var width: CGFloat!

    override func viewDidLoad() {
        super.viewDidLoad()

        viewPicker.delegate = self
        viewPicker.dataSource = self

        viewPicker.layer.borderColor = UIColor.black.cgColor
        viewPicker.layer.borderWidth = 1.5

        // Rotation
        rotationAngele = -90 * (.pi / 180)
        viewPicker.transform = CGAffineTransform(rotationAngle: rotationAngele)

        //width = data[4].widthOfString(usingFont: UIFont(name:"verdana", size: 24.0)!)

        // Create
        viewPicker.frame = CGRect(x: 0 - 150, y: 0, width: view.frame.width + 300, height: 85)
        viewPicker.center = self.view.center

        self.view.addSubview(viewPicker)
    }

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

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return data.count
    }

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

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

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

        //width = data[row].widthOfString(usingFont: UIFont(name:"verdana", size: 24.0)!)

        let view = UIView()
        view.frame = CGRect(x: 0, y: 0, width: 150, height: 150)

        let label = UILabel()
        label.frame = CGRect(x: 0, y: 0, width: 150, height: 150)

        label.textAlignment = .center
        label.font = UIFont(name:"verdana", size: 24.0)!
        label.text = data[row]
        view.addSubview(label)

        view.transform = CGAffineTransform(rotationAngle: 90 * (.pi / 180))

        return view
    }
}

////////////////////////////////////////////////////
extension String {
    func widthOfString(usingFont font: UIFont) -> CGFloat {

        let fontAttributes = [NSAttributedStringKey.font: font]
        let size = self.size(withAttributes: fontAttributes)
        return size.width
    }

    func heightOfString(usingFont font: UIFont) -> CGFloat {
        let fontAttributes = [NSAttributedStringKey.font: font]
        let size = self.size(withAttributes: fontAttributes)
        return size.height
    }
}

Answer 1

好吧，当您通过应用变换来旋转 UIPickerView 时，当您指定组件宽度时，您实际上指定了 rowHeight。

如果您检查 View ，则不太清楚，但如果您记录帧大小，您就会明白。

所以你应该设置pickerView:rowHeightForComponent以使其足够宽

func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
    return 300 // you can calculate this based on your container view or window size
}

此外，您还可以使用 UILabel 的 intrinsicContentSize 来计算标签的正确大小，并相应地更新其框架，以确保标签也正确呈现。

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

    let view = UIView()
    view.frame = CGRect(x: 0, y: 0, width: 150, height: 30)

    let label = UILabel()
    label.frame = CGRect(x: 0, y: 0, width: 150, height: 30)

    label.textAlignment = .center
    label.font = UIFont(name:"verdana", size: 24.0)!
    label.text = data[row]
    let updatedLabelSize = label.intrinsicContentSize
    dump(updatedLabelSize)
    label.frame = CGRect(x: 0, y: 0, width: updatedLabelSize.width, height: 30)
    view.frame = CGRect(x: 0, y: 0, width: updatedLabelSize.width, height: 30)
    view.addSubview(label)

    view.transform = CGAffineTransform(rotationAngle: 90 * (.pi / 180))

    return view
}

这是 UIPickerView 转换后的实际外观。红框是改造后，你看到的东西蓝色高光是真实框架