UIPickerView
iOS Development
Swift Programming
User Interface
Mobile App Design

How to change UIPickerView height

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

UIPickerView does not expose a simple public property like pickerHeight = 120, which is why this question keeps coming up. In practice, you usually solve the problem by controlling row height, embedding the picker in a constrained container, or using a transform when you really want a visual scale effect.

Start With Row Height

If your real goal is to make the visible rows taller or shorter, use the delegate method pickerView(_:rowHeightForComponent:).

swift
1import UIKit
2
3final class PickerViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {
4    let picker = UIPickerView()
5    let items = ["Small", "Medium", "Large"]
6
7    override func viewDidLoad() {
8        super.viewDidLoad()
9        picker.dataSource = self
10        picker.delegate = self
11    }
12
13    func numberOfComponents(in pickerView: UIPickerView) -> Int { 1 }
14
15    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
16        items.count
17    }
18
19    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
20        items[row]
21    }
22
23    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
24        28
25    }
26}

This is the most supported customization point because it changes the row sizing rather than fighting the picker's overall layout behavior.

Constrain the Picker in a Container

If the layout must occupy a specific vertical space, wrap the picker in another view and constrain that container.

swift
1let container = UIView()
2let picker = UIPickerView()
3
4container.translatesAutoresizingMaskIntoConstraints = false
5picker.translatesAutoresizingMaskIntoConstraints = false
6
7container.addSubview(picker)
8
9NSLayoutConstraint.activate([
10    container.heightAnchor.constraint(equalToConstant: 140),
11    picker.topAnchor.constraint(equalTo: container.topAnchor),
12    picker.bottomAnchor.constraint(equalTo: container.bottomAnchor),
13    picker.leadingAnchor.constraint(equalTo: container.leadingAnchor),
14    picker.trailingAnchor.constraint(equalTo: container.trailingAnchor)
15])

This does not mean UIKit guarantees a totally custom native picker geometry, but it does let the picker participate in the surrounding layout in a predictable way.

Use a Transform Only for Visual Scaling

You will sometimes see code that scales the picker vertically:

swift
picker.transform = CGAffineTransform(scaleX: 1.0, y: 0.8)

This changes the visual appearance, but it also scales text and interaction areas, so it should be treated as a workaround rather than a first-choice API. It can be acceptable for tightly controlled designs, but it is more fragile than delegate sizing.

Know What You Are Really Changing

There are three different goals people often confuse:

  • Change the row height
  • Change the amount of screen space the picker occupies
  • Visually squash or stretch the control

These are not the same thing. If you only want denser rows, use the delegate. If you want the picker to fit a shorter layout region, use container constraints. If you want a visually scaled control, use a transform and accept the tradeoffs.

If the design is far from the native picker look, it may be cleaner to build a custom wheel-like control rather than forcing UIPickerView beyond its intended layout model.

Common Pitfalls

  • Expecting a direct UIPickerView height property leads to frustration because UIKit does not offer one.
  • Using a transform without testing touch behavior and text readability can create subtle UI issues.
  • Ignoring rowHeightForComponent means reaching for hacks when a supported delegate method already solves the real problem.
  • Constraining the picker aggressively without testing on multiple device sizes can cause awkward layouts or clipping.

Accessibility settings should be tested too, because compressed pickers can become harder to read quickly.

Summary

  • Use pickerView(_:rowHeightForComponent:) when the goal is to change row sizing.
  • Use a container view and Auto Layout when the picker must fit a specific region of the screen.
  • Use transforms only when you intentionally want a visual scale effect.
  • Be clear about whether you are changing row geometry, layout space, or rendered appearance.

Course illustration
Course illustration

All Rights Reserved.