Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >SwiftUI 布局:如何自定义 AlignmentGuides

SwiftUI 布局:如何自定义 AlignmentGuides

作者头像
Swift社区
发布于 2021-11-26 05:10:48
发布于 2021-11-26 05:10:48
1.1K00
代码可运行
举报
文章被收录于专栏:Swift社区Swift社区
运行总次数:0
代码可运行

SwiftUI 为我们提供了视图不同边缘的对齐指南(.leading、trailing、top等)以及.center和两个基线选项来帮助文本对齐。

然而,当您处理在不同视图之间分割的视图时,这些方法都不能很好地工作——如果您必须使在用户界面完全不同的两个视图部分对齐。

为了解决这个问题,SwiftUI 允许我们创建自定义的对齐辅助线,并在整个 UI 的视图中使用这些辅助线。在这些视图之前或之后发生什么并不重要,它们仍然会排成一条线。

例如,下面的布局在左侧显示我的 Twitter 帐户名和我的个人资料图片,右侧显示 “Full name:” 加上 “Wei Xian” 的大号字体:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
struct ContentView: View {
    var body: some View {
        HStack {
            VStack {
                Text("@twostraws")
                Image("wei-xian")
                    .resizable()
                    .frame(width: 64, height: 64)
            }

            VStack {
                Text("Full name:")
                Text("WEI XIAN")
                    .font(.largeTitle)
            }
        }
    }
}

如果你想让 “@twostraws” 和 “Wei Xian” 垂直对齐,你现在就很难了。水平堆栈内部包含两个垂直堆栈,因此没有内置的方法来获得所需的对齐方式——像HStack(alignment: .top) 这样的方便的方式。

要解决这个问题,我们需要定义一个自定义布局指南。这应该是VerticalAlignment或HorizontalAlignment的扩展,并且是符合AlignmentID协议的自定义类型。

当我说“自定义类型”时,您可能会想到一个结构体,但实际上,将其作为枚举来实现是一个好主意,我将很快解释。

AlignmentID协议只有一个要求,即一致性类型必须提供一个静态defaultValue(in:)方法,该方法接受ViewDimensions对象并返回一个CGFloat,指定如果视图没有alignmentGuide()修饰符,该视图应该如何对齐。您将获得视图的现有ViewDimensions对象,因此您可以选择其中一个作为默认值,也可以使用硬编码值。

让我们写出代码,这样您就可以看到它的样子:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
extension VerticalAlignment {
    struct MidAccountAndName: AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            d[.top]
        }
    }

    static let midAccountAndName = VerticalAlignment(MidAccountAndName.self)
}

您可以看到我在默认情况下使用了.top视图维度,并且还创建了一个名为midAccountAndName的静态常量,以使自定义对齐更易于使用。

现在,我提到使用枚举比使用结构体更可取,原因如下:

我们刚刚创建了一个名为MidAccountAndName的新结构体,这意味着我们可以(如果需要的话)创建该结构体的实例,即使这样做没有任何意义,因为它没有任何功能。如果将struct MidAccountAndName替换为enum MidAccountAndName,那么就不能再创建它的一个实例了——它的存在只是为了容纳一些功能。

无论您选择的是枚举还是结构体,其用法都保持不变:将其设置为堆栈的对齐方式,然后使用alignmentGuide()在要对齐的任何视图上激活它。这只是一个指南:它帮助您沿一条直线对齐视图,但没有说明如何对齐视图。这意味着您仍然需要为alignmentGuide()提供闭包,该闭包可以根据需要定位视图。

例如,我们可以将 Twitter 代码更新为use.midAccountAndName,然后告诉帐户和名称使用其中心位置作为指南。明确地说,这意味着“对齐这两个视图,使它们的中心都位于.midAccountAndName指南上”。

下面是代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
HStack(alignment: .midAccountAndName) {
    VStack {
        Text("@twostraws")
            .alignmentGuide(.midAccountAndName) { d in d[VerticalAlignment.center] }
        Image("paul-hudson")
            .resizable()
            .frame(width: 64, height: 64)
    }

    VStack {
        Text("Full name:")
        Text("PAUL HUDSON")
            .alignmentGuide(.midAccountAndName) { d in d[VerticalAlignment.center] }
            .font(.largeTitle)
    }
}

这将确保它们是垂直对齐的,不管前面或后面是什么。我建议您尝试在我们的示例前后添加更多的文本视图 –SwiftUI 将重新定位所有内容,以确保我们对齐的两个视图保持不变。

