Animating our UI when the value of the segmented control changes

Players on a soccer pitch
Players on a soccer pitch
Photo by Markus Spiske on Unsplash.

There isn’t a fully segmented control view where you can scroll the entire view from one segment to another segment, which is a bummer. But that is totally fine because you can achieve almost anything with SwiftUI.

Today, we will create a fully segmented scrolling effect.

Stacks

  • Xcode 12.3
  • SwiftUI

Prerequisites

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

  • Swift
  • At least Xcode 11

Setting Up the Segmented Control

You will create a state to keep the value of the selected segmented control:

@State private var currentSegment = 0

You will embed everything within the VStack and use SegmentedPickerStyle for the picker style:

VStack {
Picker("A or B", selection: $currentSegment) {
Text("A").tag(0)
Text("B").tag(1)
}.pickerStyle(SegmentedPickerStyle()).padding(.horizontal) …


How SOLID applies to the iOS and Swift worlds

A color-blocked background with the word SOLID in the foreground.
A color-blocked background with the word SOLID in the foreground.
Image credit: Author

SOLID is made up of five design principles meant to make code more understandable, flexible, and maintainable. The principle first appeared in a 2000 paper called “Design Principles and Design Patterns” by Robert Martin, but the acronym SOLID was introduced by Michael Feathers, according to Wikipedia.

I hope when you land yourself on this article, you have the desire to actually want to become a better engineer or write better code. When engineers write code, we should think about the scalability of the code and if the code is readable by different engineers. …


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. …

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