SwiftUI极简开发
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.5　Xcode常用功能介绍

本节分享Xcode开发工具的常用功能和使用技巧。

在通常情况下，可以单击Xcode右上角的收起视图按钮，以扩大中心视图的展示区域。收起右侧视图效果如图1-11所示。

图1-11　收起右侧视图效果

1.5.1　代码编辑区域

接下来可以看到Xcode在创建项目时自动创建的代码示例，首先介绍左侧的代码编辑区域。

Xcode创建了一个SwiftUI文件ContentView，在ContentView文件中，将SwiftUI引入项目中，随后声明了一个遵循View协议的结构体ContentView。代码编辑区域如图1-12所示。

import SwiftUI
　
struct ContentView: View {
    var body: some View {
        // View的内容
    }
}

图1-12　代码编辑区域

对于遵循View协议的ContentView，其内容将会在Xcode右侧的实时预览窗口中呈现。因此，开发者可以遵循这样的代码结构，创建多个 UI 视图来搭建应用的界面。要想用通俗的语言描述上述操作，就是创建一个叫作ContentView的View界面。

而在View协议中，声明了一个body属性的视图容器，它遵循的是some View协议。可以将some View协议当作一个View容器，相当于在ContentView界面中放置了一个body属性的视图容器，开发者在界面中创建的所有视图元素都需要放置在这个容器中。

1.5.2　实时预览窗口

Xcode代码示例中使用了VStack，在VStack中又放置了一个Image（图片）视图和一个Text（文字）视图。我们可以在右侧的实时预览窗口中查看项目的最终呈现效果，实时预览窗口如图1-13所示。

图1-13　实时预览窗口

实时预览窗口的内容则来自遵循PreviewProvider协议的结构体ContentView_Previews，预览的视图默认为ContentView视图。开发者在创建子视图时，可能由于子视图有绑定关系或者有参数传入，需要删除或者注释与PreviewProvider相关的代码，注释代码的键盘快捷键为“Command+/”。注释项目预览代码如图1-14所示。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

将与 PreviewProvider 相关的代码注释后，右侧实时预览窗口则会隐藏起来，后续也可以按下“Command+/”键盘快捷键取消注释来显示实时预览窗口。

当开发者进行某些操作导致实时预览窗口被Xcode隐藏时，还可以通过设置实时预览窗口上方的“Adjust Editor Option”（调整编辑器选项）中的“Canvas”（画布）来显示和隐藏实时预览窗口。“Adjust Editor Option”中的“Canvas”如图1-15所示。

图1-14　注释项目预览代码

图1-15 “Adjust Editor Option”中的“Canvas”

编辑代码的另一个常用小技巧是可以启用代码的缩略视图窗口。当代码编辑区域的代码量较大时，可以通过设置“Adjust Editor Option”中的“Minimap”来查看代码的缩略信息，开发者也可以快速定位代码位置。“Minimap”选项如图1-16所示。

默认预览的模拟器型号为iPhone 14 Pro，开发者也可以在Xcode顶部菜单栏进行预览设备的切换，选择适合当前项目开发的设备型号进行效果预览。切换预览设备如图1-17所示。

图1-16 “Minimap”选项

图1-17　切换预览设备

1.5.3　项目预览操作栏

在实时预览窗口中，预览设备底部的项目预览操作栏提供了项目预览的常用操作。

提高代码编写效率的有效途径之一是实现代码最终效果的实时预览功能。单击项目预览操作栏的“Live”（模拟互动）按钮，即可实现实时模拟界面的交互效果，每当视图相关代码改变时，就会自动实时渲染UI。当UI层级出现结构性调整时，可单击此按钮重新加载预览界面。“Live”按钮如图1-18所示。

图1-18 “Live”按钮

“Selectable”（选择模式）按钮可将实时预览窗口效果切换至UI元素选择模式。当单击预览设备中的元素时，左侧代码编辑区域将自动定位该UI元素对应的代码。在代码编辑区域修改UI元素的属性或者增加修饰符时，也可以在实时预览窗口的选择模式下，查看UI元素的尺寸大小和修饰效果。“Selectable”按钮如图1-19所示。

图1-19 “Selectable”按钮

“Variants”（场景对比）按钮用于快速比较不同场景下设备预览的效果。在iOS 13中，Apple引入了全局“深色模式”的设计理念，也要求所有开发者在开发应用时必须支持深色模式。开发者在开发过程中就可以借助项目预览操作栏中的“Variants”，查看不同场景下的项目效果。

通过“Color Scheme Variants”，开发者可以查看项目在不同颜色场景下的效果，预览浅色模式和深色模式下的效果。颜色场景对比如图1-20所示。

图1-20　颜色场景对比

在实时预览窗口中，也可以通过“Orientation Variants”查看项目在不同设备方向场景下的效果，预览设备在纵向、横向（左边横向、右边横向）场景下的效果，在通常情况下，大多数应用都是纵向布局的，当然，也可以在项目的配置菜单中取消勾选横向展示的功能。设备方向场景对比如图1-21所示。

图1-21　设备方向场景对比

最后一项是“Dynamic Type Variants”（字体大小对比），通过它可以看到开发者选用的不同字体大小在界面中的效果。字体大小的范围从X Small到AX 5，当开发者没有指定字体大小时，系统默认的字体大小是“Large”。字体大小对比如图1-22所示。

图1-22　字体大小对比

由于字体大小的选用将影响到UI的排版和实际效果，因此开发者最好在UI设计上拥有或者借鉴一套设计规范，以设计出精美且优秀的应用。

除了通过“Variants”进行场景对比，如果开发者只想查看某一特定场景下的预览效果，那么可以在单击“Live”按钮后，通过配置“Canvas Device Settings”（画布设备设置）来查看效果，配置“Canvas Device Settings”如图1-23所示。

图1-23　配置“Canvas Device Settings”

在单击“Live”按钮后，也可以开启“Preview on Device”（在设备中预览），于是当开发者接入真机设备时，就可以在实时预览窗口和真机设备上同步预览项目效果。

最右侧的一组按钮则比较简单，用于调整实时预览窗口中设备的预览大小，这里不做过多说明。使用比较频繁的按钮是“Zoom to fit”（自适应缩放）按钮，该按钮让预览设备可以以合适的预览大小呈现，“Zoom to fit”按钮如图1-24所示。

图1-24 “Zoom to fit”按钮

综上，开发者可以在不借助模拟器和真机设备的情况下，实时预览项目的交互、动画、数据处理、UI布局等效果。

上一章目录下一章