Forem: Nafeez Ahmed

What's new in SwiftUI Colors and SF Symbols? ft. WWDC'22

Nafeez Ahmed — Fri, 06 Jan 2023 16:43:00 +0000

SwiftUI was launched in 2019 and since then Apple has been constantly adding features and updates to make it production ready. Following that, there were drastic amount of updates made in SwiftUI 4. So, without further ado, let's dive into new updates on colors, styles and SF symbol implementation.

💡 You can download the new SF Symbols from here

Gradient Colors

Before diving into gradient colors, let's get some context on foreground and background styles. So, foreground style (.foregroundStyle()) and background style (.backgroundStyle()) helps you add images, colors and gradients as the background for a particular view.

Previously, for making background and foreground styles of monochromatic gradient, you could have to generate gradient views and use that as background. Now with SwiftUI 4, you could simply add .gradient to the color.

Let's consider a shape and add a gradient color as foreground style.

RoundedRectangle(cornerRadius: 24)
            .foregroundStyle(Color.red.gradient)
            .padding()

Result:

Let's give another example. We will take some text in a vertical stack and add a gradient background.

GroupBox {
            VStack(spacing: 8) {
                Text("Hello, World!") ]
                    .bold()
                    .font(.system(.body, design: .rounded)) // 1 
                Text("Welcome to Swift Anytime")  
            }
        }
        .padding() // 2 
        .backgroundStyle(Color.orange.gradient) // 3

Result:

Code Explanation:

1. For stylizing purposes, this special font has been added.

Added adding for spacing purposes
Here is when the magic happens. The background style is being set to an orange gradient.

Wanna add a cool shadow to the gradient? Just add .shadow() to the gradient and pick a type of gradient. In the following example, inner shadow is picked with certain radius.

  .backgroundStyle(
        Color.orange.gradient
            .shadow(.inner(radius: 8))
    )

Result:

SF Symbols

Apple has expanded the library of the SF Symbols to 700+ symbols. Along with that, new customization and configuration regarding rendering mode and variable colors have been there.

💡 New symbols include representations of home objects, fitness, health, currencies, and many more.

Source : Apple

Category Edition

5 new categories have been added to SF Symbols:

Camera & Photos
Accessibility
Privacy & Security
Home
Fitness

Variable Color

Another innovative thing they added to SF Symbols is variable color. Meaning you can supply a Double value (usually 0-1) and it changes the state of the symbol based on the variable value. Keep in mind only certain SF Symbols are available for variable color. You can find it in "Variable Color" section on SF Symbol left pane. Also for being on the safe side, the lower bound of the variable color is considered for the decimals.

Image(systemName: "rays", variableValue: variable) // 1
            .font(.largeTitle)
            .onTapGesture {
                variable += 0.2 // 2
            }

Result:

Code Explanation:

1. Here, the image is being initialized with SF symbols with a pre-defined variable value.

For convenience in understanding, a tap gesture example has been used. On the tap gesture, the variable value is increased by 0.2 for sake of simplicity.

As you can see, on tap gesture, it shows different range of that particular SF symbols.

Rendering Mode

With SwiftUI 4, Apple has introduced 4 rendering modes for SF Symbols:

Monochrome
Hierarchial
Palette
Multicolor

The rendering mode can be using .symbolRenderingMode(...) style modifier.

Monochrome Mode

Monochrome SF symbols, as the name explains, are meant to have a single color.

Hierarchical Mode

Hierarchical mode has multiple layers which are rendered with different opacities for the given foreground style. You can also add a particular color to it.

Image(systemName: "calendar.badge.plus")
    .symbolRenderingMode(.hierarchical)
    .font(.system(size: 200))
    .foregroundStyle(.blue)

Multicolor Mode

Multicolor mode has multiple layers where different colors can be embedded in the iconography by default.

Result:

Palette Mode

Palette mode is just like a more customizable version of the multi-colored mode. It allows you to pick the foreground colors/style. Cool twist, you can apply the same gradients you learnt in earlier sections.

Image(systemName: "iphone")
    .symbolRenderingMode(.palette)
    .font(.system(size: 200))
    .foregroundStyle(Color.teal.gradient, Color.blue.gradient)

Result:

