How to add keyboard toolbar actions in SwiftUI

SwiftUI contains a clever mechanism for adding toolbar actions. With one view modifier - toolbar, we can control toolbar items in different places of the application. It doesn’t matter that you want to add a toolbar to the macOS navigation bar, iOS navigation bar, or iOS bottom bar; you will …

How to add keyboard toolbar actions in SwiftUI

SwiftUI contains a clever mechanism for adding toolbar actions. With one view modifier - toolbar, we can control toolbar items in different places of the application. It doesn’t matter that you want to add a toolbar to the macOS navigation bar, iOS navigation bar, or iOS bottom bar; you will …

How to expand and collapse cells in SwiftUI

Animations are a crucial but often neglected part of good UI. Correctly used can guide used in the app. In this article, you will learn how to make a list cell that expands on tap and apply animation to it. We will create a simple Todo List with subtasks. Models First of all, let’s make a …

How to expand and collapse cells in SwiftUI

Animations are a crucial but often neglected part of good UI. Correctly used can guide used in the app. In this article, you will learn how to make a list cell that expands on tap and apply animation to it. We will create a simple Todo List with subtasks. Models First of all, let’s make a …

How to dim Image for dark mode using ColorScheme

If you are using defaults colors for text and backgrounds, iOS/macOS handles dark mode literary by itself. But sometimes, you want to go with your style to make a brand more appealing or differentiate from the competition. Adjusting to dark mode required more work then, but still, the framework …

How to dim Image for dark mode using ColorScheme

If you are using defaults colors for text and backgrounds, iOS/macOS handles dark mode literary by itself. But sometimes, you want to go with your style to make a brand more appealing or differentiate from the competition. Adjusting to dark mode required more work then, but still, the framework …

How to add Pull to Refresh to the SwiftUI view

Pull to Refresh is a widespread UX pattern on mobile. Drag a list down and load new items. You can find that in all social media applications and almost all other apps that display data download from servers. To achieve this in previous versions of SwiftUI, you will have to use UIKit code, create …

How to display images from the web using AsyncImage

Each WWDC brings lots of new goods for all Apple ecosystem developers. The 2021 edition wasn’t different. AsyncImage view is a new SwiftUI addition that expects a URL instead of an asset to display images. Read further to learn how to use it. Displaying images from the web is a widespread task …

How to change the Button view style

Button, as one of the most common UI elements, is used for versatile sets of actions. But actions can have a different level of importance. Sometimes you want to highlight the primary activity or mark the destructive one in red. You can do this by wrapping the Button view in a custom view, but …

How to control Image view interpolation in SwiftUI

When you are scaling up (and down) a small image in SwiftUI, there is an operation called interpolation. The size of a current image pixel is calculated based on neighbor pixels. It gave a more natural and better-looking effect, but it also means that the image appears blurry (look at the first …

How to display alerts in SwiftUI

If you are an iOS or macOS user, you have seen alerts many times. Alerts are components that inform you about some errors or ask about some destructive actions. It would be best if you were careful not to overuse them in your app because it may distract users. SwiftUI offers a structure that makes …

How to synchronize View and Model with SwiftUI's EnvironmentObject

SwiftUI offers an easy way to inject your model classes into a view hierarchy. Additionally, it handles model changes pretty automatically, and only a tiny amount of additional code is needed from your side. In this article, I’ll explain how to provide and retrieve @EnvironmentObject anywhere …

How to create your own property wrapper

Swift (SwiftUI in particular) commonly uses property wrappers to make repeatable operations easier. For example, the @State is used for observing and storing view state, and @AppStorage to store app parameters using local persistence. Learn how to use AppStorage to access UserDefaults in SwiftUI. …

How to disable button in SwiftUI

In your SwiftUI applications, you will often use the Button view. This interactive control is used to build simple user inputs. But in this article, you will learn how to disable buttons. Think about a situation as follow - you have three different options, but some of them are only active when the …

How to display a scrollable list using the List view

List view is a container that can present a scrollable list of views in SwiftUI. You can adjust its look, and it supports versatile actions and change its style depending on the platform. This article will learn how to use the List to display navigation links, data from an array and use ForEach and …

How to display UIKit view in SwiftUI using UIViewRepresentable

One of the biggest arguments in favor of using SwiftUI in production apps is the interoperability of UIKit. If you have a problem with achieving something with pure SwiftUI, you can always use UIViewRepresentable to wrap UIKit view and put it in the SwiftUI app only in dozen lines of code. How to do …

How to add rounded corners in SwiftUI

Rounded corners, like many other things in SwiftUI, can be added in few different ways. In this article, you will learn the simples one and one more sophisticated that you may find helpful in some circumstances. Let’s start. ViewModifier The easiest way to add rounded corners to any view is by …

How to style Text view in SwiftUI

You can style SwiftUI Text views with a bunch of dedicated ViewModifiers. Learn about them in this article. How to apply italic text style? You can switch the font to cursive using the italic modifier. Text("italic") .italic() How to apply bold text style? The bold view modifier will make …

How to display swipeable pages in SwiftUI

Swipeable pages, often used for application onboardings, can be easily made using SwiftUI TabView. In this tutorial, you will learn how to create a view like the one presented in the (low-quality) GIF below. When you see TabView's name, the first you may think is a tab bar navigation like the one …

How to use ZStack to create a chat bubble

ZStack is one of the basic building blocks of SwiftUI applications. Along with HStack and VStack, you will use them frequently. This article will explain what ZStack is and how to use it to build a crucial part of every chat UI - a chat bubble. So what is this view with the strange name ZStack? …

How to apply text modifiers based on a view state

I saw the “How to optionally make a Text italic?” question on Reddit, and I thought it would be good material for a short article. From this tutorial, you will learn how to prepare a conditional italic modifier. Additionally, you will find out how to make more generic modifiers to …

How to store a Date using AppStorage

By default, @AppStorage property wrapper supports Int, String, Double, Data, or URL values. You can store other classes/structs/enums if you make them conform to the RawRepresentable protocol. This tutorial will learn how to keep Dates in UserDefaults handled by @AppStorage. Learn basics of …

How to use EnvironmentObjects with SwiftUI Live Preview

SwiftUI views in larger applications may use some configuration passed to them as environment objects. It is a very beneficial way when the config is needed somewhere deep into a view tree. If your view uses the @EnvironmentObject property wrapper, you can still debug and tweak it using live preview …

How to add home screen Quick Actions to SwiftUI app

A long-press or force touch on the iOS app icon brings a menu called home screen Quick Actions. Developers can put up to 4 buttons there for compelling, high-value tasks. It is a UIKit functionality, but you can use that in your SwiftUI app, too. How to add Quick Action? There are two kinds of quick …

How to display SwiftUI view in Swift Playgrounds

One of the most significant advantages of cross-platform frameworks like React Native or Flutter is hot reloading. During development, you can see recent code changes without recompiling and rebuilding. SwiftUI offers a similar but somehow limited functionality called live preview. It works only for …