YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Chinese, Simplified subtitles

← Build 2-Pane Tablet UI

Get Embed Code
6 Languages

Showing Revision 7 created 07/04/2016 by Udacity Robot.

  1. 既然我们已经知道如何重写其他文件夹中的
  2. 资源
  3. 我们将逐行查看相关代码 了解如何构建双窗格平板电脑 UI
  4. 首先删除值 W820dp 文件夹 因为我们不需要
  5. 在当前方向大于 820dp 时提供特定逻辑
  6. 然后更改布局 XML
  7. 创建新的 layout-sw600dp 文件夹
  8. 添加名为 activity_main 的新文件
  9. 我们使用与基础布局文件夹 activity_main 相同的文件名
  10. 因此 此文件将覆盖特定于平板电脑的行为
  11. 要查看此文件的代码 可以查阅下面的 Gist
  12. 实质上 它是水平线性布局 左侧是
  13. Forecast Fragment 右侧是详情 Fragment
  14. 现在是讨论 Static Fragment 与 Dynamic Fragment 的好时机
  15. 在我们的实现中 Forecast Fragment 是 Static Fragment
  16. 因为我们在 XML 布局中定义它 不管方向或设备尺寸是什么
  17. 我们知道 主 Activity 中都需要一个 Forecast Fragment
  18. 另一方面 我们仅为详情 Fragment 声明容器
  19. 但没有为实际的 Fragment 这样做
  20. 作为 Dynamic Fragment 其每次都采用不同参数进行初始化
  21. 因此 最好是在主 Activity Java 代码中的
  22. Fragment 事务里动态创建和添加该 Fragment
  23. 这样 Fragment Manager 可以追踪这些初始化参数
  24. 并在设备旋转后重新传递给我们
  25. 然后 我们需要更新单窗格 UI 布局
  26. 以便与双窗格情况保持一致
  27. 在基础布局文件夹的 activity_main 文件中
  28. 这就是我们要将其声明为 Forecast Fragment 的框架布局
  29. 这样一来 它将匹配双窗格 UI
  30. 在其中也会将它声明为 XML 中的 Fragment
  31. 这样 主 Activity 根本无需担心在主 Activity 的
  32. onCreateView 方法中
  33. 动态添加 Forecast Fragment
  34. 由于 Fragment 已经位于此布局中 我们只需将其删除
  35. 这样我们无需再次动态添加它
  36. 同样 我们在基础布局文件夹中修改 Activity 详情布局
  37. 我们将框架布局 ID 更改为天气详情容器
  38. 使其匹配双窗格 UI 情况中的容器视图 ID
  39. 此处的模式是详情 Fragment
  40. 在双窗格和单窗格情况下始终被添加到名为
  41. weather_detail_container 的容器中
  42. 由于我们更改了容器的名称
  43. 所以我们也应该更新详情 Activity
  44. 这仅适用于单窗格模式
  45. 我们在此处更改容器的名称
  46. 在单窗格模式中 详情 Activity 会动态地将详情 Fragment
  47. 添加到此容器中
  48. 修改布局后 我们应该更新主 Activity
  49. 以便动态地添加详情 Fragment
  50. 在主 Activity 的 onCreate 方法中 我们检查天气详情容器
  51. 是否显示在布局中 以了解这是否为双窗格 UI
  52. 我们在名为 mTwoPane 的布尔型变量中跟踪此信息
  53. 请记住 它以字母 m 开头 因为它是成员变量
  54. 在本例中 此布尔型变量应为 true
  55. 我们继续创建新的详情 Fragment 然后
  56. 将其添加至 weather_detail_container
  57. 我们通过使用 Fragment 事务来提交更改
  58. Rado 之前已经介绍过
  59. 否则 如果详情容器没有出现在布局中
  60. 则此布尔型变量应为 false 这表示这是适用于手机的单窗格 UI
  61. 在本例中 详情 Activity 将处理详情 Fragment 的显示问题
  62. 请注意 对于双窗格情况 我们要检查所保存的
  63. 即时状态包是否为 null
  64. 如果保存即时状态包不是 null
  65. 我们无法新建一个 原因在于
  66. 假设你要旋转设备
  67. 在 Activity 和 Fragment
  68. 被破坏之前 我们将信息存储在保存状态包中
  69. 在方向发生变化后 系统将通过传回
  70. 相同的包恢复 Activity 和 Fragment
  71. 从而可在相同状态下进行重建
  72. 这意味着如果该包存在 我们应该让系统
  73. 处理详情 Fragment 的恢复 并且我们可以跳过该代码
  74. 动态添加了详情 Fragment 后
  75. 出于测试目的 请让其显示部分占位符数据
  76. 后面我们将介绍相关逻辑
  77. 以便它能正确地显示左侧选定日期的信息
  78. 修改详情 Fragment
  79. 使其不会预料到传入的 intent 具有数据 URI
  80. 在本例中 详情 Fragment 将回退到
  81. XML 中的某些占位符数据
  82. intent 可以为空白的原因是详情 Fragment
  83. 现在可以存在于主 Activity 中
  84. 而且 主 Activity 不会像平常启动详情 Activity 那样
  85. 通过仅有一个日期的 URI 来启动
  86. 更改线框图之后
  87. 应用应该是这样的
  88. 此处没有显示图标的原因是
  89. 我们没有在布局中对图标进行硬编码
  90. 但在后面的部分中动态填充该数据后
  91. 它应该会重新显示出来