let’s dev GmbH & Co. KG - The brand for groundbreaking custom software

Blog

Top!

let’s dev | Scroll to top
let’s dev | Scroll to next content item

Hello

let’s dev | Scroll to previous content item
let’s dev Blog | Swift UI - Simple and fast implementation of user interfaces
by Tobias
02. März 2020

Swift UI - Simple and fast implementation of user interfaces

During WWDC 2019, SwiftUI was introduced, a completely new way of UI development. The goal of this new method is primarily the simple and fast implementation of user interfaces that are needed in virtually every app. These include lists or structured arrangements of standard iOS elements such as texts, buttons or pickers.

The developer should spend as little time as possible developing components of this type and be able to achieve a good result much faster. Due to the significant reduction in lines of code and better readability, components can be customized much faster and easier. In addition, SwiftUI supports different device types, drag and drop or dark mode without any additional effort.

Project setup with SwiftUI

When creating a new project in Xcode, the Swift UI functionality must be enabled from the start. Xcode then automatically generates not only the AppDelegate, but also a SceneDelegate class. Furthermore, necessary properties are created directly in the Info.plist.

The SceneDelegate provides functions to set the view at app startup and also other events. A UIScene object is passed, for which a view is defined and set. In Unlike the use of xib-files or storyboards, the window must be created with the help of the passed Scene itself. As usual, the window is given a rootViewController. When using Swift UI, a UIHostingController must be used instead of a normal ViewController. The content of this controller corresponds to a view whose content is to be displayed. Finally, the newly created window is displayed on the screen.

SwiftUI provides an interface view from which all classes that are to display content on the screen must be derived from it. Each of these view classes contains an instance variable body. This is defined by the developer by creating a new view with arbitrary content. All elements in this view are then displayed later. Each of these views can also contain other elements derived from the view. Thus complex surfaces can be structured simply, while the components are structured separately and the code becomes much clearer.

First steps

In the SceneDelegate you define which content is displayed. Xcode initially generates a ContentView class that contains sample text. An instance of this class is created and displayed at runtime. If the code of the ContentView is changed, the customized content appears after a start of the app. In addition, Xcode displays a preview on the right side next to the source code, allowing the developer can see in real time what the user interface will look like later in the app.

In a first attempt, we add some lines to the definition of the body instance variable.

SwiftUI first elements

We start with a VStack, a Vertical StackView in SwiftUI. This is necessary to be able to add multiple elements to the body, which may consist of only one view element. We also add a text and an image in this VStack. In real time, we can see what the view will look like.

Since the text is still too small, we want to adjust the font. Attributes of each UI element can be easily attached to the respective initialization and are called modifiers. In addition, we also change the color of the text in this course. This looks like this:

SwiftUI first elements attributed

After adjusting the text, the image still looks too small. We could add the same modifiers to this element as well. However, SwiftUI also allows us to add modifiers to all elements within a structure. Thus, we can move the modifiers and put them on the VStack instead.

SwiftUI first elements stack attributed

After the last modification, all elements within the stack get the defined modifiers. Now we want to add a background to the text. For this we define a background, adjust the cornerRadius and add padding. In the preview you can immediately see that the displayed result is not what you would expect.

SwiftUI first elements wrong cascade

The reason for this is the order of the modifiers. First we adjust the cornerRadius, which is not visible without a special background. The background can be seen, but it is defined after the cornerRadius and therefore appears without rounded corners. The padding is added last which only creates a space between the text and the image and does not increase the size of the actual background becomes larger. After correcting the order, the result looks like this:

SwiftUI first elements correct cascade

To display the elements within the VStack object not centered, but for example at the very top or at the very bottom, just add a Spacer() element at the appropriate position. This element takes the remaining space that the other elements do not need.

Library

To simplify the whole process, Xcode provides a library that combines all views and modifiers. This makes it very easy to add new elements and modifications via drag & drop.

SwiftUI library SwiftUI library modifiers

Preview

Within each View object or ViewController class, previews can be created that determine which and how many previews are displayed. For example, a preview of different devices or the dark mode can be created. Preview offers very many and complex application possibilities. In this article, we will only briefly discuss Preview to show the advantages for development with SwiftUI.

SwiftUI preview code SwiftUI preview visuals

In the example above, two previews are displayed. The first is a PreviewLayout for which a fixed size is defined. The second view is a specific device that is displayed in Dark Mode. Multiple previews must be grouped together because, again, the Previews value consists of only one view.

The preview function is very helpful and prevents that the app has to be started again and again to see the result. This is especially beneficial for views that can only be reached by many clicks in an app. Also, each preview offers a small button that activates a live preview. With the help of this function, a view can be used interactively without having to start the app on a device.

Example of a list with custom view elements

