iOS开发高级分享 - MacOSCatalina和Xcode 11 的快速​UI预览

46 篇文章 5 订阅
15 篇文章 0 订阅
本文详细介绍了如何在Xcode 11和MacOS Catalina环境下,利用SwiftUI进行快速UI预览,包括预览多个国家和地区、黑暗模式、动态类型大小、不同设备及视图控制器。通过SwiftUI,开发者可以实时查看代码更改的效果,显著提升iOS应用开发效率。
摘要由CSDN通过智能技术生成

本文中描述的功能要求如下:

  • Xcode 11
  • MacOS Catalina
  • IOS 13设置为基SDK你的应用程序调试配置

如果没有这三种情况,您的代码要么不会编译,要么不会呈现实时预览。

点击此处即可获取精选面试资料

对于SwiftUI

我们可以开始使用它的功能今天从根本上加快和改进我们的发展进程-在不改变我们的UIKit应用程序中的代码行的情况下,子类UIButton它在自己周围画了一条边界:

final class BorderedButton: UIButton {
    var cornerRadius: CGFloat { ... }
    var borderWidth: CGFloat { ... }
    var borderColor: UIColor? { ... }
}

通常,如果我们想测试UI元素的性能,我们必须将其添加到应用程序中的视图中,生成和运行,并导航到该屏幕。但是使用xcode 11,我们现在可以看到与代码编辑器并行的预览,方法是在BorderedButton:

使用名为动态替换,Xcode可以在不重新编译的情况下更新此预览-在进行代码更改的瞬间内。这使您能够以前所未有的方式快速地进行原型更改。

想看看你的按钮是如何处理长标题的吗?在调用setTitle(_:for:)在您的预览,并测试潜在的修补程序在您的基础实现

UIViewPreview是我们创建的自定义泛型结构,以便方便地主持UIView子类。请随便下载源代码并将其直接添加到项目中。

为了使Xcode Preview为非SWIFUI应用程序工作所需的条件导入和IOS 13 BasSDK设置,合并适当的依赖关系将变得复杂,因此在这个特定的例子中,我们认为最好直接嵌入这些文件。

预览多个国家

假设我们的应用程序FavoriteButton-远房表妹(也许按组成)BorderedButton…在默认状态下,它显示标题为“收藏”,并显示♡图标。当它isFavorited属性设置为true,标题设置为“不喜欢”,并显示 ♡̸ 图标。

我们可以同时预览两个UIViewPreview单个SwiftUI中的实例Group:

锁链previewLayout和padding方法的每个成员。Group…你可以用这些其他View方法若要更改预览的外观,请执行以下操作。

预览黑暗模式

带着iOS 13中的暗模式,最好是反复检查您的自定义视图是否配置了动态颜色,或者以其他方式兼顾了光线和黑暗的外观。

一个简单的方法是使用ForEach元素中的每个情况呈现预览。ColorScheme枚举:

当呈现预览时ForEach,使用previewDisplayName方法以帮助区分所有枚举值。

预览动态类型大小类别

我们可以使用相同的方法在各种视图中预览我们的视图。动态类型尺寸:

预览不同的地区

Xcode预览在将应用程序本地化为多种语言时特别节省时间。与在不同语言和区域之间来回配置模拟器的麻烦相比,这种新方法产生了巨大的差异。

比方说,除了英语之外,您的应用程序还支持各种从右到左的语言…你可以确认你的RTL逻辑像预期的那样工作:

我们不知道一个容易使用的方法NSLocalizedString有明确的地点。您可能会遇到从包中的字符串文件中检索本地化字符串的麻烦,但在大多数情况下,在预览中只需编写硬编码文本即可。

在不同设备上预览视图控制器

SwiftUI预览不仅限于视图,还可以与视图控制器一起使用。通过创建习俗UIViewControllerPreview类型利用一些新的UIStoryboardIOS 13中的类方法,我们可以轻松地在各种设备上预览我们的视图控制器-一个在另一个设备之上:

目前还没有办法获得SWIFUI设备预览在景观方向。尽管您可以使用固定大小的预览布局来近似这一点,但请注意,它不会尊重iPhone上的安全区域,也不会在iPad上正确呈现拆分视图。

尽管我们大多数人还需要几年时间才能在我们的应用程序中发布SwiftUI(无论是出于选择还是必要),但我们都可以立即受益于Xcode 11在MacOS Catalina上所提供的数量级改进。

你认为如何?请通过加我们的交流群 点击此处进交流群 ,来一起交流或者发布您的问题,意见或反馈。

原文地址:https://nshipster.com/swiftui-previews/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值