YouTube

Got a YouTube account?

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

Chinese, Simplified subtitles

← Add the Other Team in XML - YouTube

Get Embed Code
13 Languages

Showing Revision 3 created 08/27/2016 by Udacity Robot.

  1. 写代码之前我会先回答这个问题

  2. 我只知道两种 ViewGroups LinearLayout 和
  3. RelativeLayout
  4. 现在的关键是 这两个布局占用相同的空间
  5. 使用 layout_weight 比较容易
  6. 我们来看一下代码
  7. 先不要管 Java 代码
  8. 先看看 activity_main.xml 文件
  9. 这是我的 XML 文件
  10. 我要把这些代码放到另一个 LinearLayout 里
  11. 这是我的两个小 LinearLayouts 的父 LinearLayout
  12. 我会把这两行移动到上边 在这
  13. 因为他们需要在根 View 中定义 添加一个结束标签
  14. Android Studio 自动生成了结束标签
  15. 我们继续
  16. 剪切这个结束标签 向下滚动然后粘贴
  17. 出现了红色曲线 看看出了什么错
  18. 它说我需要定义 layout_height 还有 layout_width
  19. 好的 那就定义一下
  20. 因为这是根 View 要写上match_parent
  21. 好的
  22. 我有了一个包含着子 LinearLayout 的一个 LinearLayout
  23. 预览一下 看起来和以前一样
  24. 接下来是复制
  25. A 队的 LinearLayout 然后粘贴到 Team A 下边
  26. 这是 B 队的 LinearLayout
  27. 现在代码看起来有点乱
  28. 全选 然后
  29. 使用快捷键 Cmd+Option+L 格式化代码
  30. 在 Windows 系统 是 Ctrl+Alt+L 现在看起来好多了
  31. 我希望你能明白我所做的
  32. 滑动鼠标到顶端 这有一个根 LinearLayout
  33. 从这开始 滑到底部到这才结束
  34. 在根 LinearLayout 里 我再滑上去
  35. 这有一个子布局 从这开始
  36. 慢慢往下滑
  37. 在这结束
  38. 这是A 队的布局
  39. 还有另一个子 LinearLayout 从这开始
  40. 慢慢往下滑 B 队在这结束
  41. 我发现上边有的地方被标红了
  42. 再滑上去看看是什么错误
  43. 没有指定方向 默认是横向的
  44. 还有 这个布局有好多子布局
  45. 至少有一个的宽度是 match_parent
  46. 我希望它是横向的
  47. 我们就来指定一下方向
  48. 再说一遍 这个其实是不需要声明的 因为默认就是横向的
  49. 但声明一下看起来比较清楚
  50. 它说子布局相互重叠了
  51. 看看预览
  52. 好像并没有什么改变 虽然我
  53. 粘贴了另一个 LinearLayout
  54. 这也许和我刚刚看到的错误有关系
  55. 它说这是一个横向布局
  56. 所以它试图横向排列这两个 LinearLayout 但是
  57. 这个 LinearLayout 的 layout_width 的值是 match_parent
  58. 所以会充满整个屏幕
  59. 所以可以看到 我的第一个 LinearLayout 充满了整个屏幕
  60. 另一个 LinearLayout 就被挤到了屏幕的外边
  61. 仔细想想 现在我们需要做的是什么
  62. 我们希望两个布局紧挨着并平分整个屏幕的空间
  63. 所以我们就要使用 layout_weight 来实现
  64. 先修改第一个 LinearLayout
  65. 把它的 layout_weight 赋值为1
  66. 把 width 赋值为0
  67. 现在我们可以看到两个 LinearLayout 了
  68. 但看起来有点别扭
  69. 不过比之前强多了
  70. 把第二个 LinearLayout 的 layout_weight 也设置一下
  71. 就在这
  72. 往下滑
  73. 这是第二个 LinearLayout
  74. 跟刚才一样
  75. 也是把 layout_weight 赋值为1
  76. 现在两个 layout_weights 一样了
  77. 把 width 赋值为0
  78. 之所以把 width 都赋值为0
  79. 是因为如果他们的边界不占用空间
  80. 那么他们就会占用所有额外的空间
  81. 也就是整个屏幕 然后每个布局各占一半
  82. 因为他们的layout_weight 相同
  83. 如果你感觉有点迷惑 在讲师注释里
  84. 可以链接到一些关于 layout_weight 的视频
  85. 看起来很不错 除了这还写着 Team A
  86. 往下滑 把它改成 Team B
  87. 你也许意识到了 这还有个错误
  88. 是因为 ID 重复了
  89. 因为我仅仅复制粘贴了这些代码
  90. 所以两个东西可能会有相同的
  91. team_a_score 这个 ID
  92. 把它改成 team_b_score
  93. 看起来好多了
  94. 看不太清
  95. 放大一些
  96. 这写的是 Team B
  97. 所有的按钮和 TextView 都正确了
  98. 在手机上运行一下
  99. 看起来很不错
  100. 如果我点击 A 队的按钮 A 队分数就会更新
  101. 点击 B 队的也能正常运行
  102. 这很特别
  103. 记住 我们刚刚希望得到正确的 XML
  104. 并不关心 Java 代码
  105. 但现在 XML 已经没问题了 为什么不修正一下 Java 代码呢?