注册

iOS SwiftUI 应用设计与布局 1.1

第四节 组合首页

Landmarks应用的首页在用户点击查看地标详情前需要先把地标的一些简单信息展示出来。复用之前创建的视图构建具体某一类别地标的行视图

section 4

步骤1 在CategoryRow.swift文件中,与CategoryRow类型并列,创建一个新的自定义视图类型CategoryItem,用这个新的视图类型替换CategoryRow的地标名称Text控件

section 4 step 1

步骤2 在CategoryHome.swift中,添加一个名为FeaturedLandmarks的简单视图,这个视图用来显示地标数据中isFeatured属性为真的那些地标。在之后的教程中,会把FeaturedLandmarks这个视图修改成一个交互式轮播图。目前,这个视图仅仅展示一张缩放和剪裁后的地标图片。

section 4 step 2

步骤3 把视图的边距设置为0,让展示内容可以尽量贴着屏幕边沿

section 4 step 3

第五节

现在所有类别的地标都可以在首页视图中展示出来,用户还需要能够进入应用其它页面的方法。使用页面导航和相关API来实现用户从应用首页到地标详情页、收藏列表页及用户个人中心页的跳转。

section 5

步骤1 在CategoryRow.swift中,把CategoryItem视图包裹在NavigationLink视图中。CategoryItem这时做为跳转按钮的内容,destination指定点击NavigationLink按钮时要跳转的目标视图。

section 5 step 1

section 5 step 1 gif

步骤2 使用renderingMode(_:)foregroundColor(_:)这两个属性修改器来改变地标类别项的导航样式。做为NavigationLink标签的CategoryItem中的文本会使用Environment中的强调颜色,图片可能以模板图片的方式渲染,这些都可以使用属性修改器来调整,达到最佳效果。

section 5 step 2

步骤3 在CategoryHome.swift中,添加一个模态展示的用户信息展示页,点击了用户图标时弹出展示。当状态showProfile被置为true时,展示用户信息页,当showProfile状态置为false时,用户信息页消失。

section 5 step 3

步骤4 在导航条上添加一个按钮,用来切换showProfile状态的值:true或者false

section 5 step 4

section 5 step 4 gif

步骤5 在CategoryHome.swift中添加一个跳转链接,点击时跳转到全部地标的筛选页面。

section 5 step 5

section 5 step 5 gif

步骤6 把LandmarkList.swift中的把包裹地标列表视图的NavigationView移动到对应的预览视图中。因为在应用中,LandmarkList总是会被展示在CategoryHome.swift定义的导航视图中。

section 5 step 6

检查是否理解

问题1 对于Landmarks这个应用来说,哪一个视图是它的根视图?

  •  SceneDelegate
  •  Landmarks
  •  CategoryHome

问题2 CategoryHome这个视图是如何与应用的其它视图联动起来的

  •  在不同地标之间复用图片资源
  •  与其它视图使用一致的命名规范和属性修改器语法
  •  使用导航结构把地标应用中所有视图连接在一起


0 个评论

要回复文章请先登录注册