Wrapping up the article, you learned about the new SF Symbols updates - rendering modes, variable color and new category edition - color gradients, foreground/background style and more.

We at Swift Anytime have the mission to make learn iOS development the way everyone enjoys it. You can check out our articles on SwiftUI, Swift, iOS Interview Questions and get started with your iOS journey today.

Eat. Sleep. Swift Anytime. Repeat.

How to use Geometry Reader in SwiftUI

Nafeez Ahmed — Thu, 05 Jan 2023 15:49:41 +0000

SwiftUI Layout works very differently than UIKit; Wherein UIKit we dealt with raw frames, and either added constraints accordingly or have some concrete frame-set to specify the position of views, in SwiftUI, the layouts are defined in form of stacks, spacers and paddings.

This layout system provides us a lot of simple and flexible ways to define our view's position, but sometimes scenarios arise where you need to have specific frames or size set for a view either by setting some concrete value for which SwiftUI have provided .frame modifier. There are also conditions where you need to define the size or position of a view relative to its parent, and for this particular use case, SwiftUI have provided us with GeometryReader.

GeometryReader is an special container view like any other container view such as VStack, ZStack and Group but the special part is, the closure this container has, have an parameter of type GeometryProxy with contains information about this containers size and safeAreaInsets, also it has an function frame(in: CoordinateSpace) -> CGRect which give us frames for an certain CoordinateSpace (more on this in later section of the article).

You can use this information to size/position our view relative to the size/position of it's superview and any view in the hierarchy.

Before you indulging deeper into geometry reader, let's look at an alternative way to fetch frame properties of a view without using geometry readers.

An Alternative

So, what if you want an element to consume like 1/4th or 1/3rd of the screen? Well, you can go UIScreen.main.bounds. The downside is it only works if your app is only portrait since it doesn't adapt to the different orientations.

VStack(spacing: 0) {
            Color.orange
                .frame(height: UIScreen.main.bounds.height * (1/3)) // 1
            Color.red
        }

Result:

Code Explanation:

Here, the height of the orange color is set to the 1/3rd of the screen height. You can see that the screen height is fetched from UIScreen.main.bounds

Basic Implementation

GeometryReader works by wrapping our view inside the view builder closer, it acts as a container.

For accessing the frame properties, you could just wrap the view around a geometry reader and use the geometry proxy in it. The job of geometry proxy is to provide you with the frame in a certain coordinate space (talked in detail in upcoming sections).

Let’s see geometry reader in action by having a couple of colors in a VStack:

 GeometryReader { reader in // 1 
            VStack {

                    Color.blue
                        .frame(height: reader.size.height * (1/5)) // 2
                        .cornerRadius(10)
                        .padding()

                    Color.green
                        .frame(height: reader.size.height * (1/2)) // 3
                        .cornerRadius(10)
                        .padding()

            }
        }

Result:

Code Explanation:

As we discussed earlier, here the view is wrapped around the reader.
Here, color blue was used in VStack (for sake of simplicity) with height that is 1/5th of the whole screen.
Here, green color is made to cover half of the screen.

The key here is to observe that even if the simulator changes the orientation, the view looks as excepted and adapts to it (which would not possible with UIScren.main.bounds).

Coordinate Spaces

There are three coordinate spaces available to use in geometry reader:

Global - Frame relative to the whole screen/superview ie. the whole content view
Local - Frame relative to the immediate parent view
Custom - The custom coordinate space (identifying a view by adding .coordinateSpace(name: ""))

Global and Local Coordinate Space

Let's make a list item with text wrapped around the geometry reader. The text should display the mid x and y value of the global and local frames. Let's also add some bold title just in a VStack in order to add some extra content to the overall view.

 VStack(alignment: .leading) {
            Text("Title")
                .bold()
                .font(.title)
                .padding()
            List {
                GeometryReader { reader in
                    Text("Global : (\(Int(reader.frame(in: .global).midX)), \(Int(reader.frame(in: .global).midY))) Local: (\(Int(reader.frame(in: .local).midX)), \(Int(reader.frame(in: .local).midY)))")
                }
            }
        }

Result:

You can observe how the global Y coordinate changes as you change the scroll position of the item. Moreover, the local coordinates remain the same since that frame is relative to the list cell view.