In the following example we want to display a list of elements. To do this, we first create a cell that determines the content of all the list items. Then we can use this cell in our ContentView. We also create a container class that will provide us with the necessary data. We start with the Container Developer.

SwiftUI developer container

In this simple class we define a few values that we can later populate and use in the views. For the container to be used for a list in SwiftUI, it must implement the interface Identifiable. This way we ensure that each instance of this class can be uniquely identified later. For this we also add a UUID value that guarantees this uniqueness. If we are in DEBUG mode, we create test data to be able to use it directly in the preview.

The first view we need is a DeveloperCell. This should display the values of a single developer instance.

SwiftUI developer cell

The cell has an instance of the Developer class whose values it displays. The base of our view is an HStack in which elements are arranged horizontally. With an icon and a text we display an image and the name of the respective developer. If the developer is not available, we also color the text and the icon gray.

We represent a rating by displaying the image of a star multiple times, depending on the integer value rating. To do this, we create an image with a star using a ForEach block. The color of the star is yellow or gray depending on the availability. The brightness we vary depending on the height of the rating. To the complete cell we add a small padding. For the preview of our cell we define a new instance Developer, which we fill with sample data.

We design the ContentView so that it receives a list of Developer instances and displays their content using the created cell.

SwiftUI developer content view

We use List(developers) to be able to create one of our cells for each instance. Since we may want to customize each developer's data through the app in a further development step, we create a NavigationView as a top-level element that provides a NavigationBar and allows us to switch from this view to an underlying view.

The list gets an additional modifier navigationBarTitle, which we use to specify the title of the view. We also wrap each DeveloperCell instance in a NavigationLink. This element takes a destination. This destination must be a view to navigate to after a user interaction. For now, we simply define a text that displays the name of the respective developer.

If we launch the app now, we will see our list with the corresponding details of the developers. As soon as we select a cell, another view appears, on which only the name of the selected developer can be seen. The button at the top left takes us back to the overview.

SwiftUI developer detail view

A big advantage of SwiftUI is the handling of data. As soon as values of a developer instance change, the view is updated. Furthermore, SwiftUI registers when elements are added or deleted and updates the views automatically.

@State, @Binding and @Environment

When a view defines and controls a certain state, the created variable is tagged with the @State tag. Without this tag, a view can only read the value of a variable and cannot change it.

SwiftUI state code SwiftUI state off SwiftUI state on

The toggle we define changes our showMessage variable. We provide the variable with an additional $ symbol to signal a binding (more on this in a moment). Depending on the state of this value we show or hide a text.

If we now want to call another view and give it access to showMessage, we can do this with the @Binding tag. For example, if we create another view that only contains the toggle, but should still be able to change the state of the showMessage variable without owning it, this would be such a case. In the following example, we define ToggleView that contains the binding to showMessage and then use this view in the previously created MessageView.

SwiftUI binding toggle SwiftUI binding code

As we did for the toggle, we pass showMessage with an additional $ symbol that we need for a binding. The Toggle element also uses a binding internally on the variable that is passed in. Now when we launch the app, we can use the toggle to make the displayed message appear and also disappear.

If we want to access an environment variable within a view, we implement this with the help of the @Environment tag. This gives us access to the status variables of a view, such as isEnabled:

@Environment(\.isEnabled) private var isEnabled: Bool

Subsequently, this value can be used for each element within the view. The content of this variable changes as soon as the value of the actual environment variable changes. The view is automatically updated in such a case.

ZStack

The ZStack is a new element in SwiftUI. Just as the VStack arranges elements vertically and the HStack horizontally, a ZStack arranges all elements on top of each other. You use this element when you want to swap multiple views depending on certain conditions or switch views.

More articles from our blog

let’s dev Blog |

Technical

by Julian

2021-10-14

Read more
let’s dev Blog | Apple Developer Program: What is it used for and what content does it offer me as a member?

Corporate

Apple Developer Program: What is it used for and what content does it offer me as a member?

by Julian

2021-09-30

Read more
let’s dev Blog | Sketch, Figma & Co. - We take a look at the most popular UI and Prototyping Tools in 2021

Corporate

Sketch, Figma & Co. - We take a look at the most popular UI and Prototyping Tools in 2021

by Ellen

2021-07-15

Read more
let’s dev Blog | Tailwind: An innovative project for the future use of old wind turbines

Corporate

Tailwind: An innovative project for the future use of old wind turbines

by Karl

2021-06-24

Read more
let’s dev Blog |

Corporate

by Julian

2021-06-10

Read more
let’s dev Blog | Smart Prognosis of Energy with Allocation of Resources

Corporate

Smart Prognosis of Energy with Allocation of Resources

by Karl

2021-02-18

Read more
let’s dev Blog | Dasoman - Data-Sovereignty-Manager

Corporate

Dasoman - Data-Sovereignty-Manager

by Karl

2021-01-11

