Build beautiful animations that repeat in your apps

Phone over a blue backdrop
Phone over a blue backdrop
Photo by Al Hakiim on Unsplash.

With so much more support provided by Apple, animation in SwiftUI is a lot easier to achieve than in UIKit. I wonder if this will be a good or bad thing. Regardless, we need to make use of what is provided, right?

In this tutorial, you’ll learn how to perform a repeat animation in SwiftUI.

A repeat animation is basically an animation that repeats over and over again. Pretty self-explanatory. You can imagine it as having the same behaviour as a GIF that keeps repeating.

Prerequisites

To follow along with this tutorial, you’ll need some basic knowledge in:

  • Swift
  • At least Xcode…

Change tabs in your app with style

Two phone screens
Two phone screens
Photo by Charles Deluvio on Unsplash.

At the recent WWDC 2020, Apple introduced an additional style for TabView called PageTabViewStyle. This is equivalent to Horizontal Paging Scroll, which is commonly used for the onboarding screen.

“A TabViewStyle that implements a paged scrolling TabView.” — Apple Documentation

Prerequisites

To follow along with this tutorial, you’ll need some basic knowledge in:

  • Swift
  • At least Xcode 12+

Note: This only supports iOS 14+.

Getting Started With PageTabViewStyle

Let’s quickly set up four tabs on the TabView with the capabilities of showing a filled image when selected and an unfilled image when unselected.

To have that, you will need to have a state to know what is being…


Give your users the ability to set colors in your app in a whole new way

Image for post
Image for post
Photo by Robert Katzki on Unsplash

In the recent WWDC 2020, Apple introduced ColorPicker, where you’ll be able to let the user pick a color.

This will probably be very useful if your app allow users to pick a color — for either the text, background, or so on. Other than that, I still can’t think of why you’d need to implement this.

To follow along with this tutorial, you’ll need some basic knowledge in:

  • A basic familiarity with Swift
  • At least Xcode 12+
  • Only supports iOS 14+

Getting Started With ColorPicker

To begin, you’ll first need to have a State created, where you can store the value of the selected color. …


At WWDC 2020, Apple introduced a view that can play local videos or videos from a URL

Arm holding out a camera.
Arm holding out a camera.
Photo by Thomas William on Unsplash.

Disclaimer: You won’t be able to use videos from YouTube.

“A view that displays the video content from a player object along with system-supplied playback controls.” — Apple Developer

Prerequisites

To follow along with this tutorial, you’ll need some basic knowledge in:

  • Swift
  • At least Xcode 12+

Note: This only supports iOS 14+.

Getting Started With VideoPlayer

To begin, you will first need to import the required module:

import AVKit

For the purpose of illustration, I will download the Nyan Cat video from YouTube, which will have an mp4 extension. The file will then be placed inside the project as shown below. …


Recommend other apps to users and let them download the app instantly

Triangular geometric shapes.
Triangular geometric shapes.
Photo by Shapelined on Unsplash.

At WWDC 2020, Apple introduced SKOverlay with which you can recommend other apps to users and allow them to download the app immediately.

Do note that you will not be able to use this on an app extension.

SKOverlay is super useful to advertise your other apps to users.

“A class that displays an overlay you can use to recommend another app.” — Apple Developer

Prerequisites

To follow along with this tutorial, you’ll need some basic knowledge in:

  • Swift
  • At least Xcode 12+

Note: This only supports iOS 14+.

Getting Started With SKOverlay

To begin, you will need to import the required framework:

import StoreKit

Then create a State to hold a bool


An introduction to ScrollViewReader

Image for post
Image for post

In the recent WWDC 2020, Apple introduced ScrollViewReader. This is one of the features that a lot of us have been looking forward to due to the lack of support that was found for scrolling in SwiftUI 1.

As many of us are aware, there wasn’t any built-in support to scroll to a specific row in SwiftUI 1. There’s probably multiple different hacky ways of doing it with a bunch of code written by different people on Stack Overflow, but isn’t it a lot better if it can be done with just a line of code?

With ScrollViewReader, you’ll now be able to scroll to any row with the use of index. …


In the recent WWDC 2020, Apple introduced an LazyVGrid. You may think of it as a Vertical Scrolling Collection View.

A lot of the developers were finding that SwiftUI was missing the support of CollectionView when it was first introduced. With the release of LazyVGrid, you may now mimic the same behaviour as UICollectionView in UIKit.

A container view that arranges its child views in a grid that grows vertically, creating items only as needed

Apple Documentation

Prerequisites

To follow along this tutorial, you’ll need some basic knowledge in:

  • A basic familiarity with Swift.
  • At least Xcode 12+
  • Only supports iOS…

Think of them as horizontal scrolling CollectionViews

Image for post
Image for post
Photo by Paweł Czerwiński on Unsplash.

At the recent WWDC 2020, Apple introduced a LazyHGrid. A lot of developers found that SwiftUI was missing the support of CollectionView when it was first introduced. With the release of LazyHGrid, you may now mimic the same behaviour as UICollectionView in UIKit.

“A container view that arranges its child views in a grid that grows horizontally, creating items only as needed.” — Apple Developer

Prerequisites

To follow along with this tutorial, you’ll need some basic knowledge in:

  • Swift
  • At least Xcode 12+

Note: This only supports iOS 14+.

Getting Started With LazyHGrid

As you probably noticed, the Lazy prefix basically indicates that the view is only rendered when it appears on the screen, which boosts performance. You don't want to load all 1,000 data at the same time. With LazyHGrid, you only load however many data that appear on the screen. …


Shake is a plug ’n’ play bug reporting tool that you can use on either Android/iOS Natively or Reactively. As the name reflects, when you shake the device, you will be able to report a bug along with additional useful informations for you to debug.

Some of the informations that will be shared include:

  • User’s os version.
  • User’s build version.
  • User’s memory and storage status.
  • User’s location.
  • User’s history of their taps prior to reporting the bug.
  • User’s network requests & responses with timestamps.
  • User’s WiFi details.
  • User’s app memory and storage details.
  • User’s device orientation.
  • User’s screen resolution.
  • User’s permissions they’ve granted. …

Learn about LazyVStacks and how they’re different from regular VStacks

Image for post
Image for post
Photo by Johnson Wang on Unsplash.

At WWDC 2020, Apple introduced the LazyVStack. In my opinion, it is an improved version of VStack due to its advantage in performance.

LazyVStack’s behaviour is similar to VStack’s with the exception of laziness. In many instances, “lazy” means if you do not see it on your screen, it is not being loaded. This, in turn, increases performances. On the other hand, VStack loads everything.

Just think of it this way: If you have a huge load of data, the ideal approach is to load only what you see. This is what LazyVStack does. …

About

Kelvin Tan

I write about SwiftUI, UIKit, Swift, RxSwift at www.daddycoding.com.

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