布局和动画是 SwiftUI 最激动人心的功能之一,很多开发者正是被这两者在第一时间所吸引。在这里,我整理了一些我撰写的关于布局与动画的文章,希望它们能够对你有所帮助。
布局原理
- SwiftUI 布局 —— 对齐
“对齐”是 SwiftUI 中极为重要的概念,然而相当多的开发者并不能很好地驾驭这个布局利器。在 WWDC 2022 中,苹果为 SwiftUI 增添了 Layout 协议,让我们有了更多的机会了解和验证 SwiftUI 的布局原理。本文将结合 Layout 协议的内容对 SwiftUI 的 “对齐” 进行梳理,希望能让读者对“对齐”有更加清晰地认识和掌握。
- SwiftUI 布局 —— 尺寸( 上 )
在 SwiftUI 中,尺寸这一布局中极为重要的概念,似乎变得有些神秘。无论是设置尺寸还是获取尺寸都不是那么地符合直觉。本文将从布局的角度入手,为你揭开盖在 SwiftUI 尺寸概念上面纱,了解并掌握 SwiftUI 中众多尺寸的含义与用法;并通过创建符合 Layout 协议的 frame 和 fixedSize 视图修饰器的复制品,让你对 SwiftUI 的布局机制有更加深入地理解。
- SwiftUI 布局 —— 尺寸( 下 )
在上篇中,我们对 SwiftUI 布局过程中涉及的众多尺寸概念进行了说明。本篇中,我们将通过对视图修饰器 frame 和 offset 的仿制进一步加深对 SwiftUI 布局机制的理解,并通过一些示例展示在布局时需要注意的问题。
动画原理
- SwiftUI 的动画机制
大多初学者都会在第一时间惊叹于 SwiftUI 轻松实现各种动画效果的能力,但经过一段时间的使用后,他们会发现 SwiftUI 的动画并非像表面上看起来那样容易驾驭。开发者经常需要面对:如何动、怎么动、什么能动、为什么不动、为什么这么动、如何不让它动等等困扰。对 SwiftUI 的动画处理逻辑了解的不够深入是造成上述困扰的主要原因。本文将尝试对 SwiftUI 的动画机制做以介绍,以帮助大家更好地学习、掌握 SwiftUI 的动画,制作出满意的交互效果。
- 掌握 Transaction,实现 SwiftUI 动画的精准控制
SwiftUI 因其简便的动画 API 与极低的动画设计门槛而广受欢迎。但是,随着应用程序的复杂性增加,开发者会逐渐发现,尽管动画设计变得前所未有的简单,但要实现精确细致的动画控制并非易事。同时,在 SwiftUI 的动画系统中,Transaction 始终有点像谜一样的存在。无论是官方资料还是第三方文章,都很少对其运作机制进行系统的阐述。本文将通过探讨 Transaction 的原理、作用、创建和分发逻辑等内容,告诉读者如何在 SwiftUI 中实现更加精确的动画控制,以及需要注意的其他问题。
- SwiftUI geometryGroup() 指南:从原理到实践
在 WWDC 2023 中,苹果为 SwiftUI 添加了一个新的修饰器:geometryGroup()。它可以解决一些之前无法处理或处理起来比较困难的动画异常。本文将介绍 geometryGroup() 的概念、用法,以及在低版本 SwiftUI 中,在不使用 geometryGroup() 的情况下如何处理异常。
精解布局容器
- GeometryReader :好东西还是坏东西?
GeometryReader 自 SwiftUI 诞生之初就存在,它在许多场景中扮演着重要的角色。然而,从一开始就有开发者对其持负面态度,认为应尽量避免使用。特别是在最近几次 SwiftUI 更新中新增了一些可以替代 GeometryReader 的 API 后,这种观点进一步加强。本文将对 GeometryReader 的“常见问题”进行剖析,看看它是否真的如此不堪,以及那些被批评为“不符预期”的表现,是否其实是因为开发者的“预期”本身存在问题。
- 掌握 ViewThatFits
在 iOS 16 中,SwiftUI 增加了一个新的自适应布局容器 ViewThatFits。正如其名称所示,它的作用是在给定的多个视图中找出最合适的视图并使用。对于大多数人来说,这是一个简单易用的容器。不过,本文打算对其进行彻底的剖析,包括规则细节、理想尺寸的含义、使用示例等。最后,我们将创建一个复刻版本的 ViewThatFits,以加深对其的认识和理解。
- 掌握 SwiftUI 的 Safe Area
Safe Area(安全区域)是指不与导航栏、标签栏、工具栏或其他视图控制器提供的视图重叠的内容空间。本文将探讨如何在 SwiftUI 中获取 SafeAreaInsets、将视图绘制到安全区域之外、修改视图的安全区域等内容。
- 深入了解 SwiftUI 5 中 ScrollView 的新功能
在 SwiftUI 5.0 中,苹果大幅强化了 ScrollView 功能。新增了大量新颖、完善的 API。本文将对这些新功能进行介绍,希望能够让它们更多、更早的帮助到有需要的开发者。
- 用 Table 在 SwiftUI 下创建表格
Table 是 SwiftUI 3.0 中为 macOS 平台提供的表格控件,开发者通过它可以快捷地创建可交互的多列表格。在 WWDC 2022 中,Table 被拓展到 iPadOS 平台,让其拥有了更大的施展空间。本文将介绍 Table 的用法、分析 Table 的特点以及如何在其他的平台上实现类似的功能。
- SwiftUI 4.0 的全新导航系统
长久以来,开发者对 SwiftUI 的导航系统颇有微词。受 NavigationView 的能力限制,开发者需要动用各种技巧乃至黑科技才能实现一些本应具备基本功能(例如:返回根视图、向堆栈添加任意视图、返回任意层级视图 、Deep Link 跳转等 )。SwiftUI 4.0( iOS 16+ 、macOS 13+ )对导航系统作出了重大改变,提供了以视图堆栈为管理对象的新 API ,让开发者可以轻松实现编程式导航。本文将对新的导航系统作以介绍。
- 在 SwiftUI 中使用 UIKit 视图
本文将通过对 UITextField 的包装来讲解如何在 SwiftUI 中使用 UIKit 视图、如何让你的 UIKit 包装视图具有 SwiftUI 风格、在 SwiftUI 使用 UIKit 视图需要注意的地方
- 深入探索 SwiftUI 中的 Overlay 和 Background 修饰器
在 SwiftUI 的工具箱中,overlay 和 background 是两个极其有用的视图修饰器,它们在多种开发场景中扮演着不可或缺的角色。本文将深入探索这两种修饰器的独特属性,并明确它们与 ZStack 的基本差异,以及适合它们的应用场景。
- 精通 SwiftUI 的 containerRelativeFrame 修饰器
在 WWDC 2023 上,苹果公司为 SwiftUI 引入了 containerRelativeFrame 视图修饰器。这个修饰器使得一些以往难以通过常规方法实现的布局操作变得十分简单。本文将深入探讨 containerRelativeFrame 修饰器,内容涵盖定义、布局规则、使用场景以及相关注意事项。在文章的最后,我们还将创建一个兼容旧版本 SwiftUI 的 containerRelativeFrame 复刻版,通过这一实践加深对其功能的理解。
- 在 SwiftUI 中,spacing = nil 表示什么?
在 SwiftUI 中,许多布局容器的构造函数都包含一个默认值为 nil 的 spacing 参数,该参数负责控制临近视图之间的间隙。本文将从这一默认参数出发,深入探讨 SwiftUI 中的 Spacing 概念,并分享一些相关的技巧及注意事项。
布局示例
- 在 SwiftUI 中实现视图居中的若干种方法
将某个视图在父视图中居中显示是一个常见的需求,即使对于 SwiftUI 的初学者来说这也并非难事。在 SwiftUI 中,有很多手段可以达成此目的。本文将介绍其中的一些方法,并对每种方法背后的实现原理、适用场景以及注意事项做以说明。
- 用 SwiftUI 的方式进行布局
最近时常有朋友反映,尽管 SwiftUI 的布局系统学习门槛很低,但当真正面对要求较高的设计需求时,好像又无从下手。SwiftUI 真的具备创建复杂用户界面的能力吗?本文将通过用多种手段完成同一需求的方式,展示 SwiftUI 布局系统的强大与灵活,并通过这些示例让开发者对 SwiftUI 的布局逻辑有更多的认识和理解。
- 在 Text 中实现基于关键字的搜索和定位
前些日子,一位网友在聊天室中就如何通过 Text + AttributedString 实现类似文章关键字检索的功能,并可通过按钮在搜索结果中进行滚动切换的问题与大家进行了交流与探讨。考虑到这个问题对于 SwiftUI 的应用来说比较新颖,且涉及不少博客中介绍过的知识,因此我对聊天室原本给出的解决方案进行了重新整理,并通过本文对解决思路、方法手段以及注意事项等内容与大家进行探讨。
- 在 SwiftUI 中用 Text 实现图文混排
SwiftUI 提供了强大的布局能力,不过这些布局操作都是在视图之间进行的。当我们想在 Text 中进行图文混排时,需要采用与视图布局不同的思路与操作方式。本文将首先介绍一些与 Text 有关的知识,并通过一个实际案例,为大家梳理出在 SwiftUI 中用 Text 实现图文混排的思路。