UIPickerView rendering incorrectly after iOS 14/Xcode 12.0.1 update

user_407700 0
Viewed 1783

Anybody notice that the text in your application's UIPickerViews is rendered incorrectly, with the first character cut off? I'm seeing this in all UIPickerViews in my app, on multiple devices. You can see a few pixels of the first character in most cases.

I've tried deleting derived data, and the application from the phones, but no dice.

I'm not sure which update might have triggered the problem, but it just started in a project that has been stable for months. The code for the labels:

func pickerView(_ pickerView: UIPickerView,
                viewForRow row: Int,
                forComponent component: Int,
                reusing view: UIView?) -> UIView
{
    let pickerLabel = UILabel()
    pickerLabel.text = "Rec.709"
    pickerLabel.font = UIFont(name: "Ropa Sans", size: 18)
    pickerLabel.textColor = UIColor.white
    pickerLabel.textAlignment = NSTextAlignment.left
}

enter image description here

rendering xcode uipickerview text
2 Answers

Did not change anything to my PickerViews, but I am experiencing exactly the same problem since updating to iOS 14. Seems like Apple changed something in the PickerView implementation.

My ViewForRow function is returning a horizontal UIStackView containing three labels. I was able to solve the problem temporarily by adding a 15 points offset constraint to the leading edge of the first label, and the trailing edge of the last:

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

    var stackView: UIStackView

    if view != nil {
        stackView = view as! UIStackView
    } else {

        let leftLabel = UILabel()
        let ctrLabel = UILabel()
        let rightLabel = UILabel()

        stackView = UIStackView(arrangedSubviews:[leftLabel, ctrLabel, rightLabel])
        stackView.axis = .horizontal
        stackView.distribution = .fill

    // Temporary fix.
        leftLabel.leadingAnchor.constraint(equalTo: stackView.leadingAnchor, constant: 15.0).isActive = true
        rightLabel.trailingAnchor.constraint(equalTo: stackView.trailingAnchor, constant: -15.0).isActive = true

    // Set text of labels here...

    return stackView
}

I haven't been able to check yet, but I am afraid that this extra margin may now look weird on devices that are still running an older iOS version.

user_65474770

I found only the leftmost component's left-aligned string to be cut off (for example, I have a multipicker view with 3 components, all of which are left-aligned. Only the leftmost component is cutoff.

I found it easier to just modify the strings to pad them with a couple of extra leading spaces - I'm using a dictionary for the strings and so they are all in one place (and used only for display, so I don't have to worry about using values). Worked well in my case. If and when Apple fixes the issue, it will be easy to revert (if necessary).

user_14296020
Related