Custom Coordinate Space

Now that you understood global and local coordinate space, let's take a look at custom coordinate space.

var body: some View {

        GeometryReader { reader in
            ZStack { // 1 
                Color.blue
                    .coordinateSpace(name: "blue") // 2 
                    .cornerRadius(10)

                Color.red
                    .frame(height: reader.frame(in: .named("blue")).height * 1/2) // 3 
                    .cornerRadius(10)
                    .padding()

            }.padding()
        }
    }

Result:

Code Explanation:

Here, there is a ZStack in which are we are going to put the content
The blue view is given the coordinate space name of "blue" so this can be used later
The height of the red view is calculated such that it is half of the coordinate space "blue" (aka the blue view)

Here, the key is .coordinateSpace(name: "blue"). If you wouldn't have named that coordinated space, the red view wouldn't have been able to get blue view's frame.

Moreover, you can see how using a coordinate space can give use frame of the specific view required.

Congratulations! You deserve to celebrate this moment. Today you learned about geometry reader in SwiftUI and what is its significance, alternative way to get the frame properties using UIScreen bounds and different type of coordinate spaces and its usage. We encourage you to read more related articles like Colors and Gradient in SwiftUI till then, have a great time ahead.

Eat. Sleep. Swift Anytime. Repeat.

How to implement Apple's SharePlay? WWDC'22

Nafeez Ahmed — Wed, 04 Jan 2023 13:48:13 +0000

With the launch of iOS 15 (in June 2021), Apple launched a new feature which allows you to experience content together with other people on a FaceTime call.

Integrating SharePlay to your applications is really straightforward once you understand how the objects work and when the methods should be triggered. So, without further ado, let's dive straight into the fundamentals.

Prerequisites

Developer account
Two devices to test it on

Note: If not possible, you can implement catalyst in your app and test SharePlay with your computer and your personal device.

Testing

As it is a FaceTime feature, it cannot be tested on simulator. You need at least two devices. Or as mentioned above, you can implement catalyst (or even make a mac app) and test the SharePlay.

How testing goes

You run the app on both of your devices. Then you call one device from FaceTime or maybe share a common FaceTime link (and reuse it throughout the testing).

Setting up SharePlay and adding entitlements

For integrating SharePlay, one simply needs to add "Group Activities" in Your Project -> Signing & Capabilities -> "+ Capability"

This will add an entitlements file to your app.

Coordination Manager

One is primarily going to use this for prepare your sessions to play and for coordination your AVPlayer.

Feel free to use the boiler plate code given the apple in their demo project.

Following apple's coordination manager code, we have prepareToPlay() which prepares for activation and according to the user's response, takes further steps.

The prepareForActivation within prepareToPlay will prompt the user for something similar to the following alert:

Once you select an option, FaceTime remembers your preference and plays according to that.

GroupActivity

This is the object you are going to use throughout the app to get the sessions and url.

The following is an example of GroupActivity object for video playing sharply object:

import GroupActivities
import AVKit


@available(iOS 15, *)
struct VideoGroupActivity: GroupActivity {

    let video: Video 

    static var activityIdentifier = "com.example.SharePlayApp.SharePlayApp"


    var metadata: GroupActivityMetadata {
        var metadata = GroupActivityMetadata()
        metadata.type = .watchTogether
        metadata.fallbackURL = Bundle.main.url(forResource: video.url, withExtension: "mp4")
        metadata.title = video.videoTitle
        return metadata
    }
}

Metadata type: There are three types available. watchTogether (for video activities), listenTogether (for audio activities) and generic (for custom SharePlay experiences)

Metadata title: This is the title that is going to appear on the FaceTime top bar once the SharePlay starts.

Fallback URL: This is the url we are going to retrieve and play when a sharplay session is detected. This may not make complete sense right now but later when we make jump to a tutorial.

How SharePlay integration works:

Once you add entitlements, add Coordinaton Manager and setup the GroupActivity, all it takes it to follow call some methods and the SharePlay will be working well!

The following is how it works:

You fetch the session from GroupActivity.sessions() using task.
You prepareToPlay using CoordinationManager.prepareToPlay()
You join the session using session.join()
You coordinate the player using player.playbackCoordinator.coordinateWithSession(session)
You can leave the session (ending session locally) using sessions.leave() or end the session (end it completely for everyone) using session.end().

