Build a simple layout with Dynamic Type, Stacks, Images and Colors using Xcode 13’s inspectors without writing a single line of code.
In this section, we’ll learn how to create a simple layout without the need of writing code. We’ll use the Library, Inspectors and Preview exclusively.
In this section, we’re going to learn how to do everything in code. Previously, we have learned how to work with the inspectors and how to drag and drop a bunch of things as we get more familiar with Xcode, but this time we’re going to take it a step further and we’re going to use techniques that are not possible in the inspectors alone.
In this section, we’re going to cover Material specifically for Swift UI and also how to use it in a context of a foreground style or a background modifier. What is material? Well, it is this layer that is blurring the background, giving a frosted glass effect. It’s really important for making sure that your text is readable in front of a busy background or something that might be in a way of the text.
It’s really good for overlays such as the Tab Bar, or sometimes when you have a background, you can use a card. Most commonly, you’re going to use that for UIs that are above everything else, such as the modal or the control center in iOS, as well as the lock screen.
In this section, we’re going to learn about shapes, the stroke modifier and how to apply blending modes as well as masking using the mask and clipShape modifiers. I think you’re gonna find a lot of interesting techniques and appreciate the nuances between each of these modifiers and views that we’ll be using.
In this section, we’re going to learn about reusable view modifiers. You’re going to be able to create your own custom styles, which means that you can combine a bunch of modifiers that you find repetitive and use them in multiple places across your app.
In this section, we’re going to look at the new list styles in iOS 15, and we’re going to learn how to create a simple screen using the Navigation View.
With 3,100 free icons now, SF Symbols 3 is a huge time-saver for both designers and developers. You can customize more than ever before with the new rendering modes: Hierarchical and Palette on top of the existing Monochrome and Multicolor. Additionally, it’s now easier to add variants like fill and circle by using modifiers while keeping icon names as short as possible.
In this section, we’re going to learn about navigation links, how to open a URL in safari and how to customize the list items a little bit more, including the accent color on buttons, as well as the list layout.
In this section, we’re going to learn about the new swipe actions in iOS 15. It’s a very powerful interaction that is popular on apps like News and Mail. You can swipe the list item left or right to get to more buttons. Then we’re going to learn about states, how to manage them and how to use them in order to show or hide an item.
In this section, we’re going to learn about structuring our code and making it a little bit more readable. Then, we’ll learn about toggling our states so that we can go deeper with the swipe actions.
In this session, we’re going to learn about the new canvas API in iOS 15. When you implement the visual elements of your app, such as a background, the assets and the animations you have a few options, including exporting to SVG, PDF, PNG or JPEG. You can do that layer by layer, or you can do that in code. That’s where Canvas comes in. Canvas is great with performance, because it removes all of the interactivity. As a result, you gain in performance and you also have more control over the vector paths for your animations.
In this section, we’re going to learn how to turn an SVG into path in Swift so that we can use it in SwiftUI or in Canvas.
Today, we’re going to learn about timeline view in the Canvas API so that we can animate the blob that we created.
In this section, we’re going to learn about the onAppear modifier, and withAnimation for state changes.
In this section, we’re going to start a small series about how to create your own Tab Bar with custom rounded corners, an outline style as well as a little circle behind a material sheet that creates a beautiful light effect.
In this section, we’re going to learn how to create a custom tab bar data model as well as looping through that data using ForEach.
In this section, we’ll learn how to set up a custom tab bar animation with a circle in the background, as well as the line that moves between the tab items.
In this section, we’re going to learn about GeometryReader and PreferenceKey in order to make our custom tab bar adaptive.
In this section, you’ll learn how to organize your files and share states using AppStorage. When you have more than 10 files, it’s a good idea to group them into folders. However, as you separate your code, you’ll need to synchronize your states between views. The AppStorage is a great way to persistently store states.
In Part 1 , we learned a lot about the fundamental layout techniques, including how to create a custom Tab Bar with animation. We worked with the new SF Symbols 3 and learned how import SVGs from Figma, then use the new Canvas API with TimelineView. We explored the new List options, set up the project structure and so much more.
Let’s learn about Safe Area Inset in SwiftUI because it’s essential when you create a custom Nav Bar and Tab Bar since your content needs an offset to avoid overlapping with the bars. You could use the offset modifier or create a fake spacing using a rectangle with clear color, but that can lead to more issues for adapting your layout. Also, the scroll bars will be in the way of the Navigation Bar during scroll. Safe Area Inset is going to solve that problem.
In this section, we’re going to learn how to detect the scroll position in order to animate the large title into a smaller title, as well as moving the buttons. Ultimately, the Navigation Bar is going to take less space when we start scrolling.
In this section, we’re going to learn how to synchronize states between views using Binding, since we need the hasScrolled state to be available in the NavigationBar view in order to perform the animations, specifically to the background, title and the navigation buttons.
In this section, we’re going to learn how to animate a text. I know it sounds simple, but it’s definitely a little complex in any platform, including CSS and SwiftUI. You’re probably asking, why don’t I just animate the size in the font modifier. Unfortunately, the text size won’t animate smoothly. You could use scaleEffect , but it tends to pixelate if you scale up and it won’t take a real space in the layout. In SwiftUI, you can use the AnimatableModifier to perfectly animate the font size.
In this section, we’re going to create horizontally scrollable cards by using a Tab View with pagination. We’ll also add data samples and apply a custom background.
As a follow-up to the previous session, we’re going to start animating the Cards with parallax. We’re going to use Geometry Reader to detect the X position and apply rotation3DEffect, blur and offset to create some nice effects.