How to create a UIView that dynamically adapts to its contents

Oscar de la Hera Gomez
Two flowers that represent Swift and XCode with the text "Dynamically Size UIView to Fit Content" beneath them.

A step by step guide on creating a UIView that dynamically changes its width and height to fit the text within it.

The following tutorial uses our Open Source Swift Starter Project to walk you through how to create a UIView that adapts to the size of a UILabel, whilst making sure that the UIView does not stretch past a maximum width.

An image showing three screenshots of an iPhone in portrait. Each of the screenshots uses different text and serves to represent how the UIView dynamically adapts to fit the text.

We recommend that you clone our Open Source Swift Starter Project, checking out the main branch and carrying out the steps below. The changes can be found on the tutorial/custom/dynamic-uiview branch.

git clone git@github.com:delasign/swift-starter-project.git

Step One: Add the Content

A screenshot of XCode showing the updates to the language content that are carried out in this step.

The following step is intended to create three sample strings that will be consumed by the application.

This step builds on our Localization tutorial which is available below and follows our methodology that allows apps to be created for multiple languages.

A | Create the UIContent

A screenshot of the UIContent.swift file with a highlight on the two sample strings that were added ("sampleStringII" and "sampleStringIII").

Add your content to the UIContent.swift file, found under Model/LanguageContent/Content.

In our case we have added two additional sample strings to the existing sample string.

B | Add Strings

A screenshot of Xcode showing the new language json files with the updated strings. We have highlighted their location - they fall under Models/LanguageContent/Strings.

Add the relevant strings to en.json and es.json found under Model/LanguageContent/Strings.

Step Two: Add the Attributed Style

A screenshot of Xcode showing the adaptation that we made to the attributed file. We have highlighted its location - it falls under Coordinators/Styleguide.

As part of this step, we modified a previously created custom attributed style.

For more information on how to create these or why we use them, please consult the articles below.

Step Three: Create the UIView

A screenshot of Xcode showing the 6 files that we create in this step side by side.

The following step demonstrates how to create a custom UIView that adapts its size to fit its content. This content updates every time the user touches the screen and dynamically animates to fit the size.

To do this we create a series of files, which are structured to boost developer performance as well as to help identify where functionality lies within a view.

A | Create the declaration file

A screenshot of Xcode showing the DynamicUIView.swift file, the code is available below.

Under UI/Components, create a new folder called DynamicUIView.

Within the newly created DynamicUIView folder, create a new file called DynamicUIView.swift and paste in the code below.

This file is responsible for declaring the UIView and all the variables that are required as well as setting up all the functionality.

B | Create the UI Extension

A screenshot of Xcode showing the DynamicUIView+UI.swift file, the code is available below.

In the newly created DynamicUIView folder, create a new file called DynamicUIView+UI.swift, and paste in the code below.

This is responsible for adding the label to the view and setting the maximum width for the label (150 px).

C | Create the Notifications Extension

A screenshot of Xcode showing the DynamicUIView+Notifications.swift file, the code is available below.

In the newly created DynamicUIView folder, create a new file called DynamicUIView+Notifications.swift, and paste in the code below.

This code is responsible for detecting when the LanguageCoordinator makes the content available, and updates the view to its initial state by calling update, which is defined in Part F.

D | Create the Touches Extension

A screenshot of Xcode showing the DynamicUIView+Touches.swift file, the code is available below.

In the newly created DynamicUIView folder, create a new file called DynamicUIView+Touches.swift, and paste in the code below.

This code is responsible for handling the logic on when the user touches the view, as well as calling all associated animations.

E | Create the Animation Extension

A screenshot of Xcode showing the DynamicUIView+Animations.swift file, the code is available below.

In the newly created DynamicUIView folder, create a new file called DynamicUIView+Animations.swift, and paste in the code below.

This code is responsible for managing all the animations for the touch states.

F | Create the Update Extension

A screenshot of Xcode showing the DynamicUIView+Update.swift file, the code is available below.

In the newly created DynamicUIView folder, create a new file called DynamicUIView+Update.swift, and paste in the code below.

This code is responsible for managing the change in copy, as well as animating the UIView to the new size.

Please note that we have chosen to make the UIView width constant due to the size of the labels but had the strings been shorter, you could have opted to animate the width as well as the height.

Step Four: Setup the UIView

A screenshot of Xcode showing the code alterations that were made to the CustomUIVIew.swift and CustomUIVIew+UI.swift extensions.

The following step details how to add the DynamicUIView to the CustomUIView.

Please note that we have removed all the label functionality and altered the background color. This change in functionality is not described as part of this tutorial.

A | Declare the DynamicUIView

A screenshot of CustomUIView.swift with a highlight on where we declared the DynamicUIView.

Under UI/Screens/CustomUIView, in the CustomUIView.swift file, declare the DynamicUIView.

B | Add the DynamicUIView

A screenshot of CustomUIView+UI.swift showing how we added the DynamicUIView to the CustomUIView. Code available below.

Under UI/Screens/CustomUIView, in the CustomUIView+UI.swift file, add the DynamicUIView to the CustomUIView.

Step Five: Verify

An image showing three screenshots of an iPhone in portrait. Each of the screenshots uses different text and serves to represent how the UIView dynamically adapts to fit the text.

Run the app and tap the DynamicUIView to see how to alters size to fit the labels.

Any Questions ?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details