Return to Video

02-20 Padding vs. Margin

  • 0:00 - 0:02
    今のところはよくできたと思います。
  • 0:02 - 0:05
    もっとすごいレイアウトを作ることができるように
    なると思います。
  • 0:05 - 0:09
    しかし、今まで作ってきたレイアウトには
    一つ問題があります。
  • 0:09 - 0:13
    ビューがビューグループの端にあるということです。
  • 0:13 - 0:14
    端末の端まで来ています。
  • 0:14 - 0:16
    このレッスンで作ったレイアウトでは、
  • 0:16 - 0:20
    もう少し改善することができると思います。
  • 0:20 - 0:24
    少し余白を入れるときれいになると思います。
  • 0:24 - 0:26
    これをパディングとマージンで達成したいと思います。
  • 0:26 - 0:29
    それを学んでいきます。
  • 0:29 - 0:31
    例えば、こことここにもっと余白を加えることができます。
  • 0:31 - 0:34
    上にも空けることができます。これで、ビューが
  • 0:34 - 0:38
    親や端末の端まで行くことを防げます。
  • 0:38 - 0:39
    でもこれは個人のデザインによります。
  • 0:39 - 0:42
    フルブリード画像効果を出したい時などは、
  • 0:42 - 0:45
    端まで使うこともあります。
  • 0:45 - 0:49
    余白を入れて、すこし余裕を持たせましょう。
  • 0:49 - 0:53
    内容が分かりやすいようにしましょう。
  • 0:53 - 0:57
    パディングとマージンの効果を紹介します。
  • 0:57 - 0:59
    Helloというテキストビューから始めます。
  • 0:59 - 1:02
    8dpのパディングを加えると、
  • 1:02 - 1:05
    全方向に8dp文大きくなります。
  • 1:05 - 1:08
    8dpのマージンを加えると、
  • 1:08 - 1:11
    するとこのようになります。
  • 1:11 - 1:13
    マージンを加えるには、ビューグループの
    中に入れなければいけません。
  • 1:13 - 1:16
    だからこのリニアレイアウトの中にあるわけです。
  • 1:16 - 1:19
    このリニアレイアウトがテキストビューの周りを
  • 1:19 - 1:21
    8dp分広げてくれます。
  • 1:21 - 1:23
    左、上、
  • 1:23 - 1:26
    そして両側にも広げてくれます。
  • 1:26 - 1:28
    パディングやマージンを子のテキストビューで宣言しても、
  • 1:28 - 1:33
    パディングはテキストビュー自身で扱われ、
  • 1:33 - 1:36
    マージンは親のビューグループで扱われます。
  • 1:36 - 1:40
    実際の端末でこれを実行すると、
    テキストビューの背景がないと、
  • 1:40 - 1:43
    両方とも同じに見えます。
  • 1:43 - 1:46
    テキストは左と上から8dp空けて
  • 1:46 - 1:48
    始まります。
  • 1:48 - 1:52
    しかし、背景がある場合には、
  • 1:52 - 1:55
    テキストビューがこれだけ大きいというのが見れ、
  • 1:55 - 1:59
    こちらでは、これだけしかないということが分かります。
  • 1:59 - 2:01
    これがパディングを表示するためのコードです。
  • 2:02 - 2:07
    テキストビューのXMLエレメントで、
    android:padding="8dp"
  • 2:07 - 2:11
    という新しいアトリビュートを宣言します。
  • 2:11 - 2:12
    単位がdpであれば、どんなパディングのサイズを
  • 2:12 - 2:15
    選んでもかまいません。
  • 2:15 - 2:19
    8dpのパディングを加えると、全方向に
  • 2:19 - 2:21
    8dp分広がります。
  • 2:22 - 2:25
    androidの一般的なパディングのアトリビュートを
    使わなくても、
  • 2:25 - 2:29
    右、左、上、下というように別々にパディングすることもできます
  • 2:29 - 2:33
    この4行のコードは、この1行のコードと同じです。
  • 2:33 - 2:36
    しかし、この細かい操作は、各方向を別々に
  • 2:36 - 2:39
    扱うことができます。
  • 2:39 - 2:43
    全方向に同じパディングをしなければいけないということはありません。
  • 2:43 - 2:47
    パディングのデフォルトは0なので、下以外に
  • 2:47 - 2:52
    パディングを加えてもいいでしょう。
  • 2:52 - 2:56
    マージンを決めるには、テキストビューにアトリビュートを加えます。
  • 2:56 - 3:00
    android:layout_margin="8dp"
  • 3:00 - 3:03
    となります。
  • 3:03 - 3:07
    これは、子のテキストビューを親のレイアウトの
    すべての端からから8dp離すことを意味します。
  • 3:07 - 3:12
    上にテキストビューがあれば、このテキストビューを
  • 3:12 - 3:15
    最初のテキストビューから8dp離すことになります。
  • 3:16 - 3:19
    マージンはテキストビューの周りに力が働いていると
    考えても
  • 3:19 - 3:20
    いいでしょう。
  • 3:20 - 3:24
    このマージンにはどんなビューを入ることができません。
  • 3:24 - 3:28
    マージンを4つの方向に分けることもできます。
  • 3:28 - 3:32
    右、左、上、下というようにそれぞれ調整できます。
  • 3:32 - 3:36
    何も特定しないと、デフォルトは0になります。
  • 3:36 - 3:39
    ビューグループがこの位置を扱うということを覚えるためには、
  • 3:39 - 3:42
    アトリビュートを見ると分かりやすいです。
  • 3:42 - 3:45
    すべてlayout_marginで始まっています。
  • 3:45 - 3:48
    これでビューグループが位置を扱っているということが
  • 3:48 - 3:49
    分かります。
  • 3:50 - 3:53
    パディングとマージンはすべてのビューに
    使うことができます。
  • 3:53 - 3:56
    このアトリビュートを実際に使ってみましょう。
  • 3:56 - 3:58
    リニアレイアウトに3つのテキストビューがあります。
  • 3:58 - 4:01
    すべてスクリーンの端に寄せられています。
  • 4:01 - 4:02
    もう少し余白を空けたいと思います。
  • 4:03 - 4:05
    マージンから始めてみましょう。
  • 4:06 - 4:08
    これで、テキストビューの周りに余白ができました。
  • 4:09 - 4:11
    他の2つのテキストビューにも同じくします。
  • 4:12 - 4:17
    ここには16dpありますが、ここでは32dpになっています。
  • 4:17 - 4:20
    最初のテキストビューのマージンの8dpと、
  • 4:20 - 4:23
    2番目のテキストビューの8dpのマージンが加わっています。
  • 4:23 - 4:25
    余白を一定にしたい場合は、
  • 4:25 - 4:30
    例えば16dpを保ちたい場合には、
  • 4:30 - 4:33
    それぞれのマージンの値を変えます。
  • 4:33 - 4:38
    このコードでは、左おマージンが16dp、
    上のマージンが16dp、
  • 4:38 - 4:41
    下のマージンはないので、
  • 4:41 - 4:43
    間の余白が16dpになりました。
  • 4:43 - 4:47
    最後のテキストビューも同じにします。
  • 4:47 - 4:49
    これで縦の感覚が均等になりました。
  • 4:50 - 4:53
    先ほど、ビューの端に余白を足すといいましたが、
  • 4:53 - 4:56
    実際にはこれは透明なものです。
  • 4:56 - 4:59
    後ろのものを見ることができます。
  • 4:59 - 5:02
    ビューグループのの背景が見えています。
  • 5:02 - 5:05
    マージンでもパディングでも同じように見えます。
  • 5:05 - 5:09
    それは、テキストビューには背景色がないからです。
  • 5:10 - 5:12
    背景を加えて、その端がどうなっているかを見てみましょう。
  • 5:13 - 5:16
    まず最初のテキストビューの背景を見てみましょう。
  • 5:16 - 5:20
    左と上のマージンを加えた時、
    ビューグループが
  • 5:20 - 5:23
    テキストビューを右と下に8dpずつ押しているのが分かります。
  • 5:23 - 5:27
    パディングにすると、テキストビューが左と上に8dp分のスペースを
  • 5:27 - 5:30
    埋めていることが分かります。
  • 5:31 - 5:33
    この場合、パディングとマージンでは、
  • 5:33 - 5:35
    違いが出てきます。
  • 5:35 - 5:38
    それは、テキストビューに背景がある時のみです。
  • 5:38 - 5:41
    他のビューにも同じくしてみましょう。
  • 5:42 - 5:45
    パディングやマージンは子ビューだけのものでは
    ありません。
  • 5:45 - 5:48
    ビューグループにも使うことができます。
  • 5:48 - 5:51
    リニアレイアウトのパディングを指定すると、
  • 5:51 - 5:56
    このビューを全方向に16dpずつずらしていることが
    分かります。
  • 5:56 - 5:59
    パディングとマージンでは、どんな値を使ってもいいといいました。
  • 5:59 - 6:01
    でも実際にどの値を使えばいいでしょうか。
  • 6:01 - 6:05
    デザインガイドでは、8の倍数を
  • 6:05 - 6:06
    勧めています。
  • 6:06 - 6:09
    これは少し上級のコンセプトですが、
  • 6:09 - 6:13
    コンテンツが8dpのグリッドに合うようにします。
  • 6:13 - 6:16
    このグリッドはスクリーンには表示されませんが、
  • 6:16 - 6:18
    ここにテキストを置きたい場合は、
  • 6:18 - 6:21
    左にグリッド二つ分移動させたほうがいいかもしれません。
  • 6:21 - 6:25
    グリッド二つは16dpになります。
  • 6:25 - 6:29
    このEメールのスクリーンでは、
    全てのアイコンがこの線に並んでいます。
  • 6:29 - 6:33
    これはスクリーンの左端から16dp離れたところに
    位置しています。
  • 6:33 - 6:38
    このテキストはスクリーン左端から72dp離れたところに、
    位置しています。
  • 6:38 - 6:41
    このように、コンテンツが、特定の線に沿って
    位置されていることが
  • 6:41 - 6:42
    分かります。
  • 6:42 - 6:44
    このようにとらえることもできます。
  • 6:44 - 6:47
    GooleI/Oアプリのスクリーンショットです。
  • 6:47 - 6:54
    コンテンツが16dpと72dpの線に
    沿っています。
  • 6:54 - 6:57
    左端から72dpはなれています。
  • 6:57 - 6:59
    こちらでは、
  • 6:59 - 7:03
    右端から16dpのところで止まっています。
  • 7:03 - 7:05
    タブレットでは、スクリーンは広いので、
  • 7:05 - 7:07
    もっとパディングを加えることができます。
  • 7:07 - 7:11
    他から左から24dp空けるなどということが
  • 7:11 - 7:12
    できます。
  • 7:12 - 7:17
    そういった値は、コンテンツを見やすくするためです。
  • 7:17 - 7:20
    例えば、このタイトルが何ピクセルずれて、
  • 7:20 - 7:24
    このサブテキストが右に何ピクセルかずれると、
  • 7:24 - 7:26
    端がそろいません。
  • 7:26 - 7:30
    読者の集中を乱しかねません。
  • 7:30 - 7:35
    全てをそろえることによって、
    内容を読みやすくすることができます。
  • 7:35 - 7:38
    パディングとマージンを使った実際の例がこちらです。
  • 7:38 - 7:40
    こnGoogle Calendarアプリでは、
  • 7:40 - 7:44
    このテキストが少し移動されているのが分かります。
  • 7:44 - 7:47
    カレンダーイベントの間にもスペースがあります。
  • 7:47 - 7:48
    パディングを使った場合、
  • 7:48 - 7:52
    背景が空白を埋めることになります。
  • 7:52 - 7:56
    マージンを使うと、ビューの周りに余白を持たせます。
  • 7:56 - 7:58
    おそらくこれはマージンでしょう。
  • 7:58 - 8:02
    これがカレンダーイベントの詳細ページです。
  • 8:02 - 8:06
    ここにたくさんのテキストがありますが、
    ほかより大きいスペースがあるようです。
  • 8:06 - 8:09
    このような大きなギャップはパディングを使ってできます。
  • 8:09 - 8:13
    このギャップを加えるには、テキストビューの下にパディングを加えるか、
  • 8:13 - 8:15
    このビューの上にパディングを加えることができます。
  • 8:16 - 8:18
    どちらでも大丈夫でしょう。
  • 8:18 - 8:21
    layoutマージンを使ってもできると思います。
  • 8:21 - 8:24
    ここでは、パディングかマージンかは分かりません。
  • 8:24 - 8:28
    このテキストには背景がないからです。
  • 8:28 - 8:31
    エクササイズに戻ってパディングとマージンを
  • 8:31 - 8:32
    練習しましょう。
  • 8:32 - 8:35
    下のリンクにあるコードを使って始めてください。
  • 8:35 - 8:39
    パディングとマージンになれたら、
  • 8:39 - 8:40
    このレイアウトを作ってください。
  • 8:41 - 8:46
    これははじから16dpはなれています。
  • 8:46 - 8:49
    テキストビューの間では8dpです。
  • 8:49 - 8:51
    終わったらこのボックスをクリックしてください。
Title:
02-20 Padding vs. Margin
Description:

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

Japanese subtitles

Revisions