Layout and animation are among the most exciting features of SwiftUI, which have deeply attracted many developers from the outset. Here, I have compiled some articles I have written about layout and animation, hoping they can be helpful in your learning and development journey.
Principles of Layout
- Alignment in SwiftUI: Everything You Need to Know
This article blends the Layout protocol with SwiftUI's "alignment" to aid readers in comprehending and mastering it more effectively.
- SwiftUI Layout: The Mystery of Size
This article will unveil the veil covering the SwiftUI size concepts from the perspective of layout, helping you understand and master the meanings and uses of the many sizes in SwiftUI. It will also provide you with a deeper understanding of the SwiftUI layout mechanism by creating copies of the frame and fixedSize view modifiers that conform to the Layout protocol.
- SwiftUI Layout: Cracking the Size Code
In this post, we will further deepen our understanding of SwiftUI layout mechanism by imitating the view modifiers frame and fixedSize, and demonstrate some issues to be aware of during layout through several examples.
Principles of Animation
- Demystifying SwiftUI Animation: A Comprehensive Guide
This article provides a comprehensive introduction to the animation mechanism of SwiftUI and provides a large amount of demonstration code.
- The Secret to Flawless SwiftUI Animations: A Deep Dive into Transactions
This article will explore the principles, functions, creation, and distribution logic of Transaction, and tell readers how to achieve more accurate animation control in SwiftUI, as well as other issues to pay attention to.
- SwiftUI geometryGroup() Guide: From Theory to Practice
This article will introduce the concept and usage of geometryGroup(), as well as how to handle anomalies in older versions of SwiftUI without using geometryGroup().
Comprehensive Study of Layout Containers
- GeometryReader: Blessing or Curse?
This article will dissect the "common problems" of GeometryReader to see if it is really so unbearable, and whether those performances criticized as "not meeting expectations" are actually due to problems with the developers' "expectations" themselves.
- Mastering ViewThatFits
This article intends to thoroughly analyze ViewThatFits, including rule details, the meaning of ideal size, usage examples, and more. Lastly, we will create a replica version of ViewThatFits to deepen our understanding of it.
- Mastering Safe Area in SwiftUI
This article will explore how to obtain SafeAreaInsets in SwiftUI, draw views outside of the safe area, and modify the safe area of views.
- Deep Dive into the New Features of ScrollView in SwiftUI 5
With SwiftUI 5.0, Apple has significantly enhanced the functionality of ScrollView. Numerous new and improved APIs have been added. This article will introduce these new features, hoping to help developers in need more and earlier.
- Creating Tables with Table in SwiftUI
Table is a table control provided for the macOS platform in SwiftUI 3.0, allowing developers to quickly create interactive multi-column tables. At WWDC 2022, Table was extended to the iPadOS platform, giving it a larger space to operate. This article will introduce the usage of Table, analyze its features, and how to implement similar functionality on other platforms.
- The New Navigation System in SwiftUI
SwiftUI 4.0 (iOS 16+, macOS 13+) has made significant changes to the navigation system, providing a new API that manages views as a stack, making it easy for developers to implement programmatic navigation. This article will introduce the new navigation system. - SwiftUI
- Using UIKit Views in SwiftUI
This article will explain how to use UIKit views in SwiftUI, how to give your UIKit wrapped views a SwiftUI style, and what to be aware of when using UIKit views in SwiftUI, all through the example of wrapping UITextField.
- In-Depth Exploration of Overlay and Background Modifiers in SwiftUI
In the toolbox of SwiftUI, overlay and background are two extremely useful view modifiers that play an indispensable role in various development scenarios. This article will delve into the unique attributes of these two modifiers, clarify their fundamental differences from ZStack, and identify the scenarios they are best suited for.
- Mastering the containerRelativeFrame Modifier in SwiftUI
At the WWDC 2023, Apple introduced the containerRelativeFrame view modifier to SwiftUI. This modifier simplifies some layout operations that were previously difficult to achieve through conventional methods. This article will delve into the containerRelativeFrame modifier, covering its definition, layout rules, use cases, and relevant considerations. At the end of the article, we will also create a backward-compatible replica of containerRelativeFrame for older versions of SwiftUI, further enhancing our understanding of its functionalities.
- What Does spacing = nil Mean in SwiftUI?
In SwiftUI, many layout container constructors include a spacing parameter with a default value of nil, which controls the spacing between adjacent views. This article will start with this default parameter to explore the concept of Spacing in SwiftUI in-depth, and share some related tips and considerations.
Layout Examples
- Several Ways to Center Views in SwiftUI
This article will introduce some methods of how to center views in SwiftUI , explaining the implementation principle behind each method, applicable scenarios, and points to note.
- Layout in SwiftUI Way
This article will demonstrate the power and flexibility of SwiftUI's layout system by showing multiple ways to achieve the same layout, and help developers gain a better understanding of SwiftUI's layout logic.
- Implementing Keyword-based Search and Positioning in SwiftUI Text
A few days ago, a netizen in the chat room discussed the question about How to use Text + AttributedString to achieve the function of searching for keywords in an article, and switch scrolling in the search results through buttons?
- Mixing Text and Image in SwiftUI
SwiftUI offers powerful layout capabilities, but these layout operations are performed between views. When we want to mix text and images in Text, we need to adopt a different mindset and approach than with view layout. This article will first introduce some knowledge related to Text and, through a practical case, outline the approach to implementing Text and Image mixing in SwiftUI.