Japanese subtitles

← 05-07 Build Layout - Solution

Get Embed Code
13 Languages

Showing Revision 7 created 10/13/2015 by Moe Shoji.

  1. このレイアウトを構築するために
    activity_main.xml ファイルを開きます
  2. これらのビューを縦に配置する
    リニアレイアウトが必要です
  3. まず最初に相対レイアウトを
    リニアレイアウトに変えます
  4. すぐに開始タグと終了タグが一致しませんという
    エラーが表示されますので
  5. コピーして下に貼り付けます
  6. これで一致しました
  7. 次にビューに追加していきます
  8. まずは Quantity(量)の
    テキストビューにします
  9. ここのテキストビューの中身を
    Quantityに変更します
  10. 次は 0(ゼロ)というテキストビューです
  11. 最初のテキストビューを
    コピーして下に貼り付けます
  12. このスクリーンショットに合うように
    テキストを0に書き換えます
  13. このリニアレイアウトの
    最後の入れ子はボタンです
  14. ボタンを入れるのは初めてなので
    Google で検索しましょう
  15. ブラウザで button Android と検索します
  16. 最初のリンクでいいでしょう
    developer.android.com のサイトです
  17. ボタンに関するドキュメントですが
    大部分は無視してかまいません
  18. 「クラスの概要」までスクロールしましょう
  19. まだ習っていない Java コードについて
    話していますが
  20. 下にボタンの XML が載っています
  21. これをコピーして
    コードに書き込んでみましょう
  22. 2つのテキストビューの下に
    ボタンを追加します
  23. ここにコピーしたコードを貼り付けます
  24. self destruct string を消して
  25. order(注文)にしてみましょう
  26. 最後の一行も必要ないので削除しましょう
  27. これでQuantity(量) 0(ゼロ)のテキストビュー
    order(注文)のボタンができました
  28. アプリを実行してみましょう
  29. 緑のプレイボタンを押します
  30. 下を見ると まだ構築の途中ですね
  31. おっと 違いますね
  32. リニアレイアウトが縦ではなく
    横に表示されてしまいました
  33. orientationの属性を
    追加することにしましょう
  34. android:orientation="vertical"
    に変更します
  35. これで解決したはずです
  36. もう一度実行しましょう
  37. 良くなりました
  38. 3つの子ビューが縦に並びました
  39. フィールドのスタイルを少し整えて
  40. 例のスクリーンショットのように
    見えるようにしましょう
  41. この画面ではQuantityの
    テキストビューはすべて大文字です
  42. 最初のレッスンで
    android:textAllCaps を学びましたね
  43. オートコンプリートにも出てきています
  44. enter を押せば自動的に
    コードに追加してくれます
  45. 大文字にしたいので値は‟true”とします
  46. 大文字にする際に
    この属性を使う利点は
  47. UI を変更したくなり
    quantity を小文字にすることになったら
  48. テキストを書き換えるのではなく
    属性を削除するだけで済むからです
  49. 次は0というテキストのサイズを
    16sp に変えます
  50. またオートコンプリートの
    選択肢に出てきたので
  51. enter を押して値を 16sp にします
  52. フォントの色も黒にしたいですね
  53. Androidの黒のシステムカラーを使います
  54. このように書きます
  55. quantityと0のテキストビューができました
  56. 注文ボタンはこのままでいいでしょう
    大文字になっていますし
  57. 高さと幅はwrap contentになっています
  58. この縦のスペースを何とかする必要があります
  59. 量とゼロの間に 16dp のパディングか
    マージンを入れたいですね
  60. ゼロと注文ボタンの間にも
    16dp のパディングが必要です
  61. 実装方法はたくさんありますが
  62. 私は ボタンには上にマージンを追加します
  63. quantityには
    下部マージンを追加することにします
  64. 結果が同じであれば他の方法でも構いません
  65. 私が上部マージンと
    下部マージンを使うことにしたのは
  66. この真ん中のエリアは後で変更するからです
  67. プラスとマイナスのボタンの量を
    選べるピッカーにしますが
  68. quantity の見出しとピッカーの間に
    16dp のスペースを入れたいからです
  69. ボタンも同じです
  70. デバイスで実行してみましょう
  71. 思った通りにできました
  72. quantityのテキストビューはすべて大文字になり
    0のテキストビューは 16sp の黒で表示
  73. 注文ボタンがここにあります
  74. ビューの間に
    16dp のスペースがあります
  75. よくできました!
  76. 忘れるところでした
  77. クイズでは このボタンを押すと
    どうなるか問われます
  78. 今のところ何も起きません
  79. どうなるかは続きをご覧ください