All techniques are explained step-by-step, in a beginner-friendly format so that you can easily follow in a cohesive way.
In this tutorial, we’ll take a quick look at how to create a simple layout by only using the visual editing tools and without touching the code.
Stacks in SwiftUI are similar to the stack views in UIKit. By combining views in horizontal and vertical stacks, you can build complex user interfaces for your application. There are 3 types of stacks: HStack, VStack and ZStack.
In this video, I want to discuss how to import images from Figma in different formats, such as PNG, PDF and JPEG.
With SwiftUI, you get access to five built-in shapes which are circle, ellipse, rectangle, rounded rectangle and capsule.
Apple provides a set of over 2,400 configurable symbols that you can use in your app. They work seamlessly with San Francisco, the system font for macOS, iOS, iPadOS, watchOS, and tvOS.
Xcode has the ability to embed colors and images directly in code. This is done with the help of Color Literals and Image Literals.
Use the Toolbar modifier to place multiple items in the navigation bar or bottom bar
Using the Toolbar in SwiftUI, you have more control over the placement of your navigation buttons such as the navigation bar or bottom bar. Additionally, these action items will adapt accordingly to iOS, iPadOS, watchOS, macOS and tvOS.
Image View gives us access to many features such as rendering mode, resizable and aspect ratio.
SwiftUI automatically makes your content fit within the bounds of the safe area. For background elements and some layout cases, you can ignore those edges by using ignoreSafeArea.
In this tutorial, we’ll take a deep dive into how to use the text view and its modifiers.
Aside from providing system fonts, SwiftUI also gives you the option of adding custom fonts. In this tutorial, you’ll learn how to add a custom font from Google Fonts and use in your project.
A typical way to align elements is to use HStack + Spacer(). However, this can necessitate too many containers, especially if you want to align to the top left. An alternative is to use the frame modifier with maxWidth and alignment.
Drop shadows are perfect for adding depth to your user interface. When your text, buttons and cards blend too much with the background, you can use drop shadows to make them stand out.
The mask modifier is even more versatile than the clipShape because you can use colors and even opacity to clip your content.
SwiftUI lets you mask any view with a clipShape modifier. A popular technique is to apply the Super Ellipse, also known as continuous rounded corners.
In SwiftUI, you can create a user onboarding layout with horizontal pagination with a few lines of code using the TabView.
Animations are an amazing addition to any project. In this tutorial, we’ll go through how animation works in SwiftUI. Animations in SwiftUI are automatically responsive, interruptible and automatic. There is virtually no set up — only customizations. Transitions are like Magic Move in Keynote. You only need to set the states and SwiftUI will figure out for you the transition between the two states.
SwiftUI provides a great way to show and animate a new view on top of your current view. You have access to preset transitions like opacity, scale and slide. You have even more control with move, scale and offset transitions.
SwiftUI also gives you the ability to set the animation timing to specific elements. Like this, during a state change, multiple elements can have different animation timing. Additionally, you can set a timing curve and duration for your animations.
SwiftUI has a number of transform modifiers that you can use for animation, including offset, scaleEffect, rotationEffect and rotation3DEffect.
In this tutorial, we’ll learn how to create a button that expands and contract after a delay. This is a fun effect that can be seen on a lot of buttons and cards.
Using the LongPressGesture, we can create an interesting bouncy button similar to the camera button on the iOS lock screen. This will also detect the duration of the press, which we can use to affect the animation progress.
In SwiftUI, you can attach a gesture modifier to detect the position of the drag. Using this position, you can apply to the offset modifier to make your element draggable and reset on release.
The matchedGeometryEffect modifier allows you to create beautiful custom transitions between two different views. It enables shared elements to animate smoothly from one space to another. This also makes animations much more manageable. All elements like texts, buttons and backgrounds will animate individually without having to set animation states.
To create a smooth transition between two views with matched geometry effect, you need to make sure that both views have shared elements. In this lesson, we’ll learn how to synchronize two separate views and pass the Namespace. We’ll recreate an interaction from the Music app.
The built-in Swift Package Manager (SPM) allows you to use third-party libraries. All you need to do is to enter the git URL and you will be able to install the latest version with only a few clicks.
The frosted glass effect has been around since iOS 7 and it’s only recently used more in a trend called glassmorphism. To create this background blur effect in SwiftUI, you’ll need to use Apple’s sample code and apply a BlurView.
Animations bring more life to your applications, these can also affect the user experience in a positive manner. In this tutorial, we’ll learn how to add Lottie animations in SwiftUI.
Lazy Grid allows you to create flexible and easily adaptable grid layouts. You can create one of the two: LazyVGrid or LazyHGrid. It allows you to create a container that grows vertically or vertically. The grid view will not render items until it’s needed, hence the word “lazy”.