Return to Video

07-42 Add the Reset Button

  • 0:00 - 0:04
    これが、[CourtCounter]アプリの写真です。
  • 0:04 - 0:06
    この様になるようにしたいと思います。
  • 0:06 - 0:10
    私のやり方では、XMLファイルから始めます。
  • 0:10 - 0:13
    現在のビューの状況を考えてみましょう。
  • 0:13 - 0:18
    これがのビューは、縦の[LinearLayout]に
  • 0:18 - 0:19
    なっています。
  • 0:19 - 0:23
    BチームとAチームのそれぞれに
    [LinearLayout]があります。
  • 0:23 - 0:27
    ここで、二つのルートビューを持つことはできません。
  • 0:27 - 0:31
    さらに、これらは横のL[inearLayout]の
    入れ子になっています。
  • 0:31 - 0:35
    この二つの子のレイアウトが、
    y横並びになっています。
  • 0:35 - 0:38
    ここにリセットボタンを加えたいと思います。
  • 0:38 - 0:41
    ここで、様々なレイアウトを扱う上で、
    混乱を避けるために、
  • 0:41 - 0:45
    この横の[LinearLayout]の中にある全てのものを、
  • 0:45 - 0:48
    一つのビューとして考えます。
  • 0:48 - 0:53
    そしてこの横の[LinearLayout]と、
  • 0:53 - 0:54
    [RESET]ボタンを見てみます。
  • 0:54 - 0:57
    この二つのビューのレイアウトを考えます。
  • 0:57 - 1:02
    片方のビューは上にあり、
    もう片方は下にあります。
  • 1:02 - 1:06
    さて、どのビューグループを使えば、
  • 1:06 - 1:09
    上と下に、ビューを置くことができるでしょうか。
  • 1:09 - 1:13
    それには相対的なレイアウトを
    使うことができます。
  • 1:13 - 1:17
    ここに横の[LinearLayout]を置いて、
    親の横幅を合わせて、
  • 1:17 - 1:20
    そして内容を入れ子にして高さを調節します。
  • 1:21 - 1:24
    そしてここにリセットボタンを置いて、
    中央に合わせて、
  • 1:24 - 1:26
    ペアのうちの下側に持ってきます。
  • 1:26 - 1:29
    この相対的なレイアウトには、
  • 1:29 - 1:33
    ボタンと[LinearLayout]の二つの子があります。
  • 1:33 - 1:36
    子ボタンはこのリセットボタンで、
  • 1:36 - 1:40
    [LinearLayout]は、
    この横の[LinearLayout]になります。
  • 1:40 - 1:44
    そしてこの横の[LinearLayout]には
    二つの子があります。
  • 1:44 - 1:47
    その子も[LinearLayout]になっています。
  • 1:47 - 1:50
    ここにあるように、それぞれAチームとBチームの
  • 1:50 - 1:52
    [LinearLayout]になっています。
  • 1:52 - 1:57
    Aチームの[LinearLayout]には、
    二つのビューと3つのボタンがあります。
  • 1:57 - 2:00
    Bチームの[LinearLayout]でも同様です。
  • 2:00 - 2:03
    子に、二つのビューと、
    三つのボタンがあります。
  • 2:03 - 2:05
    この部分が、皆さんがすでに
    作ったものです。
  • 2:05 - 2:09
    この部分を加えるだけです。
    それではやってみましょう。
  • 2:09 - 2:13
    このXMLコードで、最初にやることは、
  • 2:13 - 2:18
    ダイアグラムで示した、
    ルートの相対的レイアウトを作ることです。
  • 2:18 - 2:24
    ここに[RelativeLayout]を記入します。
  • 2:24 - 2:28
    ルートレイアウトになければいけないので、
    この二行をカットペイストします。
  • 2:28 - 2:34
    これをカットして、ルートレイアウトのここに
    ペイストします。
  • 2:34 - 2:37
    そしてこの[RelativeLayout]を閉じます。
  • 2:37 - 2:44
    そしてこの終結タグを一番下まで持ってきます。
  • 2:46 - 2:49
    現在あるのは、ダイアグラムのこの部分です。
  • 2:49 - 2:53
    エラーが生じたようです。
  • 2:53 - 2:57
    幅と高さを決めていませんでした。
    そこを直してみましょう。
  • 2:59 - 3:02
    この[RelativeLayout]には、ボタンが、
    中央の下に来なければいけません。
  • 3:02 - 3:05
    そのためには、スクリーン全体を
    使わなければいけません。
  • 3:05 - 3:07
    両方に[match_parent]をします。
  • 3:09 - 3:12
    さて、ボタンを加えてみましょう。
  • 3:12 - 3:18
    ここにスクロールダウンして、
    [LinearLayout]が終結するところまで来ます。
  • 3:18 - 3:23
    まだ[RelativeLayout]の中にいるので、
    ここにボタンを加えたいと思います。
  • 3:23 - 3:27
    このボタンの中身をラップします。
  • 3:27 - 3:30
    ボタンがスクリーン全体や、
    スクリーン下部全体を
  • 3:30 - 3:33
    うめるわけではないからです。
  • 3:34 - 3:37
    このボタンの親は[RelativeLayout]です。
  • 3:37 - 3:40
    このボタンのテキストをリセットとします。
  • 3:40 - 3:43
    どのようになるかを見てみましょう。
  • 3:43 - 3:47
    リセットボタンがここにあります。
    意図していた位置ではありませんね。
  • 3:47 - 3:52
    スクリーン全体を埋めるのが
    親である[RelativeLayout]です。
  • 3:52 - 3:54
    なので、親に合わせることができます。
  • 3:54 - 3:57
    親の下部に合わせて、
  • 3:57 - 4:01
    そして横方向の中央に来るようにします。
  • 4:01 - 4:04
    意図した位置に来ましたね。
  • 4:04 - 4:06
    ここで全てを選択します。
  • 4:06 - 4:10
    そしてcommand+option+Lを押します。
  • 4:10 - 4:14
    ウィンドウズではcontrol+alt+Lになります。
    再フォーマットして、
  • 4:14 - 4:16
    見栄えを良くします。
  • 4:16 - 4:19
    さて、Javaコードに戻ってみましょう。
  • 4:19 - 4:23
    ボタンはあるんですが、
    なんの機能も付いていません。
  • 4:23 - 4:26
    メソッドから作っていきましょう。
  • 4:26 - 4:32
    それをディスプレイメソッドの上に作ります。
    [public void]と記入します。
  • 4:32 - 4:35
    このメソッドを[resetScore]をします。
  • 4:35 - 4:38
    それがこのボタンの機能になります。
  • 4:38 - 4:43
    スクロールアップして、
    他のメソッドも[View v]にマッチします。
  • 4:43 - 4:47
    そして中カッコを記入します。
  • 4:47 - 4:50
    この内容は今は気にしません。
  • 4:50 - 4:53
    XMLコードに戻って、
  • 4:53 - 4:57
    このボタンをJavaコードにつなげたいと思います。
  • 4:57 - 5:02
    [resetScore]に[onClick]アトリビュートを加えます。
  • 5:02 - 5:06
    ボタンを押すとコードが
    実行されるわけですが、
  • 5:06 - 5:08
    そのコードがまだありません。
  • 5:08 - 5:09
    何を加えるかを考えてみましょう。
  • 5:11 - 5:14
    再び疑似コードについて考えてみます。
  • 5:14 - 5:17
    リセットボタンを押したとき、
    何が起きるべきでしょうか。
  • 5:17 - 5:21
    二つの得点の表示を0にして、
  • 5:21 - 5:24
    両チームの得点の変数を
  • 5:24 - 5:27
    0にしなければいけません。
  • 5:27 - 5:30
    これらのボタンを押すと、
    2を加えて、
  • 5:30 - 5:32
    それを表示しています。
  • 5:32 - 5:34
    なので、変数を0に戻さないと、
  • 5:34 - 5:36
    違った数字が表示されてしまいます。
  • 5:36 - 5:39
    疑似コードで表すとこうなります。
  • 5:39 - 5:43
    まず、Aチームの得点を0にします。
  • 5:43 - 5:46
    そしてBチームにも同じようにします。
  • 5:46 - 5:50
    変数は0になりますが、
    まだ何も表示されません。
  • 5:50 - 5:55
    なので、ステップ3で、0になった
    両チームの得点を表示します。
  • 5:56 - 6:00
    詳しく言うと、
    Aチームの得点を表示し、
  • 6:00 - 6:04
    そしてBチームの得点を表示します。
  • 6:04 - 6:08
    ステップ1と2でどちらも0にしたので、
  • 6:08 - 6:10
    どちらも0と表示されます。
  • 6:10 - 6:14
    そして[ScoreForTeamA]や
    [ScoreForTeamB]を更新するときには、
  • 6:14 - 6:18
    0から始まります。
  • 6:20 - 6:24
    [resetScore]にcode codeという
    疑似コードを記入します。
  • 6:24 - 6:29
    まず、代入演算子を使って、
  • 6:29 - 6:34
    [scoreTeamA]を0にします。
  • 6:34 - 6:36
    セミコロンも忘れないようにしましょう。
  • 6:37 - 6:39
    Bチームのスコアにも同じようにします。
  • 6:42 - 6:49
    そして、Aチームの得点を表示し、
  • 6:49 - 6:53
    そしてBチームの得点を表示します。
  • 6:55 - 6:57
    コメントも加えてきます。
  • 6:59 - 7:00
    これで大丈夫だと思います。
  • 7:00 - 7:04
    端末の方でしばらく実行していないので、
  • 7:04 - 7:07
    実行ボタンを押してみます。
  • 7:07 - 7:08
    リセットボタンがあります。
  • 7:08 - 7:09
    ちゃんと機能するか見てみましょう。
  • 7:13 - 7:15
    得点が0になりましたね。
  • 7:15 - 7:16
    少し得点を加えてみましょう。
  • 7:16 - 7:19
    リセットボタンが機能するかをチェックしてみます。
  • 7:24 - 7:28
    ちゃんと機能しているようですね。
  • 7:28 - 7:30
    これは少し難しかったですね。
  • 7:30 - 7:34
    この順番を入れ替えるとどうなるかを
    見てみましょう。
  • 7:34 - 7:35
    どう変わるでしょうか。
  • 7:36 - 7:39
    この二つを入れ替えてみます。
  • 7:39 - 7:41
    どうなるでしょうか。
  • 7:42 - 7:46
    どうなるかを見てみましょう。
  • 7:46 - 7:48
    いくつか得点を加えて、
  • 7:49 - 7:53
    リセットボタンを試してみましょう。
  • 7:53 - 7:56
    何も起きていません。
  • 7:56 - 7:59
    ここをクリックすると、少しおかしいですね。
  • 7:59 - 8:01
    ここでは少し分かりにくいんですが、
  • 8:01 - 8:05
    最初の得点は19で、リセットボタンを
    押すと、何も変わりませんでした。
  • 8:05 - 8:08
    しかし、フリースローを押すと、1となりました。
  • 8:10 - 8:12
    こっち側で2点を押すと、
  • 8:12 - 8:14
    2になりました。
  • 8:14 - 8:18
    なぜこうなるのかをコードをみて考えてみましょう。
  • 8:18 - 8:21
    表示と代入を入れ替えました。
  • 8:21 - 8:25
    そして何が起きるかを見ました。
  • 8:25 - 8:30
    Aチームが30点、Bチームが40点だとします。
  • 8:30 - 8:33
    その状態で表示すると、30となります。
  • 8:33 - 8:37
    Bチームには、40と表示されます。
  • 8:37 - 8:41
    その後に値が0になります。
  • 8:41 - 8:46
    すでに表示したので、
    この0は表示されません
  • 8:46 - 8:48
    変数自体は0になります。
  • 8:48 - 8:53
    なので、[addThreeForTeamB]などの
    ボタンを押すと、
  • 8:53 - 9:00
    0になった得点に3点を加えるので、
    3と表示されます。
  • 9:00 - 9:06
    外見上は、Bチームが30点から、
  • 9:06 - 9:12
    リセットボタンを押した後に3点を加えると、
    3点と表示されます。おかしいですね。
  • 9:12 - 9:15
    順番を入れ替えずにこの問題を
    解消する方法は、
  • 9:15 - 9:19
    0を表示することができます。
  • 9:19 - 9:22
    皆さん自身で試してみてください。
    機能すると思います。
  • 9:22 - 9:24
    少し分かりずらいですが、
  • 9:25 - 9:29
    このような例は、
    コードの微妙な部分を示すことができるので、
  • 9:29 - 9:31
    取り入れています。
  • 9:31 - 9:34
    このケースでは、最初のコードの方が、
  • 9:34 - 9:36
    良いものだと思います。
  • 9:36 - 9:39
    しかし、コードを書く上で、
    やり方が二つあり、
  • 9:39 - 9:43
    どちらも正しいという状況が出てきます。
  • 9:43 - 9:45
    正解は一つだけではないので、
  • 9:45 - 9:49
    一つのやり方に固執する必要はありません。
  • 9:49 - 9:53
    自分の考え方にあったやり方でやってみて、
    他の人のコードと比べて、
  • 9:53 - 9:58
    どちらが効率的で明確かを
    判断してみてください。
  • 9:58 - 10:01
    そのような作業はとても役に立ちます。
  • 10:01 - 10:04
    ここでは、最初に機能していた
  • 10:04 - 10:05
    コードのに戻します。
  • 10:05 - 10:10
    これで、全ての機能がそろいました。
    しかしあまり綺麗には見えないので、それを直しましょう。
Title:
07-42 Add the Reset Button
Description:

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

Japanese subtitles

Revisions