Read more
let’s dev Blog | We look back on the past months - And wish all the best for the coming year 2021!

Corporate

We look back on the past months - And wish all the best for the coming year 2021!

by Julian

2020-12-17

Read more
let’s dev Blog | iOS User Interface Tests

Technical

iOS User Interface Tests

by Nicolas

2020-11-12

Read more
let’s dev Blog | Adobe Max - Online for the first time

Corporate

Adobe Max - Online for the first time

by Julia

2020-10-29

Read more
let’s dev Blog | CAN2BLE

Technical

CAN2BLE

by Raphael

2020-09-24

Read more
let’s dev Blog | Mensch und Computer 2020 - Digital Change in the Flow of Time

Corporate

Mensch und Computer 2020 - Digital Change in the Flow of Time

by UX Team

2020-09-18

Read more
let’s dev Blog | Neumorphism – A new era of user interface design?

Technical

Neumorphism – A new era of user interface design?

by Julian

2020-08-13

Read more
let’s dev Blog | UX Research Part 3 - UX Methods

Technical

UX Research Part 3 - UX Methods

by Elena

2020-05-28

Read more
let’s dev Blog | UX Research Part 2 - What is UCD and what does User Research have to do with it?

Technical

UX Research Part 2 - What is UCD and what does User Research have to do with it?

by Elena

2020-04-23

Read more
let’s dev Blog | go-digital promotes establishment of home office workstations

Corporate

go-digital promotes establishment of home office workstations

by Karl

2020-03-19

Read more
let’s dev Blog | Google Passes - Card Management on Android Devices

Technical

Google Passes - Card Management on Android Devices

by Michelle

2020-03-12

Read more
let’s dev Blog | 100% code coverage in software testing - a reasonable goal?

Technical

100% code coverage in software testing - a reasonable goal?

by Raphael

2020-03-06

Read more
let’s dev Blog | In dialog with the business juniors - Exciting insights into business start-ups and digital transformation

Corporate

In dialog with the business juniors - Exciting insights into business start-ups and digital transformation

by Julian

2020-02-27

Read more
let’s dev Blog | Simplified testing of iOS push notifications in the simulator with Xcode 11.4

Technical

Simplified testing of iOS push notifications in the simulator with Xcode 11.4

by Manuel

2020-02-26

Read more
let’s dev Blog | National meeting of the consortium of the SPEAR research project at let's dev in Karlsruhe

Corporate

National meeting of the consortium of the SPEAR research project at let's dev in Karlsruhe

by Karl

2020-01-27

Read more
let’s dev Blog | UX Research Part 1 - Why User Research is so important

Technical

UX Research Part 1 - Why User Research is so important

by Elena

2020-01-23

Read more
let’s dev Blog | Dark Mode

Technical

Dark Mode

by Elisa

2020-01-09

Read more
let’s dev Blog | We wish you a Merry Christmas - And a Happy New Year!

Corporate

We wish you a Merry Christmas - And a Happy New Year!

by Julian

2019-12-20

Read more
let’s dev Blog | Exchange on the topic of digitization with the Business Club Luxembourg at the Embassy of Luxembourg in Berlin

Corporate

Exchange on the topic of digitization with the Business Club Luxembourg at the Embassy of Luxembourg in Berlin

by Karl

2019-12-17

Read more
let’s dev Blog | DaSoMan at the Internet+ Expo in Foshan (China)

Corporate

DaSoMan at the Internet+ Expo in Foshan (China)

by Karl

2019-12-13

Read more
let’s dev Blog | Google Play Console: Pre-Launch Reports

Technical

Google Play Console: Pre-Launch Reports

by Fabian

2019-12-11

Read more
let’s dev Blog | DevFest 2019 in Hamburg

Technical

DevFest 2019 in Hamburg

by Julian

2019-12-05

Read more
let’s dev Blog | Vernissage digital art in the media theater of the Humboldt University Berlin

Corporate

Vernissage digital art in the media theater of the Humboldt University Berlin

by Karl

2019-11-21

Read more
let’s dev Blog | World Usability Day 2019 in Karlsruhe - let's dev supports as main sponsor

Corporate

World Usability Day 2019 in Karlsruhe - let's dev supports as main sponsor

by Aileen

2019-11-11

Read more
let’s dev Blog | Gutted - Open Day at the Alter Schlachthof Karlsruhe 2019

Corporate

Gutted - Open Day at the Alter Schlachthof Karlsruhe 2019

by Julian

2019-09-26

Read more
let’s dev Blog | Mensch und Computer 2019 - Conference on User Experience and Usability in Hamburg

Corporate

Mensch und Computer 2019 - Conference on User Experience and Usability in Hamburg

by Elena

2019-09-17

Read more
let’s dev Blog | Business and Enterprise App Distribution on iOS

Technical

