YouTube

Got a YouTube account?

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

Chinese, Traditional subtitles

← 07-37 Add the Other Team in XML

Get Embed Code
13 Languages

Showing Revision 1 created 10/11/2015 by sp14.

  1. 在我開始寫編碼前,
    我將會回答這條問題。
  2. 我知道的view groups有兩種:
    LinearLayouts
  3. RelativeLayouts
  4. 在這裡的關鍵是
    這兩個需要擁有相等空間
  5. 運用layout weight
    一個相當容易的方法。
  6. 好,開始看看這些code代碼。
  7. 好的,我不再會使用Java
    我會繼續
  8. 去到activity_main.xml
  9. 這就是我的 XML 檔案
  10. 我將會把這些code碼放到
    另一個 LinearLayout.
  11. 這個大 LinearLayout裡包含
    兩個小LinearLayouts
  12. 我將會把這兩行移上到這裡
  13. 由於他們需要依附左rootview
    加一個關括號。
  14. Android Studio 已自動為我
    加一個關引號
  15. 我會繼續
  16. 剪下這個關引號
    捲動到底貼上
  17. 好,現在這裡有條紅色波浪線
    當我查看這個錯誤
  18. 我看到這裡說我需要 定義layout_height
    layout_width
  19. 哎呦!
    好,做吧。
  20. 因為這裡是root view
    我將會把這裡設定為match_parent
  21. 我有一個LinearLayout包含著
    一個子LinearLayout
  22. 如果我去預預覽
    這看來仍然沒變
  23. 好,我將會複製所有
  24. Team A LinearLayout 的東西
    然後在Team A LinearLayout下貼上
  25. 這些將會是
    Team B LinearLayout
  26. 好,現在這裡開始
    有一點混亂
  27. 我將會按 Cmd+A 即全選
    然後
  28. 用快捷鍵Cmd+Option+L
    去把code
  29. Windows 系統,
    這會是Ctrl+Alt+L, 現在好看一點了
  30. 現在,我只想確定
    你明白這裡發生什麼事
  31. 捲動回到頂,
    這裡有個根 LinearLayout
  32. 在這裡開始,我捲動
    回到底,這就是結束。
  33. 在根 LinearLayout 裡,
    我將再捲動回到頂。
  34. 這裡個子層從這開始
  35. 我會慢慢向下捲動
  36. 在這裡終結。
  37. 這就是 TeamA 的。
  38. 我另一個子 LinearLayout
    由這裡開始。
  39. 慢慢向下捲動,在這裡終結
    這是 TeamB 的。
  40. 好,我看到上面有些紅線
  41. 我會捲動會上面看看
    有什麼錯誤
  42. 方向錯誤?沒有指定方向,
    預設方向是橫向。
  43. 但這層有多個子層。
  44. 而其中一個子層闊為match_parent
  45. 嗯,我的確想它變成橫向
    我將會繼續
  46. 為它指定方向。
  47. 再次說明,技術上這是不需要的
    因為預設已經是橫向。但
  48. 明確一點比較好。
  49. 好,這裡好像說子層互相
    覆蓋著對方。
  50. 我將會去到預覽。
  51. 嗯,這裡好似沒轉變,
    雖然我已經
  52. 完成所有LinearLayout
    複製貼上動作。
  53. 這可能是關於我剛剛
    看到的錯誤。
  54. 之前說這裡是橫向的佈局。
  55. 它嘗試把這兩個LinearLayouts
    並列,但
  56. LinearLayout
    layout_width
  57. match_parent,所以填滿了畫面
  58. 基本上第一個LinearLayout
    已填滿了畫面。
  59. 所以另一個LinearLayout放了在
    畫面外面。
  60. 現在再想想我們想怎樣。
  61. 我們想這兩個佈局佔用
    相等空間且並排在一起。
  62. 所以這時我們需要加入
    layout_weights
  63. 我將會把第一個LinearLayout
  64. layout_weight設為1
  65. 然後把闊設為0
  66. 好,我們已經確切地看到
    這裡有兩個LinearLayouts
  67. 它們只是無法正常顯示。
  68. 但這已經改好了。
  69. 我亦需要為我第二個LinearLayout
    加入layout_weight
  70. 在這裡
  71. 我將會捲動到下面
  72. 這就是第二個LinearLayout
  73. 我將會再重覆做一次
  74. 我把這裡的layout_weight
    繼續設為 1
  75. 現在它們有相同的layout_weights了。
  76. 然後我會將闊度社為0
  77. 好,我將他們的闊度都
    設為0的原因是
  78. 這兩邊都不會佔用任何闊度。
  79. 然後這會佔據所有剩餘空間。
  80. 即是整個螢幕
    然後分開每邊一半
  81. 因為它們擁有相等的layout weight
  82. 如果這仍然有些混亂,
    可在指導說明文件中
  83. 尋找關於 layout_weight 的影片。
  84. 好,除了這還寫Team A外,
    一切都看來很好。
  85. 我將會捲動到下面作修改
    改成Team B
  86. 現在你會得悉到這裡也
    會出現錯誤
  87. 出現錯誤的原因是
    我們有重覆了的ID
  88. 不要忘記,我剛剛
    做過複製貼上
  89. 所以我們有兩個
    相同ID的東西
  90. 它就是team_a_score
  91. 所以我將會把它
    改名為team_b_score
  92. 好,現在看來好多了。
  93. 這裡有點難看。
  94. 我會放大
  95. 這裡寫著 Team B
  96. 我已經完成所有按鈕及
    所有的按鈕文字說明。
  97. 我將會嘗試在我的
    電話中運行。
  98. 好,一切看來正常
  99. 現在如果我按下Team A 按鈕,
    這裡更新了,很好。
  100. 現在我按下Team B 按鈕,
    這裡也更新了。
  101. 但這很奇怪。
  102. 但不要忘記,
    我們之前只做好了XML檔案。
  103. 我們並沒改到Java 檔案。
  104. 我們改好了XML檔案,
    為什麼不一起改Java 檔案?