Return to Video

So Much Real Estate Part 3

  • 0:00 - 0:02
    我们的平板电脑布局已经完成得七七八八
  • 0:02 - 0:03
    现在是时候收尾了
  • 0:03 - 0:05
    我们有两个问题
  • 0:05 - 0:08
    首先 如果在 Nexus 7 或其他 7 英寸平板上试用此布局
  • 0:08 - 0:12
    可能会遇到详细信息视图在横向模式中不能渲染的问题
  • 0:12 - 0:14
    这是因为 网格视图无法满足
  • 0:14 - 0:16
    我们对其施加的约束
  • 0:16 - 0:19
    我们没有足够的空间
  • 0:19 - 0:20
    是因为该视图的设计要求
  • 0:20 - 0:24
    工具栏与详细信息网格对齐而不是在其上方
  • 0:24 - 0:27
    第二个是 Z 轴高度的问题
  • 0:27 - 0:31
    设计方案要求在详细信息视图周围有阴影 但实际上并没有
  • 0:32 - 0:36
    我们希望在所有平台上都有阴影 而不仅仅局限于 Android L 上
  • 0:36 - 0:40
    为此 我们可以从支持库引入另一个小部件 CardView
  • 0:41 - 0:45
    CardView 是一个可在视图周围投射阴影的容器
  • 0:45 - 0:49
    当我们增加卡片的 Z 轴高度时 它会投射更大的阴影
  • 0:49 - 0:53
    请注意 卡片视图有其专属的 Z 轴高度参数
  • 0:53 - 0:56
    我们还可以更改卡片视图四个角的半径
  • 0:56 - 0:58
    以实现带阴影的圆角矩形
  • 0:58 - 1:00
    请注意 它在 Android L 上的效果最好
  • 1:00 - 1:04
    这是因为兼容版本上处理剪切的方式不同
  • 1:04 - 1:07
    由于卡片视图会在其他布局周围绘制内容
  • 1:07 - 1:10
    因此其工作方式与其他视图有所不同
  • 1:10 - 1:11
    你可以控制布局的背景色
  • 1:13 - 1:17
    卡片的背景色、卡片框架周围的内边距
  • 1:18 - 1:23
    以及卡片框架内部的内边距 (卡片及其内容之间的距离)
  • 1:23 - 1:27
    由于 CardView 根据 Z 轴高度在 Android L 中进行渲染
  • 1:27 - 1:31
    因此我们需要了解这如何影响视图的渲染
  • 1:31 - 1:32
    首先
  • 1:32 - 1:37
    Z 轴高度值较大的视图会遮挡 Z 轴高度值较小的视图
  • 1:37 - 1:41
    在嵌套视图中 如果一个视图遮挡某个父视图
  • 1:41 - 1:44
    那么也会遮挡该视图的所有子视图
  • 1:44 - 1:47
    拥有透明背景的视图不会投射阴影
  • 1:48 - 1:52
    透明视图内所含的其他视图
  • 1:52 - 1:53
    也不会投射阴影
  • 1:53 - 1:57
    由于这些限制 创建具有 Z 轴高度的视图时
  • 1:57 - 2:00
    会较容易出现渲染方式不符合预期的问题
  • 2:00 - 2:02
    我们会大量使用相对布局
  • 2:02 - 2:06
    避免添加更多层级 以免妨碍我们实现
  • 2:06 - 2:09
    设计方案所需的阴影
  • 2:09 - 2:12
    还有一件事情 在早于 L 的 Android 版本上
  • 2:12 - 2:16
    卡片视图不会根据圆角矩形边界来剪切内容
  • 2:16 - 2:21
    而是会添加内边距 以避免内容与阴影区域重叠
  • 2:21 - 2:24
    因为我们的卡片上有部分背景是深色的
  • 2:24 - 2:26
    这会导致出现一条白线
  • 2:27 - 2:32
    由于边角重叠 看起来比白线更柔和
  • 2:32 - 2:36
    所以我建议 为我们的卡片视图设置
  • 2:36 - 2:37
    cardPreventCornerOverlap = "false"
Title:
So Much Real Estate Part 3
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
UD855 - Android Fundamentals 2
Duration:
02:38

Chinese, Simplified subtitles

Revisions Compare revisions