译自 How to create a custom alignment guide

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-04-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Swift社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
SwiftUI 布局 —— 对齐
“对齐”是 SwiftUI 中极为重要的概念,然而相当多的开发者并不能很好地驾驭这个布局利器。在 WWDC 2022 中,苹果为 SwiftUI 增添了 Layout 协议,让我们有了更多的机会了解和验证 SwiftUI 的布局原理。本文将结合 Layout 协议的内容对 SwiftUI 的 “对齐” 进行梳理,希望能让读者对“对齐”有更加清晰地认识和掌握。
东坡肘子
2022/07/28
6.6K0
SwiftUI 布局 —— 对齐
SwiftUI 之 HStack 和 VStack 的切换
SwiftUI 的各种堆栈是许多框架中最基本的布局工具,能够让我们定义组视图,这些组视图可以按照水平、垂直或覆盖视图对齐。
Swift社区
2022/12/12
3K0
SwiftUI 布局 —— 尺寸( 下 )
在 上篇[3] 中,我们对 SwiftUI 布局过程中涉及的众多尺寸概念进行了说明。本篇中,我们将通过对视图修饰器 frame 和 offset 的仿制进一步加深对 SwiftUI 布局机制的理解,并通过一些示例展示在布局时需要注意的问题。
东坡肘子
2022/07/28
2.8K0
SwiftUI 布局 —— 尺寸( 下 )
SwiftUI 布局协议 - Part 1
今年 SwiftUI 新增最好的功能之一必须是布局协议。它不但让我们参与到布局过程中,而且也给了我们一个很好的机会去更好的理解布局在 SwiftUI 中的作用。
Swift社区
2022/12/12
3.4K0
SwiftUI 布局协议 - Part 1
SwiftUI案例:3D旋转图片播放器
任选 7 张任意尺寸的图片按 p1 至 p7 进行命名并拖拽进 Assets.xcassets 文件中(如图所示)
DioxideCN
2022/08/05
2.5K0
SwiftUI案例:3D旋转图片播放器
用 SwiftUI 的方式进行布局
最近时常有朋友反映,尽管 SwiftUI 的布局系统学习门槛很低,但当真正面对要求较高的设计需求时,好像又无从下手。SwiftUI 真的具备创建复杂用户界面的能力吗?本文将通过用多种手段完成同一需求的方式,展示 SwiftUI 布局系统的强大与灵活,并通过这些示例让开发者对 SwiftUI 的布局逻辑有更多的认识和理解。
东坡肘子
2023/03/08
5K2
用 SwiftUI 的方式进行布局
SwiftUI 布局 —— 尺寸( 上 )
在 SwiftUI 中,尺寸这一布局中极为重要的概念,似乎变得有些神秘。无论是设置尺寸还是获取尺寸都不是那么地符合直觉。本文将从布局的角度入手,为你揭开盖在 SwiftUI 尺寸概念上面纱,了解并掌握 SwiftUI 中众多尺寸的含义与用法;并通过创建符合 Layout 协议的 frame 和 fixedSize 视图修饰器的复制品,让你对 SwiftUI 的布局机制有更加深入地理解。
东坡肘子
2022/07/28
5K0
SwiftUI 布局 —— 尺寸( 上 )
SwiftUI案例:天气
在工作区的项目文件夹下创建名为 SpriteFiles 的 Group 并在其中依次导入 RainFall.sks RainFallLanding.sks
DioxideCN
2022/08/05
5K0
SwiftUI案例:天气
使用 SwiftUI 的 Eager Grids
早在 2020 年,我们就拥有了在 SwiftUI(LazyVGrid 和 LazyHGrid)中绘制网格的新视图控件。两年后,我们又获得了另一种在网格(Grid)中显示视图的视图控件。但是,这些新增功能非常不同,不仅在您使用它的方式上,而且在它内部的行为方式上。2020 年的观点很懒惰。这些新人很热心。
Swift社区
2022/12/12
4.6K0
使用 SwiftUI 的 Eager Grids
在 SwiftUI 中用 Text 实现图文混排
SwiftUI 提供了强大的布局能力,不过这些布局操作都是在视图之间进行的。当我们想在 Text 中进行图文混排时,需要采用与视图布局不同的思路与操作方式。本文将首先介绍一些与 Text 有关的知识,并通过一个实际案例,为大家梳理出在 SwiftUI 中用 Text 实现图文混排的思路。
东坡肘子
2022/12/16
4.7K0
在 SwiftUI 中用 Text 实现图文混排
SwiftUI中的水平条形图
水平条形图以矩形条的形式呈现数据类别,其宽度与它们所代表的数值成正比。本文展示了如何在垂直条形图的基础上创建一个水平柱状图。
韦弦zhy
2022/11/07
5.2K0
SwiftUI中的水平条形图
解析SwiftUI布局细节(二)循环轮播+复杂布局
上一篇我们总结的主要是VStack里面的东西,由他延伸到 @ViewBuilder, 接着我们上一篇总结的我们这篇内容主要说的是下面的几点,在这些东西说完后我准备解析一下苹果在SiwftUI文档中说道的比较好玩的一个东西,具体的我们后面在看。这篇我们还是说我们关于SwiftUI的东西,再提一下Demo代码我已经提交上Git了,目前Demo进度为一级页面基本上结束,地图点击大头针的添加也刚处理完,代码有需要的小伙伴可以去Git看看,项目地址
Mr.RisingSun
2021/01/06
12.6K1
解析SwiftUI布局细节(二)循环轮播+复杂布局
【愚公系列】《AIGC辅助软件开发》013-AI辅助客户端编程:AI辅助 iOS 应用开发
文章链接:https://cloud.tencent.com/developer/article/2473682
愚公搬代码
2024/12/05
9630
WWDC - SwiftUI - 初恋般的感觉
要在Xcode中预览画布上的视图并与之交互,请确保您的Mac运行的是macOS 10.15 beta版。
iOSSir
2019/07/01
4K0
WWDC - SwiftUI - 初恋般的感觉
SwiftUI 布局协议 - Part2
在 Part 1 我们探索了布局协议的基础知识,为理解布局是如何工作的打下了坚实的基础。现在,是时候深入研究那些更少提及的功能了,以及如何使用它们来为我们带来便利。
Swift社区
2023/03/01
2.8K0
SwiftUI 布局协议 - Part2
解析SwiftUI布局细节(一)
在前面的文章中谈了谈对SwiftUI的基本的认识,以及用我们最常见的TB+NA的方式搭建了一个很基本的场景来帮助认识了一下SwiftUI,具体的文章可以在SwiftUI分类部分查找,这篇我准备在写UI的时候从SwiftUI角度我们具体的应该怎样去做,或者说是用SwiftUI我们该从什么角度去解析一个页面。以及对SwiftUI里面的其中一些细节知识做一下分析总结。
Mr.RisingSun
2020/12/21
2.5K0
解析SwiftUI布局细节(一)
使用 SwiftUI 创建一个灵活的选择器
最近,在我正在开发一个在 Dribbble 上找到的设计的 SwiftUI 实现时,我想到了一个点子,可以通过一些酷炫的筛选器扩展该项目以缩小结果列表。
Swift社区
2023/11/03
5220
使用 SwiftUI 创建一个灵活的选择器
自定义 SwiftUI 中符号图像的外观
符号图像是来自 Apple的SF Symbols 库的矢量图标,设计用于在 Apple 平台上使用。这些可缩放的图像适应不同的大小和重量,确保在我们的应用程序中具有一致的高质量图标。在 SwiftUI 中使用符号图像非常简单,只需使用 Image 视图和所需符号的系统名称。下面是一个快速示例:
Swift社区
2024/08/07
4930
自定义 SwiftUI 中符号图像的外观
GeometryReader :好东西还是坏东西?
GeometryReader 自 SwiftUI 诞生之初就存在,它在许多场景中扮演着重要的角色。然而,从一开始就有开发者对其持负面态度,认为应尽量避免使用。特别是在最近几次 SwiftUI 更新中新增了一些可以替代 GeometryReader 的 API 后,这种观点进一步加强。本文将对 GeometryReader 的“常见问题”进行剖析,看看它是否真的如此不堪,以及那些被批评为“不符预期”的表现,是否其实是因为开发者的“预期”本身存在问题。
东坡肘子
2023/11/13
8680
GeometryReader :好东西还是坏东西?
在 SwiftUI 中实现视图居中的若干种方法
将某个视图在父视图中居中显示是一个常见的需求,即使对于 SwiftUI 的初学者来说这也并非难事。在 SwiftUI 中,有很多手段可以达成此目的。本文将介绍其中的一些方法,并对每种方法背后的实现原理、适用场景以及注意事项做以说明。
东坡肘子
2022/12/16
7.4K0
在 SwiftUI 中实现视图居中的若干种方法
相关推荐
SwiftUI 布局 —— 对齐
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验