AutoLayout
iOS Development
User Interface
UIView
Resizing Views

autolayout - make height of view relative to half superview height

Master System Design with Codemia

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

Introduction

In Auto Layout, making one view half the height of its superview is a ratio constraint problem. You do not set a raw frame value. You create a height constraint that relates the child view's height anchor to the parent view's height anchor with a multiplier of 0.5. Once that relationship exists, the layout stays adaptive across screen sizes and rotation.

Use an Equal-Height Constraint with a Multiplier

The core constraint is straightforward in code.

swift
1import UIKit
2
3let parentView = UIView()
4let childView = UIView()
5
6parentView.addSubview(childView)
7childView.translatesAutoresizingMaskIntoConstraints = false
8
9NSLayoutConstraint.activate([
10    childView.leadingAnchor.constraint(equalTo: parentView.leadingAnchor),
11    childView.trailingAnchor.constraint(equalTo: parentView.trailingAnchor),
12    childView.bottomAnchor.constraint(equalTo: parentView.bottomAnchor),
13    childView.heightAnchor.constraint(equalTo: parentView.heightAnchor, multiplier: 0.5)
14])

This tells Auto Layout that childView.height should always equal half of parentView.height.

Remember That Position Still Needs Constraints

A height ratio alone does not tell Auto Layout where the view belongs horizontally or vertically. You still need enough additional constraints to determine position.

That is why the example also pins leading, trailing, and bottom anchors. Without those, the system may know the height but still consider the layout ambiguous.

Interface Builder Uses the Same Idea

If you build the interface visually, the underlying concept is identical. Add a height constraint from the child to the superview and set the relation multiplier to 1:2 or the equivalent half-height ratio in the constraint inspector.

The important part is to create a relative constraint, not a fixed constant height. A fixed constant may look correct on one device and break on another.

Multipliers Are Immutable

One detail that surprises developers is that you cannot change a constraint multiplier directly after creation. If the ratio must change dynamically, you generally remove the old constraint and create a new one.

That is an Auto Layout limitation worth remembering when the design calls for switching between one-third height, half height, and full height at runtime.

Safe Areas and Container Choice Matter

Sometimes the real requirement is not half of the full superview height, but half of the safe-area region or half of a container inside a stack of views. In that case, attach the constraint to the appropriate container rather than blindly using the outermost parent.

This is especially important on devices with notches, toolbars, tab bars, or embedded child controllers. The wrong reference view can make the ratio technically correct but visually wrong.

Avoid Mixing Frames and Constraints

If Auto Layout is active, manually setting frame.size.height for the same view is usually the wrong move. The constraints will win at layout time, and the manually assigned frame may be overwritten.

That is why ratio-based sizing should stay in the constraint system from start to finish. Mixing frames and constraints typically makes layout harder to reason about, not easier.

The more adaptive the screen needs to be, the more important that consistency becomes. Constraint-based layout is most useful when it remains the single source of truth.

Common Pitfalls

  • Setting a fixed height constant when the requirement is a relative height.
  • Creating the height ratio but forgetting the position constraints, which leaves the layout ambiguous.
  • Attaching the ratio to the wrong container or ignoring the safe area.
  • Trying to mutate a constraint multiplier directly after creation.
  • Mixing manual frame changes with Auto Layout constraints on the same view.

Summary

  • Use a height-anchor constraint with a multiplier of 0.5.
  • Add enough other constraints to fully determine the child view's position.
  • Prefer relative constraints over fixed constants for adaptive layouts.
  • Recreate the constraint if the multiplier must change at runtime.
  • Make sure the reference container is the one you actually mean visually.

Course illustration
Course illustration

All Rights Reserved.