YouTube

Got a YouTube account?

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

Japanese subtitles

← 07-37 Add the Other Team in XML

Get Embed Code
13 Languages

Showing Revision 9 created 10/19/2015 by Nobuko Hamaguchi.

  1. コードを書く前に
    この問題に答えたいと思います
  2. リニアレイアウトと相対レイアウトという
    2つのビューグループしかまだ知りません
  3. この2つは同じ大きさのスペースを
    使うというのが鍵となります
  4. リニアレイアウトウエイトを使えば
    簡単に設定ができます
  5. ではコードを見てみましょう
  6. Javaは使っていないので
    activitiy_main.xmlに行きます
  7. 私のXMLファイルです
  8. このコードをすべて
    別のリニアレイアウトに入れてみます
  9. 2つの子リニアレイアウトの
    これが親となります
  10. この2行を上に移動します
  11. rootビューに付いていなければ
    ならないからです
  12. カッコを閉じます
  13. Android Studioが自動的に
    ここに終了タグを付けました
  14. この終了タグはカットして
  15. 下にスクロールしてペーストします
  16. 赤の波線が出てしまいました
    エラーを見てみましょう
  17. ‟layout_heightとlayout_widthを
    指定してください”とあります
  18. おっと!忘れていました
  19. rootビューなので
    match_parentにしましょう
  20. さて子リニアレイアウトを囲んでいる
    リニアレイアウトが1つあります
  21. プレビューで見ても
    ほとんど同じですね
  22. Team Aのリニアレイアウトを
    すべてコピーしましょう
  23. そしてTeam Aの下にペーストします
  24. これがTeam Bの
    リニアレイアウトになります
  25. 少しごちゃごちゃした感じになってきました
  26. command+Aかすべて選択をして
    キーボードのショートカットを使います
  27. command+Option+Lで
    コードをフォーマットします
  28. Windowsでは Ctrl+Alt+Lです
    見やすくなりました
  29. 何が起きているか説明しましょう
  30. 上にスクロールすると rootの
    リニアレイアウトがここにあります
  31. ここから始まり下にスクロールすると
    ここで終わります
  32. rootリニアレイアウトの中には…
  33. もう一度上に行きます
  34. ここで始まる子レイアウトがあり…
  35. ゆっくりスクロールしましょう
  36. ここで終わります
  37. これがTeam Aです
  38. 別の子リニアレイアウトがあり
    ここから始まります
  39. ゆっくりスクロールして
    ここで終わり Team Bとなります
  40. 上に赤い字があったのが見えました
  41. 上にスクロールして
    エラーを見てみましょう
  42. ‟間違った方向 方向の特定なし
    デフォルトが水平方向である
  43. このレイアウトは複数の子が存在するが
  44. 少なくとも1つがmatch_parentの幅を持つ”
  45. 水平方向にはしたいのですが
  46. 方向を特定してみましょう
  47. デフォルトが水平方向になっているので
    厳密には必要はありませんが
  48. はっきりと指定しましょう
  49. 子同士が重なっているいるとか
    言っていましたね
  50. プレビューをクリックします
  51. 別のリニアレイアウトをコピーして
    ペーストしたりしたわりには
  52. あまり変わったようには見えません
  53. さっきのエラーと関係があるのかもしれません
  54. 水平方向のレイアウトだと言っていました
  55. 2つのリニアレイアウトを
    隣同士に並べようとしていますが
  56. このリニアレイアウトは
    match_parentの幅を持っていますので
  57. 画面いっぱいになってしまいます
  58. つまり最初のリニアレイアウトは
    画面いっぱいに広がっていたので
  59. 他のリニアレイアウトは画面の外に
    追い出されてしまったのです
  60. どうしたらいいのか考えましょう
  61. 2つのレイアウトを同じ大きさで
    隣同士に並べたい
  62. そこでlayout_weightsが
    必要になります
  63. 最初のリニアレイアウトに―
  64. 1というlayout_weithtを与えます
  65. そしてwidth(幅)を0とします
  66. これでリニアレイアウトが
    2つあることが見えます
  67. 正しく表示されてはいませんが
  68. でも少しよくなっています
  69. 2つめのリイアレイアウトにも
    layout_weightを与えます
  70. これですね
  71. 下にスクロールします
  72. これが2つめのリニアレイアウト
  73. まったく同じことをします
  74. 1というlayout_weightを与え
  75. 同じlayout_weightを持たせました
  76. そして幅を0に設定します
  77. 両方の幅を0に設定した理由は
  78. この両端が幅をまったくとっていないからです
  79. 画面全体の余ったスペースを使って
  80. 2つに割りそれぞれに半分ずつを与えます
  81. 同じレイアウトウェイトが
    与えられているからです
  82. もし複雑だったら
    インストラクターノートのリンクにある―
  83. レイアウトウェイトについて解説した
    ビデオを参照してください
  84. Team Aと書いてある以外は
    だいぶ良くなってきましたね
  85. 下にスクロールして変更します
    これをTeam Bにします
  86. ここにもエラーがあることに
    気が付いたでしょうか
  87. このエラーの原因となったのは
    重複したIDがあるからです
  88. コードをコピー&ペーストしたからです
  89. team_a_scoreという同じIDを
    使おうとしているものが2つあります
  90. ここを team_b_score に変えます
  91. とても良くなりましたね
  92. 見えにくいですね
  93. ズームします
  94. Team Bになっています
  95. ボタンもテキストビューも
    すべて正しくできています
  96. 携帯で実行してみます
  97. とてもいい感じですね
  98. Team Aのボタンを押すと更新されます
    いいですね
  99. Team Bのボタンを押すと
    こちらも更新されます
  100. すばらしい
  101. ただしXMLを正しくしただけで
    Javaには何もしていませんね
  102. XMLがうまくできたので
    Javaも修正してみましょう