Skip to content

使用 UI 控件

在 Landmarks app 中,用户可以创建个人简介来展示自己。为了让用户能修改个人简介,我们需要添加一个编辑模式,并设计一个偏好设置界面。

请先下载本节资源文件,并按照下面的步骤进行。

  • 预计完成时间:25 分钟
  • 资源文件:下载

1. 显示用户简介

Landmarks app 在本地保存一些详细配置和偏好设置。在用户编辑他们的简介前,会在一个没有修改控件的摘要视图中显示出来。

第 1 步

首先在 Model 目录中创建一个名为 Profile.swiftSwift File 文件,并在其中定义一个用户配置文件。

第 2 步

接下来,在 Views 目录下创建一个名为 Profiles 的子目录,然后在里面创建一个新文件 ProfileHost.swift,该视图为文本视图,显示存储的配置文件的用户名。

ProfileHost 视图负责用户信息的静态摘要视图以及编辑模式

第 3 步

Profiles 目录中创建一个名为 ProfileSummary 的新视图,该持有一个 Profile 实例并显示一些基本用户信息。

ProfileSummary 持有一个 Profile 值要比一个简介的绑定更合适,因为它的父视图 ProfileHost 负责管理它的 state

第 4 步

更新 ProfileHost 来显示简介视图

第 5 步

创建一个新视图 HikeBadge ,这个视图组合了 绘制路径和形状 中的徽章以及一些远足的描述文本。

徽章只是一个图形,因此 HikeBadge 中的文本以及 accessibility(label:) 修饰符让徽章对其他用户来说含义更加清晰。

注意:两个调用 frame(width:height:) 的修饰符让徽章以 300 × 300 点的设计尺寸进行缩放渲染。

第 6 步

更新 ProfileSummary,给它添加几个具有不同色调的徽章以及获得徽章的原因。

第 7 步

引入 动画视图与转场 中的 HikeView 来完成 ProfileSummary

第 8 步

CategoryHome.swift 中,使用 toolbar 修饰符在导航条上添加一个用户资料按钮,当用户点击它时,显示 ProfileHost 视图。

第 9 步

添加 listStyle 修饰符,选择一个更适合内容的列表样式。

第 10 步

切换到实时预览,并尝试点击个人简介按钮来查看个人信息。

使用 UI 控件 has loaded