Dynamic Layouts in Swift

Santosh Rajan
Nov 7, 2014 · 4 min read

All the code in this article is available as a Github Project. https://github.com/santoshrajan/LayoutSwift

In Swift we use the Objective-C UIKit framework to layout components on the screen, using Storyboard, Constraints etc. In this article we will explore the possibilities of creating layouts without using Storyboards and Constraints, in Swift.

Most layouts will fall into one of the following three categories.

  1. Vertical Layout — Sub Views are laid out vertically one below the other.
  2. Horizontal Layout — Sub Views are laid out horizontally one after the other from left to right.
  3. A Combination of the above two layouts.

Create a Single View Application in Xcode and do the following in the viewDidLoad method.


And run it in the simulator and you should see something like below.

Few things to note here. The ViewController has a UIView object called view whose width and height are set to the full screen. (Gray Color). We also printed to the console the view’s frame. You should see the following in your console.


The above is for iphone 5s. The frames origin is (0.0,0.0) and width and height is (320.0,568.0).

The sub views are laid out relative to the superview. The problem with laying out sub views this way is that you need to know the absolute positions and you have no control over laying out on other screen sizes.

Vertical Layout

We can create a vertical layout by extending the UIView class. The code for the vertical layout is given below.


Add the code above to your project and edit viewDidLoad functions as below.


And run it in your emulator. You will get a screenshot as below.

Notice a couple of things.

  1. The vertical layout takes the height of it’s laid out components.
  2. The second view (veiw2) is positioned relative to the bottom of view1. (100, 50, 100, 100). Whatever the height and position of view1, view2 is place 50 pixels below view1.

Now rotate the view. And we have a problem. The vertical layout has its width set, but we want it to take the full width of the screen. Below is a Vertical layout that will always take the full width of the screen.

The VerticalScreenLayout


The VerticalScreenLayout sub classes the VerticalLayout and always takes the full screen width. Add the code above, to your project, and edit the the line that creates vLayout to

var vLayout = VerticalScreenLayout()

Now run the program and rotate the screen, you see VerticalScreenLayout taking the full width of the Screen.

The VerticalFitLayout


Add the above code to your project and edit viewDidLoad to the following.


And your screenshot should look like this.

The HorizontalLayout


Add the code above to your project and edit viewDidLoad to the following.


When you run your program you should see the following.

The HorizontalFitLayout


And here is how the above code looks on the simulator.

Note: These layout are not fully implemented, so you have to be careful of the following, if you use them. You cannot insert or remove subviews once the layout is set. If you need to do that, you will have to remove all the subviews and redo the layout again. You can use the removeAll function for that.

However I find a combination of these layouts very useful for my projects and they easily solve most of my layout problems.

An App Using the above Layouts

The whole screen is a VerticalScreenLayout, which contains a HorizontalLayout, UiTextView, HorizontalLayout Centered, UIImageView. The first HorizontalLayout contains a Vertical Layout within.And below is an image of how it is done.

Swift Programming

The Swift Programming Language

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store