Yep, as easy as that!

Concluding the article, today you learned about different components of SharePlay, integrating it in your Xcode project, and learned end-to-end SharePlay implementation.

Where to go from here?

With WWDC 2022, Apple launched lot of new features for SharePlay Collaboration. Feel free to go through WWDC Sessions. The following can be your start point: MeetGroup Activities - WWDC21

Stay tuned to know more about SharePlay, test its demo app and make yours. Consider subscribing to our newsletter to get the latest updates directly to your inbox.

Eat. Sleep. Swift Anytime. Repeat.

Visual Effects Blur in SwiftUI

Nafeez Ahmed — Mon, 02 Jan 2023 10:04:01 +0000

Swift provides with different ways of displaying visual effects like blur and vibrancy effects. These can mostly be used as background for views and can be used to improve the overall app design. You can observe these blur effects throughout iOS like in app library, control center and app dock.

Materials

Adding visual effect as background in iOS 15 is as easy as doing the following:



 Text("Hello, World!")
            .frame(width: 200, height: 50)
            .background(.thickMaterial)

Note:

If you are using any frame in your view, use the .background after that so that the background effect is applied for the required frame size.

This visual effect is actually an enum called Material which has thin, thick and regular properties.

Visual Effect using UIViewRepresentable

Above was the case for iOS 15+ only. But for >iOS15, you can use a mini UIViewRepresentable to implement visual effect into your app.



struct VisualEffect: UIViewRepresentable {
    @State var style : UIBlurEffect.Style // 1
    func makeUIView(context: Context) -> UIVisualEffectView {
        return UIVisualEffectView(effect: UIBlurEffect(style: style)) // 2
    }
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
    } // 3 
}

Code Explanation:

Defining the state variable to take in the blur effect enum as a parameter.
Returning a UIVisualEffectView (UIKit element) with the style variable.
Since no view updates are required, no code is added to updateUIView.

Usage:



