How to Change Uipickerview Height

How to change UIPickerView height

It seems obvious that Apple doesn't particularly invite mucking with the default height of the UIPickerView, but I have found that you can achieve a change in the height of the view by taking complete control and passing a desired frame size at creation time, e.g:

smallerPicker = [[UIPickerView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 120.0)];

You will discover that at various heights and widths, there are visual glitches. Obviously, these glitches would either need to be worked around somehow, or choose another size that doesn't exhibit them.

How to customise UIPickerView height?

Here there are only three valid heights for UIPickerView (162.0, 180.0 and 216.0).

You can use the CGAffineTransformMakeTranslation and CGAffineTransformMakeScale functions to properly fit the picker to your convenience.

Example:

CGAffineTransform t0 = CGAffineTransformMakeTranslation( 0,
    pickerview.bounds.size.height/2 );
CGAffineTransform s0 = CGAffineTransformMakeScale(1.0, 0.5);
CGAffineTransform t1 = CGAffineTransformMakeTranslation( 0,
    pickerview.bounds.size.height/-2 );
pickerview.transform = CGAffineTransformConcat( t0,
    CGAffineTransformConcat(s0, t1) );

The above code change the height of picker view to half and re-position it to the exact (Left-x1, Top-y1) position.

Refer more here.
How to change UIPickerView height

UIPickerView Height not changeable

here are only three valid heights for UIPickerView (162.0, 180.0 and 216.0).

You can use the CGAffineTransformMakeTranslation and CGAffineTransformMakeScale functions to properly fit the picker to your convenience.

Example:

CGAffineTransform t0 = CGAffineTransformMakeTranslation (0, pickerview.bounds.size.height/2);
CGAffineTransform s0 = CGAffineTransformMakeScale       (1.0, 0.5);
CGAffineTransform t1 = CGAffineTransformMakeTranslation (0, -pickerview.bounds.size.height/2);
pickerview.transform = CGAffineTransformConcat          (t0, CGAffineTransformConcat(s0, t1));

The above code change the height of picker view to half and re-position it to the exact (Left-x1, Top-y1) position.

Refer more here.

swift uipickerview height change not working

You need to change the stackView alignment to .center. Then you can add witdth and height anchors as needed as long as it satisfies the stackView conditions.

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    lazy var classLabel: UILabel = {
        let label = UILabel(frame: .zero)
        label.text = "Select Class"
        return label
    }()

    lazy var classPicker: UIPickerView = {
        let pickerView = UIPickerView(frame: .zero)
        pickerView.delegate = self
        pickerView.dataSource = self
        return pickerView
    }()

    lazy var chooseClass: UIStackView = {
        let stackView: UIStackView = UIStackView(frame: .zero)
        stackView.axis = .horizontal
        stackView.distribution = .fillEqually
        stackView.alignment = .center
        stackView.spacing = 10.0
        return stackView
    }()

    var dataSource = [1,2,3,4]

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .white

        view.addSubview(chooseClass)
        chooseClass.translatesAutoresizingMaskIntoConstraints = false
        chooseClass.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        chooseClass.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        chooseClass.heightAnchor.constraint(equalToConstant: 50).isActive = true
        chooseClass.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width).isActive = true

        classPicker.heightAnchor.constraint(equalToConstant: 30).isActive = true
        chooseClass.addArrangedSubview(classLabel)
        chooseClass.addArrangedSubview(classPicker)
    }

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

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

    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        let label = UILabel()
        label.text = String(dataSource[row])
        label.font = UIFont.systemFont(ofSize: 12, weight: .medium)
        return label
    }

}

I have used viewForRow delegate because at height 30 the titles using titleForRow are cropped at the top and bottom. You should take care of alignment issues, etc. This does what you ask - change the height of the pickerView to 30 while maintaining the stackView height.

Can i change UIPickerView separator height?

Change the line view's height in the pickerView's delegate method:

public func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
    for view in pickerView.subviews {
        if view.frame.size.height < 1 {
            var frame = view.frame
            frame.size.height = 2
            view.frame = frame
            view.backgroundColor = UIColor.black
        }
    }

    let label = UILabel()
    label.text = "Test Text" //remember to change it to the real data
    label.textAlignment = NSTextAlignment.center
    return label
}

Remember to set PickerView's delegate:

self.pickerView.delegate = self //or do this in XIB or Storyboard.

The effects:

Changing UIPickerView row height

In the documentation for the UIPickerView, you have a link to the UIPickerViewDelegate protocol. There is a method that you can implement, pickerView:rowHeightForComponent:.

---

Related Topics