Return to Video

4 - The Stages SOL

  • 0:01 - 0:05
    私はこれらの質問に XML に
    ジャンプする前に回答します
  • 0:05 - 0:07
    最初の最初は ビューの選択です
  • 0:07 - 0:09
    それぞれの周りに
    わかるように 箱を描きます
  • 0:10 - 0:11
    はい そこには正式に考えられる
    5 つの異なるビューがあります
  • 0:11 - 0:14
    正式にビューだと考えられる
    ビューグループは含みません
  • 0:14 - 0:18
    とにかく これら 5 つのビューには
    3 つの下部のボタンから見て─
  • 0:18 - 0:19
    二つのテキストビューが上部にあります
  • 0:19 - 0:24
    さらに そこにイメージビューは
    どこにも存在しません
  • 0:24 - 0:28
    今 あなたはなぜ私が二つのテキストビューを
    置いたのかと思っているかもしれません
  • 0:28 - 0:32
    最終的な製品スタイル
    teamA と─
  • 0:32 - 0:34
    得点は非常に異なっています
  • 0:34 - 0:38
    なので 私はこれらを二つの分離した
    テキストビューにすると決めたのです
  • 0:38 - 0:40
    ステップ 2 へといきましょう
    どちらがビューの位置を定めるかです
  • 0:40 - 0:43
    私はどのビューグループを
    使いたいかをここで選択します
  • 0:43 - 0:47
    私の二つの意見は、linear layouts
    relative layout です
  • 0:47 - 0:49
    これは縦の列のビューです
  • 0:49 - 0:53
    何をしたいのかが非常に明快
    それが linear layout です
  • 0:54 - 0:57
    はい それではステップ 3 です
    ビューのスタイルです
  • 0:57 - 1:00
    私はそれを XML と共に作用している
    として扱います
  • 1:00 - 1:03
    はい それでは XML に行ってみましょう
  • 1:03 - 1:05
    私はテキストタブを見たいです
  • 1:05 - 1:08
    最初に私がやることは
    ただいくつかの不必要なものを
  • 1:08 - 1:10
    削除することです
  • 1:10 - 1:12
    なので私はこのテキストビューを
    削除することから始めます
  • 1:13 - 1:17
    さらにこれらの全ての
    paddingLeft
    paddingRight
  • 1:17 - 1:20
    paddingTop paddingBottom
    もまた削除していきます
  • 1:20 - 1:23
    私が言及したもの意外は削除しないよう
    注意してください
  • 1:23 - 1:25
    はい
  • 1:25 - 1:28
    私達がこれから使うビューグループは
    relative layout ではなく―
  • 1:28 - 1:30
    linear layout だと言いました
    なので 私はそれを今変えていきます
  • 1:31 - 1:35
    それと この linear layout の内部に
    二つのテキストビューを―
  • 1:35 - 1:36
    三つのボタンと共に設置していきます
  • 1:36 - 1:38
    私はそれらを作成していきます
  • 1:38 - 1:40
    私はこのテキストビューの幅や高さを―
  • 1:40 - 1:43
    今は細かく設定しません
  • 1:43 - 1:45
    今は 私はただ wrap_content と―
  • 1:45 - 1:48
    テキストビューの右側の
    テキストに書きます
  • 1:49 - 1:52
    私は先に進み このテキストビューと
    同じようにテキストをセットします
  • 1:52 - 1:55
    この最初のテキストビューは
    ただ Team A だけ書きます
  • 1:56 - 1:59
    はい それではどのような感じか
    プレビューを見てみましょう
  • 1:59 - 2:02
    はい Team A と書いてある
    小さなテキストビューを見えます
  • 2:02 - 2:04
    はい もう少し作成してみましょう
  • 2:04 - 2:07
    次は テキストビューとして
    下に得点を表示します
  • 2:07 - 2:10
    なので 私達は
    テキストを打ち込んでいきます
  • 2:10 - 2:12
    はい テキストビューの文字が見えます
    Enter を押します
  • 2:12 - 2:16
    そして これもまた wrap_content
    で作っていきます
  • 2:16 - 2:18
    そして テキストを追加していきます
  • 2:18 - 2:22
    得点は通常ゼロから始まります
    なので 始めはゼロになります
  • 2:22 - 2:23
    はい
  • 2:23 - 2:23
    さて ボタンです
  • 2:23 - 2:26
    私はこれから文字のボタンを
    書いていきます
  • 2:26 - 2:28
    これらもまた同様に wrap_content
    にします
  • 2:28 - 2:32
    はい それでは最初のボタンの
    テキストを +3 Points と書きます
  • 2:32 - 2:35
    これをコピー&ペーストし―
  • 2:35 - 2:40
    さらに二つのボタンを作成します
  • 2:40 - 2:43
    そして一つは +2 Points と―
  • 2:43 - 2:45
    もう一つは Free Throw とします
  • 2:45 - 2:47
    はい プレビューでどんな感じか
    見てみましょう
  • 2:48 - 2:51
    3 つのボタンを持っているように見えます
  • 2:51 - 2:54
    Team A と 0 も見えます
  • 2:54 - 2:56
    なので 私の全ての作成したビューを
    持っていますが―
  • 2:56 - 2:59
    最終的な見た目へと到達した
    ようには見えません
  • 2:59 - 3:01
    これらは縦の列であることを思い出して下さい
  • 3:01 - 3:03
    私はレイアウトの向きを
    変える必要があります
  • 3:03 - 3:05
    私はそれをこれからやっていきます
  • 3:05 - 3:10
    私はビューを vertical にしたいので
    これから orientation を書いていきます
  • 3:10 - 3:12
    はい 見た感じが
    少しだけ改善されました
  • 3:12 - 3:17
    これらのボタンは実際はウィンドウの
    幅いっぱいまで拡張されていました
  • 3:17 - 3:20
    私は実際は wrap_content
    ボタンに使うべきではなく―
  • 3:20 - 3:23
    代わりに wrap_content
    していきます
  • 3:23 - 3:24
    なので 今すぐそれを
    変えてみましょう
  • 3:26 - 3:29
    はい 全てのボタンの幅は
    match_parent になっています
  • 3:29 - 3:30
    プレビューを見てみましょう
  • 3:31 - 3:33
    はい いい感じですね
    ボタンは拡張されました
  • 3:33 - 3:34
    いいでしょう
  • 3:34 - 3:39
    ただ テキストはまだ
    コーナーに固定され潰されています
  • 3:39 - 3:44
    私は gravity と言われているものを
    使っていきます
  • 3:44 - 3:46
    はい これは Google Drawling の画面です
  • 3:46 - 3:49
    Google Drawling 内で
    テキストボックスを作成しましょう
  • 3:50 - 3:52
    はい ここには
    ビューの境界があります
  • 3:52 - 3:54
    私は Team A と書きます
  • 3:54 - 3:58
    デフォルトでは それは左上の角に
    配置されます
  • 3:58 - 4:01
    そしてこれはテキストビューと同じで
    あなたがテキストをビュー内に書くとき―
  • 4:01 - 4:03
    デフォルトでは左上の角に配置されます
  • 4:03 - 4:09
    それは Google Drawings
    私はこのテキストと―
  • 4:09 - 4:14
    基本的な同等の属性を選択して
    列に呼ぶことができ―
  • 4:14 - 4:19
    テキストボックス内部を
    平行 中央と垂直 中央にできます
  • 4:19 - 4:20
    とてもいい感じです
  • 4:20 - 4:24
    ビューの内容と
    ビューの内部の境界の動きは―
  • 4:24 - 4:27
    ちょうど何を layout gravity がするかです
  • 4:27 - 4:30
    さらに もしあなたがこれがアラインメント
    メソッドに似ていると思うなら―
  • 4:30 - 4:34
    あなたは relative layout
    使うことができます
  • 4:34 - 4:37
    しかし linear layoutgravity 属性
    を使うことができ これを強力にします
  • 4:37 - 4:39
    コード内のそれを
    注意して見ていきます
  • 4:40 - 4:44
    私は最初のテキストビューを選び
    gravity を書いていきます
  • 4:45 - 4:47
    はい gravity には
    二つの選択があります
  • 4:47 - 4:49
    layout gravitygravity です
  • 4:49 - 4:51
    私はたった今
    gravity の属性について言いました
  • 4:51 - 4:53
    それが私達が使うものの1つです
  • 4:53 - 4:56
    はい そしてその後
    たくさんの選択がここにはあります
  • 4:56 - 4:58
    それに 私は平行 中央の配置に
    したいと思っています
  • 4:58 - 5:00
    なので それをこれから使います
  • 5:00 - 5:03
    そして プレビューで何をしたのかを
    これから見ていきます
  • 5:04 - 5:08
    そんなに変わったようには見えません
    しかし これには実は理由があります
  • 5:09 - 5:13
    ここをクリックし ズームすると
    ここからは見づらいかもしれませんが
  • 5:15 - 5:16
    はい そして―
  • 5:16 - 5:21
    ここに Team A とあります
    そして そのビューの境界周囲がわかります
  • 5:21 - 5:25
    もし私があなたに
    そのビュー内部の中央に―
  • 5:25 - 5:27
    これがあったのだと言ったら あなたは
    私と話し合えないかもしれません
  • 5:27 - 5:32
    それはビュー内部の中心に思えます
    そのビューは、ただとても小さい
  • 5:32 - 5:33
    Google Drawing に戻りましょう
  • 5:33 - 5:39
    もしサイズをちょうど
    テキストと同サイズまで下げたら―
  • 5:39 - 5:40
    それは中央になります
    しかし―
  • 5:40 - 5:45
    もしそれが左に押されたら
    それは大きく違うようには見えません
  • 5:45 - 5:47
    なので もしスマホの
    中央にしたいなら―
  • 5:47 - 5:50
    ビューをスマホの長さまで伸ばして
    作成する必要があります
  • 5:50 - 5:52
    それは幅を変えることを
    必要とします
  • 5:54 - 5:56
    はい ここで私は
    プレビューを閉じていきます
  • 5:57 - 5:59
    そして ここの width のところに
    行きます
  • 6:00 - 6:05
    wrap_content のかわりに
    match_parent にします
  • 6:05 - 6:06
    はい
    プレビューをもう一度見ましょう
  • 6:07 - 6:08
    ズームアウトします
  • 6:09 - 6:11
    はい とても良い感じに
    なりました
  • 6:11 - 6:12
    中央になっているように見えます
  • 6:12 - 6:14
    さあ、同じことを
    ここの得点にしましょう
  • 6:16 - 6:19
    はい これに
    gravity を同様に
    追加していきます
  • 6:19 - 6:20
    全てのレイアウトの gravity です
  • 6:20 - 6:26
    center_horizontal
    widthmatch_parent に変えていきます
  • 6:27 - 6:29
    はい もう一度
    チェックしてみましょう
  • 6:29 - 6:31
    いい感じです
    全てが中央にあります
  • 6:31 - 6:32
    とてもいい感じに見えます
  • 6:32 - 6:34
    全てが潰されていることを除いては
  • 6:34 - 6:37
    これらの要素の間には
    スペースの余裕がありません
  • 6:37 - 6:41
    それぞれのテキストビューの padding
    4 を与えます
  • 6:41 - 6:46
    padding を書いていきます
    4dp にします
  • 6:47 - 6:48
    dp を覚えていますか
  • 6:48 - 6:52
    そして私はただの padding を使っています
    padding bottom とかじゃありません
  • 6:52 - 6:54
    テキストビュー全体の周囲に
    4dp のスペースを供給します
  • 6:54 - 6:57
    プレビューでとのように見えるか
    見てみましょう
  • 6:58 - 7:01
    はい それは少しだけ広い
    スペースを与えました
  • 7:01 - 7:04
    同じことを得点のテキストビューにも
    していきます
  • 7:08 - 7:11
    はい これから同じことを
    ボタンにもしていきます
  • 7:16 - 7:19
    うーん ちゃんと効いているようには
    思えません
  • 7:19 - 7:24
    もしもう少し大きく
    8 くらいにしてみたらどうでしょう?
  • 7:24 - 7:26
    20 ?
  • 7:26 - 7:30
    うーん 興味深いですね ボタン自身が
    大きくなっているように思えます
  • 7:30 - 7:32
    私はボタンそれ自身を
    大きくしたくはありません
  • 7:32 - 7:34
    ボタンのスペース周辺を
    大きくしたいです
  • 7:34 - 7:38
    そして実は それは layout_margin
    の方が良い仕事をしてくれます
  • 7:38 - 7:41
    覚えておいてください padding
    ビュー内部の padding に追加し―
  • 7:41 - 7:43
    margin はビュー周辺のスペースに
    追加します
  • 7:44 - 7:45
    なので私達はこれを layout_margin
    に変えていきます
  • 7:45 - 7:47
    8dp にします
  • 7:47 - 7:49
    はい より良い感じです
  • 7:49 - 7:53
    今 2 つのビューの間の周囲に
    スペースがあります
  • 7:53 - 7:55
    さあ 先に進み 他のボタンを
    やっていきましょう
  • 7:56 - 8:00
    マージン パディングではなく
    layout_margin
  • 8:00 - 8:01
    はい とても良い感じに見えます
  • 8:01 - 8:04
    もしあなたが私がやったのと
    違う属性を選んだなら―
  • 8:04 - 8:08
    おそらく padding を 5 の代わりに 4
    それで大丈夫です
  • 8:08 - 8:12
    覚えておいて下さい このポイントは
    読みやすいように作成しているだけです
  • 8:12 - 8:15
    私達は全てのフォントサイズと
    色について 後の段階で心配しています
  • 8:17 - 8:18
    はい
  • 8:18 - 8:19
    素晴らしい働きです
  • 8:19 - 8:20
    あなたはそのステップをやりました
タイトル:
4 - The Stages SOL
概説:

more » « less
Video Language:
English
Team:
Udacity
プロジェクト:
UD837 - Android for Beginners
Duration:
08:22

Japanese subtitles

改訂