Text("Hello, World!”)
            .frame(width: 150, height: 50, alignment: .center)
            .background(VisualEffect(style: .systemThickMaterial))

There can be cases where on adding the blur effect to the view, the visual effect can look no different than a solid background color. In that case, you just need to play around with the alpha and opacity value of the visual effect.



Text("Hello, World!")
    .frame(width: 150, height: 50, alignment: .center)
    .background(.thin)
    .background(
        VisualEffect(style: .systemThickMaterial)
            .opacity(0.8)
    )

If you are looking forward to implement vibrancy effects like before, SwiftUI doesn't support the vibrancy effect natively. For that, you could go for Swift Packages like SwiftUI Visual Effects by Lucas Brown.

Wrapping up the article, today you learned about implementatoin of visuals effects in SwiftUI by using Material and about integrating the UIKit version. We encourage you to go over the concept of Colors & gradient in SwiftUI . Till then,

Eat. Sleep. Swift Anytime. Repeat.

Ultimate guide on Timer in Swift

Nafeez Ahmed — Tue, 27 Dec 2022 15:20:49 +0000

A timer is a class used to perform any task after a specific time interval. Timers are super handy in Swift for scheduling tasks with a delay or scheduling repeating work.
In this article, we are going to cover the following things:

How to schedule tasks?
Repeating and non-repeating timers
Using RunLoop modes
Keep track of timer
Timer optimisation to reduce energy and power impact class Timer : NSObject

Why Timers are required?

You often face requirements where you need to perform a particular task repeatedly within a particular time interval, or scenarios where you need to perform certain actions after a defined time. These are the ideal condition where you could leverage Timers in your codebase.

Timer can be used in some common use cases:

Say you have to automatically call a particular method every 5 seconds.
You want to send a local notification once you terminate the app.
Sync your cart details with the backend by sending updated details after each X time.

In above scenarios we can use timers to achieve the repeating and scheduling behaviour.

Repeating Vs Non-repeating Timers

You have to specify whether a timer is repeating or non-repeating at the time of creation. Here is the main difference between both:

A non-repeating timer fires once and then invalidates itself automatically, so, it prevents the timer from firing again.

A repeating timer fires and then reschedules itself on the same run loop. A repeating timer always schedules itself based on the scheduled firing time, as opposed to the actual firing time.

For example, if a timer is scheduled to fire at a specific time and every 10 seconds after that, the scheduled firing time will always fall on the original 10-second time intervals, even if the actual firing time gets delayed.

Scheduling a repeating task

Creating a repeating task is very simple.

override func viewDidLoad() {
    super.viewDidLoad()

    // scheduling a timer in repeat mode after each 2 seconds.
    let timer = Timer.scheduledTimer(timeInterval: 2,
                                     target: self,
                                     selector: #selector(handleTimerExecution),
                                     userInfo: nil,
                                     repeats: true)
}

@objc private func handleTimerExecution() {
    print("timer executed...")
}

In the above code,

A timer is created with the class method scheduledTimer by passing parameters like time interval, userInfo and repeat mode, etc. Remember that time intervals always take time in seconds.

Here, we set the time to 2 seconds, which means the action (handleTimerExecution) will execute after every 2 seconds.
With userInfo you can pass the extra information along with the Timer object. The object should be in dictionary format.

We have used the target-action mechanism to perform a task.
Most importantly, you have set the repeat parameter true to make the timer repeatable.

When you run the code above, you will see that the handleTimerExecution method will continue to be called indefinitely. Because we haven't handled the timer's ended case in the above code.

Even though the timer constant was created inside the viewDidLoad() local context, it will outlive that function, since Runloop keeps a reference to the timer object.

Note: The @objc attribute makes the handleTimerExecution() function available in Objective-C. And the timer class is a part of Objective-C runtime, that's why we need the @objc attribute here.

In iOS, target-action is a mechanism to call a particular method on a certain object. Here target is something on which action method is going to call and action means a method which will be called.

How to send info with timer?

Really, can we send information along with a timer??? Yes, it's simple to pass some useful info while creating a timer object.

private var timer: Timer?

override func viewDidLoad() {
    super.viewDidLoad()

    let userInfo = ["fullName": "John Martin", "age": 30] as [String : Any]

    self.timer = Timer.scheduledTimer(timeInterval: 1,
                                      target: self,
                                      selector: #selector(handleTimerExecution(_:)),
                                      userInfo: userInfo,
                                      repeats: true)
}

@objc private func handleTimerExecution(_ timer: Timer) {
    if let userInfo = timer.userInfo as? [String: Any] {
        print("user info: \(userInfo)")
        self.timer?.invalidate()
    } 

    // here is a fallback to end timer if userInfo not found
}

Scheduling a repeating task using a closure:

let timer = Timer.scheduledTimer(withTimeInterval: 2.0,
                                         repeats: true) { timer in
    print("timer executed...")
}

Above, we have scheduled a repeating timer using a closure. In this way, you will receive the timer's execution within the same block. You don't need to define a separate method like a target-action mechanism.

Did you find this cool???? yesss, closure based timer is really cool.

How to stop a repeating timer?

To stop a repeated timer in Swift is very simple. A timer class does provide an instance method called invalidate().

private var timerCurrentCount = 0

let timer = Timer.scheduledTimer(withTimeInterval: 2.0,
                                         repeats: true) { timer in

    // check for max execution count of timer.
    if self.timerCurrentCount == 5 {
        timer.invalidate() // invalidate the timer
    } else {
        print("timer executed...")
        self.timerCurrentCount += 1
    }
}

Points to note here:

You can have to take care of the timer's termination very carefully. Because a repeating timer will never end if the end conditions do not match.

For the target-action mechanism, you have to make the timer variable an instance variable outside the function like in the example below.

private var timer: Timer?

override func viewDidLoad() {
    super.viewDidLoad()

    self.timer = Timer.scheduledTimer(timeInterval: 2,
                                      target: self,
                                      selector: #selector(handleTimerExecution),
                                      userInfo: nil,
                                      repeats: true)
}

@objc private func handleTimerExecution() {
    if self.timerCurrentCount == 5 {
        self.timer?.invalidate() // invalidating timer
    } else {
        print("timer executed...")
        self.timerCurrentCount += 1
    }
}

Scheduling a non-repeating task

Using a timer, creating a non-repeating task is very similar to the repeated method. While you create a timer, you set a boolean to the repeat parameter.

To make timer non-repeatable, simply sets this parameter as false.

override func viewDidLoad() {
    super.viewDidLoad()

    let timer = Timer.scheduledTimer(timeInterval: 1,
                                      target: self,
                                      selector: #selector(handleTimerExecution(_:)),
                                      userInfo: userInfo,
                                      repeats: false)
}

In the above code, timer will fire only once.

In Swift, we have an alternative approach to define a non-repeating task using GCD like below:

DispatchQueue.main.asyncAfter(deadline: .now() + 5.0) {
   print("timer executed")
}

In the above method, you can see a scheduled task that will execute after 5 seconds from the current time. In the code, the now() function returns the current time. In the GCD approach, you don't need to invalidate the timer. RunLoop automatically invalidates the timer.

Timer Tolerance & RunLoop Modes

The timers work with RunLoop together. RunLoop is a fundamental part of threads and concurrency.

When you schedule a timer, it's managed by a RunLoop. The run-loop keeps looping and executing tasks for repeating timers. When no tasks are left to execute, the run-loop waits or quits.

An increasing number of timers in the app increases the risk of less responsiveness and more power usage. Because every timer fires at each second in the app.

When we create a timer, we can easily set the tolerance property to reduce the power consumption of the app. Its default value is 0.0 but you can set this value in the 0-1 range.

For example, you have created a repeating timer with the tolerance value 0.1. This means the system will fire the timer any time between the scheduled fire date and the scheduled fire date plus tolerance time (i.e. 0.1) — never before the scheduled fire date.

timer?.tolerance = 0.1

How to utilise RunLoop?

Basically, a RunLoop mode is a collection of input sources like touches, clicks, swiping, dragging, timer events etc.

Each timer fires on the main thread and is attached to a RunLoop. We know that the main thread is also responsible for UI drawing, user interaction handling etc. Suppose the main thread is busy in timer execution then your UIs may be unresponsive.

How to solve this problem?

It's very simple to handle such problem. There are three types of RunLoop modes in iOS:

default: It handles input sources that are not NSConnectionObjects.

common: It handles a set of other run loop modes like timers, observers etc.

tracking: It handles the UI responsiveness in the app.

So common mode is good to use when we have multiple repeating timers in the app to avoid such problems. Example:

RunLoop.current.add(timer, forMode: .common)

Remember that, this is not needed for usual implementation. This line will be required in special cases which we explained above.

Points to remember:

When your app enters the background, iOS pauses any running timers and when the app enters the foreground again, iOS resumes the timers.

Each timer fires on the main thread and is attached to a RunLoop.

Don't forget to stop the timer once the task is completed to reduce battery drain.

When you use a timer, you can't be sure that it will be executed at the same time. But you can only be sure that you will get a callback according to timeInterval sets on the timer.

Eat. Sleep. Swift Anytime. Repeat.

Async Image in SwiftUI

Nafeez Ahmed — Mon, 26 Dec 2022 15:32:23 +0000

Almost all the modern apps and websites are driven by images and videos. The images you see on shopping apps, social media and entertainment apps are all loaded from some backend source. Since there are a lot of backend calls needed for this, if you actually waiting for all those images to load before showing the website, it would take immense amount of time to load the apps - which would result in bad user experience.
A very simple but efficient solution for that is loading the image asynchronously and showing a placeholder as the image till then. This is the exact approach used in almost all the apps where the images are asynchronously loaded and cached (in the best case scenerio).
You can implement asynchronous image loading in SwiftUI for iOS 15+ using AsyncImage. Without further ado, let's take a look at it.

Basic Implementation

The easiest way you can load an image with AsyncImage is with a URL.

 AsyncImage(url: URL(string: "https://swiftanytime-content.s3.ap-south-1.amazonaws.com/SwiftUI-Beginner/Async-Image/TestImage.jpeg")) // 1

Result

Code Explanation:

Async Image is initialized with a URL - which is initialized with a string.

Note here, the image specific initializers like .resizeable() and .contentMode(aspectRatio:) cannot be used.
For playing around with async image, feel free to use this test URL.

AsyncImage with Image specific modifiers

Many times, while working in production apps, using .resizable() and .aspectRatio(contentMode: ...) for images become inevitable. Like in the previous section, you can observe how the image was taking up all the available space. What if you don't want to change the content mode and resizeability in order to fix that? Let's try AsyncImage(url: ..., content: ..., placeholder: ...) initialization for that.

  AsyncImage(url: URL(string: "https://swiftanytime-content.s3.ap-south-1.amazonaws.com/SwiftUI-Beginner/Async-Image/TestImage.jpeg")) { image in
            image
                .resizable()
                .aspectRatio(contentMode: .fill)

        } placeholder: {
            Color.gray
        }
        .frame(width: 250, height: 250)

Result

And in the case you only want to control the scale of the image, you can use the AsyncImage with the scale modifier. The default value of the scale is 1. Let's try using scale value of 2.

AsyncImage(url: URL(string: "https://swiftanytime-content.s3.ap-south-1.amazonaws.com/SwiftUI-Beginner/Async-Image/TestImage.jpeg")!, scale: 2)
            .frame(width: 250, height: 250)

Result

Image with placeholder while loading

If a blank view while loading the image seems boring and less indicative, let's try to add a placeholder view like a progress spinner or an SF symbol.

 AsyncImage(url: URL(string: "https://swiftanytime-content.s3.ap-south-1.amazonaws.com/SwiftUI-Beginner/Async-Image/TestImage.jpeg")!) { image in
            image
                .resizable()
                .aspectRatio(contentMode: .fill)
        } placeholder: {
            Image(systemName: "photo.fill")
        }.frame(width: 250, height: 250)

Result

Error handling for the images

That was all about framing and adding placeholder to async image. But what if the image URL is invalid. SwiftUI allows us to use a view of your choice in the case the image URL is nil. For that, you can use the transaction parameter which allows you to handle the states of loading the image.

  AsyncImage(url: URL(string: "AWrongURL")!) { phase in // 1 
            if let image = phase.image { // 2
                // if the image is valid
                image
                    .resizable()
                    .aspectRatio(contentMode: .fill)
            } else if phase.error != nil { // 3  
                // some kind of error appears
                Text("No image available")
            } else {
                //appears as placeholder image 
                Image(systemName: "photo") // 4
                    .resizable()
                    .aspectRatio(contentMode: .fill)
            }
        }.frame(width: 250, height: 250, alignment: .center)

Result considering an invalid url was used:

Code Explanation:

Here, the async image is initialized and we have defined phase variable in the block. The phase variable changes as the image loads.The load phases can be - empty, success, error
Using an if let, the phase image is checked and displayed.

3.Checking if the error is nil. If it is not, some text is displayed.

4.Default image if none of the above conditions are satisfied.
To understand image phases and transactions better, let's try another initializer - init(url:scale:transaction:content).

 AsyncImage(url: URL(string:"https://swiftanytime-content.s3.ap-south-1.amazonaws.com/SwiftUI-Beginner/Async-Image/TestImage.jpeg")!, scale: 2) { phase in // 1 
            if let image = phase.image { // 2 
                            // if the image is valid
                            image
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                        } else if phase.error != nil { // 3 
                            // some kind of error appears
                            Text("404! \n No image available 😢")
                                .bold()
                                .font(.title)
                                .multilineTextAlignment(.center)

                        } else { // 4 
                            // showing progress view as placeholder
                          ProgressView()
                                .font(.largeTitle)
                        }
        }.padding()

In the case you try entering a wrong URL, this is what the app shows.

Code Explanation:
1.An Async image is defined here with the scale of 2 and a test url. Along with that, a phase block is defined where you handle all the image states. You can observe that is the scale of the image is doubled in the result gif.

If the image phase is not nil, the image is presented in resizeable way and fill aspect ratio.

3.If the error is not nil, some 404 text is shown.

4.If neither of the earlier situations are called, just an activity indicator in large title style is shown.

Congratulations! You deserve to celebrate this moment. Today you learned about Async Image implementation, adding a placeholder to it, using image-specific modifiers and error handling the URL.. We encourage you to read more related articles like Colors and Gradient in SwiftUI till then, have a great time ahead.

Eat. Sleep. Swift Anytime. Repeat.