Business and Enterprise App Distribution on iOS

by Aileen

2019-08-05

Read more
let’s dev Blog | Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

Corporate

Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

by Karl

2019-07-17

Read more
let’s dev Blog | let's dev supports runners at the 7th KIT Championship

Corporate

let's dev supports runners at the 7th KIT Championship

by Karl

2019-07-05

Read more
let’s dev Blog | Automated testing of C++ code with Google Test and Google Mock - Part 2

Technical

Automated testing of C++ code with Google Test and Google Mock - Part 2

by Arne

2019-06-13

Read more
let’s dev Blog | Apple WWDC 2019: These are the highlights of the keynote

Technical

Apple WWDC 2019: These are the highlights of the keynote

by Nicolas

2019-06-05

Read more
let’s dev Blog | App Builders 2019

Technical

App Builders 2019

by Nicolas

2019-05-23

Read more
let’s dev Blog | Official opening of the Consolidation and Expansion Center (FUX)

Corporate

Official opening of the Consolidation and Expansion Center (FUX)

by Helena

2019-04-15

Read more
let’s dev Blog | Delegation from Nottingham to visit the Alter Schlachthof in Karlsruhe

Corporate

Delegation from Nottingham to visit the Alter Schlachthof in Karlsruhe

by Helena

2019-04-14

Read more
let’s dev Blog | The time has come: We are moving!

Corporate

The time has come: We are moving!

by Helena

2019-03-26

Read more
let’s dev Blog | Automated testing of C++ code with frameworks - part 1

Technical

Automated testing of C++ code with frameworks - part 1

by Arne

2019-02-20

Read more
let’s dev Blog | The app in the Google Play Store

Technical

The app in the Google Play Store

by Elisa

2019-01-24

Read more
let’s dev Blog | „UX Day“ 2018

Corporate

„UX Day“ 2018

by Aileen

2018-12-17

Read more
let’s dev Blog | let's dev supports SG Siemens volleyball players from Karlsruhe

Corporate

let's dev supports SG Siemens volleyball players from Karlsruhe

by Helena

2018-12-04

Read more
let’s dev Blog | SMEs shape digitalization - SME Conference 2018

Corporate

SMEs shape digitalization - SME Conference 2018

by Helena

2018-11-12

Read more
let’s dev Blog | Apple Wallet

Technical

Apple Wallet

by Maik

2018-10-26

Read more
let’s dev Blog | „Mensch und Computer“ 2018

Corporate

„Mensch und Computer“ 2018

by Judith

2018-09-24

Read more
let’s dev Blog | State Design Pattern in Android

Technical

State Design Pattern in Android

by Thomas

2018-09-17

Read more
let’s dev Blog | let's dev is an authorized consulting company in the „go-digital“ funding program

Corporate

let's dev is an authorized consulting company in the „go-digital“ funding program

by Helena

2018-09-01

Read more
let’s dev Blog | App Design & Development Conference 2018

Corporate

App Design & Development Conference 2018

by Helena

2018-08-14

Read more
let’s dev Blog | iOS 12: The top new features at a glance

Technical

iOS 12: The top new features at a glance

by Nicolas

2018-07-17

Read more
let’s dev Blog | let's dev at CEBIT

Corporate

let's dev at CEBIT

by Karl

2018-06-11

Read more
let’s dev Blog | Introduction to User Interface (UI) Testing with Espresso

Technical

Introduction to User Interface (UI) Testing with Espresso

by Raphael

2018-06-07

Read more
let’s dev Blog | The app in the Apple App Store: what information is needed?

Technical

The app in the Apple App Store: what information is needed?

by Aileen

2018-04-27

Read more
let’s dev Blog | Smart Pointer in C++

Technical

Smart Pointer in C++

by Matthias

2018-04-01

Read more
let’s dev Blog | User interface design for iPhone X: all innovations at a glance

Technical

User interface design for iPhone X: all innovations at a glance

by Helena

2018-02-07

Read more
let’s dev Blog | WebVR - Virtual Reality Experience in the Browser with the A-Frame Framework

Technical

WebVR - Virtual Reality Experience in the Browser with the A-Frame Framework

by Judith

2018-01-10

Read more
let’s dev Blog | Deutsche Bahn Open Data Hackathon

Corporate

Deutsche Bahn Open Data Hackathon

by Karl

2015-03-31

Read more
let’s dev Blog | Blur effects under iOS 7

Technical

Blur effects under iOS 7

by Katja

2014-04-24

Read more
let’s dev Blog | Beyond App Store - iOS application distribution

Technical

Beyond App Store - iOS application distribution

by Karl

2012-08-27

Read more
let’s dev Blog | Front-end architecture - Model View Presenter and Message Bus

Technical

Front-end architecture - Model View Presenter and Message Bus

by Karl

2011-03-08

Read more