YouTube

Got a YouTube account?

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

Japanese subtitles

← 13-02 Adding a CheckBox - Solution

Get Embed Code
13 Languages

Showing Revision 1 created 10/18/2015 by sp11.

  1. このレイアウトにするのに必要なViewを
    考えてみましょう。
  2. これらはビルド済みとして
  3. レイアウトに必要なものだけ説明します。
  4. 新しく追加しなければならないViewは
    ToppingsのTextViewと
  5. Whipped creamの
    チェックボックスです。
  6. AndroidにこのViewがあることを
    知らない方もいるでしょう。
  7. その場合は、Googleで調べてみてください。
  8. ステップ2に進みます。
    Viewを位置付けなければいけません。
  9. これらのViewが正確な位置にあるとすると、
  10. 必要なのは「Topping」と「Whipped
    Cream」を同じ列に縦に並べることです。
  11. 基本的に画面が縦なので
  12. やるべきことは
    この2つのViewを上に追加するだけ。
  13. ステップ3では、Viewのスタイルを整えます。
  14. Toppingsのヘッダーのスタイルは、
  15. QuantityとOrder Summaryと
    同じなので
  16. コピー&ペーストします。
  17. チェックボックスは新しいので、
    スタイリングしなければなりません。
  18. ボックスとテキストの間のスペースは24 dp、
  19. Whipped Creamのフォントサイズは
    16 spにします。
  20. それではアプリを変更しましょう。
  21. Toppingsのヘッダーは、
    Quantityと同じなので、
  22. このコードをコピー&ペースト。
  23. コピーしたら、このLinearLayout上に
    追加します。
  24. すると、Quantityが2つ表示されます。
  25. ここをToppingsに変えます。
  26. marginBottomもコピーして、
  27. このヘッダーの間にスペースを作ります。
  28. チェックボックスを作るのは初めてなので
  29. やり方をGoogleで調べます。
  30. 「checkbox android」で検索します。
  31. 必ず「android」を含めてください。
  32. Webや携帯のプラットフォームの
    チェックボックスと混同させないためです。
  33. これでAndroidの検索結果が得られます。
  34. 最初のサイトを試しましょう。
  35. CheckBoxのクラスに関する情報です。
  36. スクロールしてみると、クラスの概観や
  37. XMLの属性が書かれています。
  38. ここで確認したいのは
    CheckBoxのXMLのサンプルです。
  39. もう一度、検索結果画面に戻りましょう。
  40. 2つ目をクリックします。
  41. 素晴らしい、ここにチェックボックスの画像や
  42. XMLもあります。
  43. 良さそうですね。
  44. LinearLayoutに
    CheckBoxが2つあります。
  45. 最初のCheckBoxをコピーして
  46. アプリにペーストしましょう。
  47. ToppingsとQuantityの間、
  48. ここにペーストします。
  49. このXMLは、私たちのアプリに
    合っていないので修正します。
  50. IDとこのテキストも消します。
  51. カフェで肉は売らないので、meatの代わりに
  52. Whipped Creamを入力します。
  53. ところで@string/meatは
  54. strings.xmlファイルの
    文字列を参照していました。
  55. これついては後ほど説明します。
  56. ここに直接文字列を入力します。
  57. Whipped Creamの
    チェックボックスができました。
  58. このCheckBox Viewの良い点は、
    ボックスとテキストを同時に作れ、
  59. 他にテキストを入力する必要がないことです。
  60. onClickの部分は必要ありません。
  61. ここで一番重要なのは、チェックボックスが
    ここに表示されることです。
  62. このXMLを作成する他の方法としては、
  63. Android Viewのチートシートです。
  64. ここには、よく使うAndroidViewが
    記載されています。
  65. XMLのサンプルもあります。
  66. CheckBox Viewもあり、
    そのXMLに応じた
  67. サンプル画像もあります。
  68. このXMLをコピーして、
    自分のアプリにペーストします。
  69. Android Studioに戻って、
    見栄えを確認しましょう。
  70. どうでしょう。
  71. 良さそうですね。
  72. Toppings、
    Whipped Creamのボックス
  73. チェックすると、
    アニメーションもあります。
  74. 問題は、スペース設定が
    なくなっていることです。
  75. Quantityとチェックボックスの間が狭く、
  76. 十分にスペースがありません。
  77. もう一度、設定を振り返りましょう。
  78. ここのスペースは24 dp、
    フォントサイズは16 sp
  79. まずフォントサイズを変更しましょう。
  80. android:textSize、
    そして"16 sp"を入力します。
  81. フォントサイズが反映されたかどうか
    プレビューで確認します。
  82. できています。
  83. 更新されたかどうか不安な場合は、
    このボタンをクリックしましょう。
  84. それでは
  85. スペースについて
    さらに詳しく見てみましょう。
  86. そのために練習と失敗が必要です。
  87. 正しい余白の値を設定し、
  88. パディング値も設定しましたが、
  89. 左側のパディングがボックスとテキストの
    間隔に影響することが判明しました。
  90. パディングを追加しましょう。
  91. これでテキストが移動しました。
  92. ただし、問題がもう一つあります。
  93. ここには十分スペースがありますが、
    こっちにはありません。
  94. これを調整するためには、
    Quantityヘッダーの下のパディングか
    ボックスのマージンを追加するか
  95. 上のパディングか
    マージンを追加する必要があります。
  96. どちらでもOKです。
  97. 今回は、Quantityヘッダーの
    上のマージンを追加します。
  98. これで改善されました!
  99. スペースが均等になりました。
  100. これから端末でアプリを起動してみます。
  101. こちらがアプリです。
  102. バッチリですね。
  103. とてもよくできました。
  104. さらにアプリのUIを変更したい場合は、
  105. Googleで調べて
    自分のアプリに適用しましょう。