---
title: Stack Views
tags: uikit
---

# Constraints without constraints: enter `UIStackView`

Stack views provide an easy way to leverage the power of UIKit's constraints without introducing their complexity. A single stack view defines a row or column of user interface elements. The stack view arranges these elements based on its properties:

* `Orientation` -- defines the stack view’s orientation, either vertical or horizontal.
* `Distribution` -- defines the layout of the views along the axis.
* `Alignment` -- defines the layout of the views perpendicular to the stack view’s axis.
* `Spacing` -- defines the space between adjacent views.

You can nest stack views inside other stack views to build more complex layouts.

In general, use stack views to manage as much of your layout as possible. Resort to creating constraints only when you cannot achieve your goals with stack views alone.

# Usage

`UIStackView` will only arrange subviews specifically marked as "arranged".

To add an arranged subview, use the `AddArrangedSubview(UIView)` method.

To start or stop arranging an existing subview in the `UIStackView`, use the `StartArrangingSubview(UIView)` and `StopArrangingSubview(UIView)` methods respectively.

To completely remove a subview that is being arranged by the `UIStackView`, simply remove it as normal using the `UIView.RemoveFromSuperview()` method.

# Constraining

When using `UIStackView`, it is important to not add any potentially clashing constraints to its arranged subviews. For example, in a vertical stack view with `Fill` distribution and `Fill` alignment, you may want to add some horizontal margin to one of the subviews. However, this is wrong -- the `Fill` alignment will already add horizontal constraints to that subview, which will most likely clash with your own constraints.

To solve the above problem, you can embed your subview in a `UIView`, and then constrain the inner view as you wish, adding some horizontal margin.

# Distribution

The `Distribution` property defines the layout of the views along its `Orientation` axis.

## `Distribution.Fill`

A layout where the stack view resizes its arranged views so that they fill the available space along the stack view's axis. When the arranged views do not fit within the stack view, it shrinks the views according to their compression resistance priority. If the arranged views do not fill the stack view, it stretches the views according to their hugging priority.


## `Distribution.FillEqually`

A layout where the stack view resizes its arranged views so that they fill the available space along the stack view's axis. The views are resized so that they are all the same size along the stack view's axis.


## `Distibution.EqualSpacing`

A layout where the stack view positions its arranged views so that they fill the available space along the stack view's axis. When the arranged views do not fill the stack view, it pads the spacing between the views evenly. If the arranged views do not fit within the stack view, it shrinks the views according to their compression resistance priority.


# Alignment

The `Alignment` property defines the layout of the views perpendicular to the stack view’s `Orientation` axis.

## `Alignment.Fill`

A layout where the stack view resizes its arranged views so that they fill the available space perpendicular to the stack view's axis.


## `Alignment.Leading`

A layout where the stack view aligns the left edge of its arranged views along its left edge (for horizontal stacks) or the top edge of its arranged views along its top edge (for vertical stacks).


## `Alignment.Trailing`

A layout where the stack view aligns the right edge of its arranged views along its right edge (for horizontal stacks) or the bottom edge of its arranged views along its bottom edge (for vertical stacks).


## `Alignment.Center`

A layout where the stack view aligns the center of its arranged views with its center along its axis.