注册

iOS SwiftUI 应用设计与布局 1.0

应用设计与布局

深入了解使用SwiftUI创建的复杂的用户界面的结构和布局

app design and layout

包含章节

组合复杂用户界面

Landmarks应用的首页是一个纵向滚动的地标类别列表,每一个类别内部是一个横向滑动列表。随后将构建应用的页面导航,这个过程中可以学习到如果组合各种视图,并让它们适配不同的设备尺寸和设备方向。

 项目文件

第一节 添加一个首页视图

已经创建了所有在Landmarks应用中需要的视图,现在给应用创建一个首页视图,把之前创建的视图整合起来。首页不仅仅包含之前创建的视图,它还提供页面间导航的方式,同时也可以展示各种地标信息。

section 1

步骤1 创建一个名为CategoryHome.swift的自定义视图文件

section 1 step 1

步骤2 把应用的场景代理(scene delegate)的根视图从之前的地标列表视图更改为新创建的首页视图。现在应用启动后的每一个页面就是首页了,所以还需要添加从首页导航跳转到其它页面的方法。

section 1 step 2

步骤3 添加NavigationView,这个NavigationView将会容纳Landmarks应用中其它不同的视图。配合使用NavigationViewNavigationLink及相关的修改器,就可以构建出应用的页面间导航结构

section 1 step 3

步骤4 设置导航栏标题为Featured

section 1 step 4

第二节 创建地标类别列表

Landmarks应用为了便于用户浏览各种类别的地标,将地标按类别竖向排列形成列表视图,对于每一个类别内的具体地标,又把它们按照水平方向排列,形成横向列表。组合使用垂直栈(vertical statck)和水平栈(horizontal stack)并给列表添加滚动

section 2

步骤1 使用Dictionary结构体的初始化方法init(grouping:by:),把地标数据的类别属性category传入作为分组依据,可以把地标数据按类别分组。工程文件中已经为每一个地标样本数据预定义了类别。

section 2 step 1

步骤2 使用List显示地标数据的类别。Landmark.Category是枚举类型,它的值标识列表中每一种类别,可以保证类别不会有重复定义

section 2 step 1

第三节 添加针对单个类别的地标行列表

Landmarks应用对每个类别下的地标采用横向滑动的行进行展示。添加一个新的视图类型用来表示这样一个地标行,然后使用这个新创建的行类型具体展示某一具体类型上的所有地标。

section 3

步骤1 定义一个新的视图类型,用来展示地标类别行的内容。新建行视图需要存放地标具体类别的展示数据

section 3 step 1

步骤2 更新CategoryHome.swift的代码,把地标类别信息传给新建的行视图类型

section 3 step 2

步骤3 在CategoryRow.swift中使用一个HStack展示类别下的地标内容

section 3 step 3

步骤4 为行内容指定一个高度,并把行内容嵌入到ScrollView中,以支持横向滑动。预览视图时,可以多增加几个地标数据,用来查看列表的滑动是否正常。

section 3 step 4


0 个评论

要回复文章请先登录注册