Section 08 : SF Symbols and Props

Section 08 : SF Symbols and Props - SF 符号与属性 (13’31")

How to use Apple’s iOS icons and pass values to components.

使用苹果 iOS 图标与向组件传递值

1. SF 符号

SF 符号包括超过1500个可配置的符号,与苹果平台的系统字体 San Francisco 无缝集成。SF符号的字号和字形都很丰富,可以自动与文本标签对齐,支持动态类型和辅助功能的粗体文本。您还可以设计具有相同设计特征和辅助功能的自定义符号。

(1)下载 SF Symbols App

下载链接:https://developer.apple.com/design/downloads/SF-Symbols.dmg

(2)安装 SF Symbols App

双击下载的文件,根据提示安装 App,可以在 启动台中找到它。启动 App,大叔建议最好是设置为“在程序坞中保留”,这样今后使用方便些。

(3)使用 SF Symbols

在App中,可以看见很多个图标,左侧边栏对图标做了一些分类,右侧图标的显示方式有列表和缩略图两种。每个图标都有自己的名字。使用的时候复制名称就好。另外,顶部工具栏中可以选择字体(我尝试更换字体,但是没看出变化,不知道为啥,大概我没下载相关的字体吧。)和字号(预设好的,我们在前面 fontWeight 修饰器中有过体会的)。因为是系统内置的,所以不用在 assets 文件夹中保留需要使用的图标文件,用起来还是很方便的。

补充知识:

  • 如果使用 Sketch 或 Figma 设计 SF 符号,需要下载字体,官网有关字体的页面提供了字体的下载。
  • 苹果官网的人机界面指南值得每个开发者认真看看。遵循这个指南,我想开发出来的 app 更显得那么正宗一丢丢,好像是科班出来的。 比如,排版(Typography)部分就介绍了字体、字形、字号等内容,包括修饰器使用的默认值。

2. 新建视图 MenuView

下面为今天课程需要的菜单创建一个单独的视图文件。

(1)打开项目浏览器(快捷键⇧ + ⌘ + J),在 ContentView 文件上右击选择 New File...(大叔说,有很多方法,菜单啊什么的,也可以快捷键⌘ N。视频中的方法利于快速定位新建文件的保存位置)

(2)在对话框中选择 SwiftUI View 类型,单击 Next,选择保存路径(一般不改),在 Save as 的文本框中输入文件名(这里我们输入 MenuView),确认下面那个 Targets 中已经勾选项目。然后单击 Create

可以看见与 ContentView 文件所在的文件夹中,创建了名为 MenuView 的文件,并且编辑器已经自动切换到编辑这个文件。

3. 制作并抽取 MenuRow 视图

以往的网页设计,都是先搭好整个页面的框架,再逐步填充细节,我觉得可能是因为那种标签套标签的原因吧。大叔去年学习的 Vue 因为使用了组件的概念,比最初的 HTML 要清晰了许多,特别是各个组件的功能和样式细节上。

这里用是方式也是从最具体的某个组件开始,逐步向父级容器(类似 HTML 标签中的上一层)拓展。类似前面提到的,这里的页面设计实现过程好像是玩拼图,一片一片地最终组合成完整的视图。

(1)在 ContentView 中设计好菜单行——封装在一个 HStack 中的 icon 图片和文本框,然后先封装在一个 VStack 中,再将这个 HStack 抽取为子视图 MenuRow。

(2)为 MenuView 视图添加两个属性,标题 Title 和图标 iconName。类型都是 String,用于记录菜单项的标题和前面图标的名称。

视图 MenuRow 的代码如下:

struct MenuRow: View {
    var title: String   	// 定义标题属性,如果定义了默认值,则调用的时候可以省略
    var iconName: String    // 定义图标名称属性
    
    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: iconName)   // gear 就是 SF 符号的名称
                .font(.system(size: 20, weight: .light))	// 字体修饰
                .imageScale(.large)							// 图片缩放
            Text(title)
                .font(.system(size: 20, weight: .bold, design: .default))
        }
    }
}

4. 调用 MenuRow 视图

(1)修改 MenuView 中对 MenuRow 视图的调用。

由于上一步给 MenuRow 增加了属性,此时默认的无参数调用就会报错了。Xcode 很智能,报错的同时给了个 Fix 按钮,点击后可以发现自动增加了第一个参数 title。但是这样还不行,继续报错。再次查看错误提示并点击 Fix 按钮,Xcode 智能补充了第二个参数 iconName。暂时不报错了,等待我们输入具体的参数值。

(2)在 MenuView 中再增加两个 MenuRow。分别指定标题和图标名称。

(3)给包裹 MenuRow 的VStack增加修饰。

struct MenuView: View {
    var body: some View {
        VStack {
            Spacer()        // 占位
            
            VStack(spacing: 16) {
                MenuRow(title: "账  号", iconName: "gear")
                MenuRow(title: "账  单", iconName: "creditcard")
                MenuRow(title: "退  出", iconName: "person.circle")
            }
            .frame(maxWidth: .infinity)
            .frame(height: 300)
            .background(Color.white)
            .clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
            .shadow(radius: 30)
            .padding()
        }
        .padding(.bottom, 30)   // 底部留空
    }
}

这里我们再次看到用了两个 frame,这是因为 frame 直接指定宽高的 init() 和定义相对宽高的 init() 的参数不能混用。

// 这么写是错误的
Text("hello")
	.frame(maxWidth: .infinity, height: 300)

本节小结

本节代码请参见 GitHub 和 码云

  • SF 符号
  • 新建文件
  • 为视图添加属性
  • 调用视图时根据需要输入参数
  • 参数不同的方法不能混用

接下来

给菜单加上头像,学习渐变和颜色等……

你可能感兴趣的:(SwiftUI)