SwiftUI — Basic components

A simple introduction to UI components in SwiftUI

Lucas Pelizza
Jul 27, 2019 · 4 min read
Image for post
Image for post

I’m going to present a series of UI components using SwiftUI. Each component will be described in a few simple lines. You might find this article useful as a guide.

Contents

  • User Inputs: Toggle, Slider, TextField, picker, datePicker and SegmentedControl

Toggle

The purpose of Toggle is simple: it is used to bind a property. In some cases, we can use it to alter the screen, showing or hiding other views.

SwiftUI — Toggle
Image for post
Image for post
iPhone screenshot

TextField

To use a TextField we just need to specify a placeholder(String) and a binding.

SwiftUI — TextField
Image for post
Image for post

Picker

Picker has a plus in SwiftUI. Using it inside a Form the app will navigate to a detail view with the option list.

If we want to show the picker with the classic inline style, we just add the line .pickerStyle(.wheel).

SwiftUI — Picker
Image for post
Image for post

Segmented Control

Segmented control is a nice tool to show different views on the same screen.

SwiftUI — SegmentedControl
Image for post
Image for post

Containers

ScrollView

Implement it via the ScrollView view:

SwiftUI — ScrollView
Image for post
Image for post

List of Items

To show a table in SwiftUI we should use a List view. The List can show static or dynamic content based on your needs. However, it is simple to use because we don’t need to write a lot of code to register the cell or to tell it how many rows there are, etc.

Using an array of objects (identifiable protocol) and a subview inside the content block:

SwiftUI — List
Image for post
Image for post

Form

SwiftUI’s forms work as containers, so we can add other views inside them and they will automatically adapt their behaviour and styling.

We can separate input components with the Section view:

SwiftUI — Form
Image for post
Image for post

Presentation

This section shows some of the methods we have to present the information.

Alert

To create a simple alert we must define a title and message, and add a dismiss button.

To show the alert we add a bindable condition that determines whether the alert should be visible or not.

For example, the following code uses a showingAlert (Boolean) that tracks whether the alert should be shown or not:

SwiftUI — Alert
Image for post
Image for post

ActionSheet

The ActionSheet has the same implementation as Alert.

SwiftUI — ActionSheet
Image for post
Image for post

Popover

Following the same logic that Alert uses, if we want to show a popover we have to pass a boolean Binding to control the visibility of the Popover and specify the content:

SwiftUI — Popover
Image for post
Image for post

SwiftUI Application

If you want to see the previous examples and other components of SwiftUI, I have created an example project where we can see how to create an application using SwiftUI. This is the repository link: https://github.com/lucasPelizza/SimpleSwiftUIExample/tree/master

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
SwiftUI Examples

Final words

I hope that this article was helpful for you!

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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