Exploring UIStackView

How many UIStackViews exist in the following ViewController?

stackview_scene

– (Simple) Answer is : 5

But the question is tricky. Because UIStackViews are non-rendering subclass of UIView. They only allows you to layout a collection of views (Now: you can call these subviews ->[arrangedViews]) on two axis’s (vertical and horizontal). You can not see their visual properties. For instance, if you set a background color to a stackView, simply, it doesn’t make any effects on that stackView.

Real answer is 6 in the following scenario.

stackview_overall

stackviews_boxes
Colourful views on vertical & horizontal stack views. Dashed rectangles represent stack views.

+ Tidy view hierarchy : StackViews are good for organising your view hierarchy in interface builder. Normally, the order of your views in left pane doesn’t affect on your views if they are not placed on same location. While using UIStackViews as container views of your subviews, you must place your first view in first order.

It’s more readable and it makes easy to find a view in view hierarchy. It’s good for another developer which should make any addition to your previous work. 😀

stackview_leftbar
Easy to track down a view.

By selecting a UIStackView on interface builder and looking at its attributes on Attributes Inspector, you will see some special attributes for StackView: axis, alignment, distribution and spacing..

Additional attributes on StackView.png
Additional attributes for StackView : Axis, Alignment, Distribution, Spacing…

Let’s start exploring how things will change by changing these attributes. First create three views and color them. Then, we’ll use “Embed in Stack” button at bottom bar. By default, Xcode will create a vertical stack view for our views, can be seen as follows.

intostackview

Axis : Stack’s orientation

axisonstackview
Axis : Horizontal and Vertical Stack Views

Alignment

verticalstackviewalignment
Alignment types on Vertical Stack View
horizontalstackviewalignment
Alignment types on Horizontal Stack Views

Distribution

  • Fill : When there is a overflow or underflow situation. Available (or unavailable) space is shared according to compression resistance and hugging, if these rules are ambious, arrangement order is used.
  • Fill Equally : Items are same size. Overflow and underflow adjustments are shared equally among items. If there is available space, the largest intrinsicContentSized item gets this space area.
  • Fill Proportionally :Overflows and underflows are shared among items proportional to their intrinsicContentSizes.
  • Equal Spacing : Underflow spacing is shared equally by items. Overflow is controlled by compressionResistance.

  • Equal Centering : Center to center spacing is aimed as much as possible and also minimum edge-to-edge space is maintained within allowed area. Underflow spacing is shared equally by items. Overflow is distributed first according to compressionResistance properties.

Spacing

Spacing between arrangedSubViews. This is strict for Fill distributions and minimum for EqualCentering and EqualSpacing. If you want overlap you can use negative spacing values.

Compression Resistance and Hugging is important for StackView as well as for Autolayout.

Positioning and Sizing Stack View

+ Less constraints : A stack view allows you to layout its contents without using AutoLayout directly. But you still need to use AutoLayout to position the stack view, itself. By pinning at least two adjacent edges of the stack view, you can define its position.

Playing with Stack Views Programatically

You can simply add, remove and insert any view to a StackView programmatically. You can initialize a stackView by giving its initial subViews. There is no need to mention that these subViews can be any other stackViews too. 😉

let mainStackView = UIStackView(arrangedSubView: [headerView, contentView, footerView])

You can write a code to remove all items from stackView:

for view in mainStackView.arrangedSubViews{
   mainStackView.removeArrangedSubview(view)
   view.removeFromSuperView()
}

You can add these code block to an extension to UIStackView.

extension UIStackView{
   func removeAllArrangedSubViews{
       for view in mainStackView.arrangedSubViews{
          mainStackView.removeArrangedSubview(view)
          view.removeFromSuperView()
       }
   }
}

Last comments : StackViews are like additional layout helpers – like advanced LinearLayouts in Android. It’s great to have them after a good AutoLayout understanding. It makes things easier and cleaner.

If you have questions don’t hesitate to share them!
Have good day!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s