Return to Video

13-02 Adding a CheckBox - Solution

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

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
05:27

Japanese subtitles

Revisions