Return to Video

07-42 Add the Reset Button

  • 0:00 - 0:04
    好,這張圖是我們的計分程式。
  • 0:04 - 0:06
    我們至少想它變成這樣。
  • 0:06 - 0:10
    現在我會開始根據自己的建議
    由XML開始。
  • 0:10 - 0:13
    讓我們開始想想現在的情況,
  • 0:13 - 0:18
    我們仍然看到全部views
    它們是垂直排列
  • 0:18 - 0:19
    LinearLayout
  • 0:19 - 0:23
    我們已有Team ATeam B
    LinearLayout
  • 0:23 - 0:27
    你不可以有兩個rootviews,另外
  • 0:27 - 0:31
    它們是在同一個LinearLayout中,
    且並列顯示。
  • 0:31 - 0:35
    這兩個子LinearLayout
    可以水平並列在對方旁邊。
  • 0:35 - 0:38
    好,現在我想在下面
    加入一個重設按鈕。
  • 0:38 - 0:41
    為了不用你為這些不同的版面
  • 0:41 - 0:45
    想得太辛苦,
    我想你把所有這裡的東西想像為
  • 0:45 - 0:48
    一個水平的LinearLayout
    就像只有單一個view
  • 0:48 - 0:53
    現在你只要試著把這個水平的
    LinearLayout放到這裡。
  • 0:53 - 0:54
    及這個重設按鈕。
  • 0:54 - 0:57
    你要嘗試設計兩個views
  • 0:57 - 1:02
    其中一個view在頂部,
    另一個view在底部。
  • 1:02 - 1:06
    所以現在的問題是哪一種的
    ViewGroup可以讓你
  • 1:06 - 1:09
    在螢幕的頂部及底部
    都可以有一個view?
  • 1:09 - 1:13
    RelativeLayout
    看來會是一個好選擇
  • 1:13 - 1:17
    我可以在這裡放水平的LinearLayout
    它的闊度跟母框一樣。
  • 1:17 - 1:20
    然後在這個高度中
    包含著中間的內容。
  • 1:21 - 1:24
    我可以在這底部的正中
  • 1:24 - 1:26
    放一個重設按鈕。
  • 1:26 - 1:29
    好,你有一個RelativeLayout
  • 1:29 - 1:33
    這個RelativeLayout下面有個
    子按鈕及子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
    其中一個LinearLayout
    team A的,
  • 1:50 - 1:52
    而另一個是team B的。
  • 1:52 - 1:57
    team ALinearLayout
    中有兩個text views 及三個按鈕。
  • 1:57 - 2:00
    team B
    LinearLayout亦相同。
  • 2:00 - 2:03
    其五個子項目,兩個text views
    及三個按鈕。
  • 2:03 - 2:05
    這部分的頁面你已經完成。
  • 2:05 - 2:09
    你只需要再加入這個
    好,開始吧。
  • 2:09 - 2:13
    好,我在我的XML編碼中
    首先要做的
  • 2:13 - 2:18
    是你在圖表中看到的
    RelativeLayout的根部。
  • 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
    我們將要把這按鈕的
    文字改成Reset
  • 3:40 - 3:43
    讓我們看看它變成怎樣。
  • 3:43 - 3:47
    我的重設按鈕上了去,
    這不是我想要的。
  • 3:47 - 3:52
    但它母體走了出去
    填充了整個畫面。
  • 3:52 - 3:54
    我可以做的是把它向
    母體對齊。
  • 3:54 - 3:57
    我想把它定在母體的底部。
  • 3:57 - 4:01
    我想它在母體的正中,
    無論如何都是水平向。
  • 4:01 - 4:04
    很好,我的按鈕看來
    在正確的位置了。
  • 4:04 - 4:06
    我將會全選這裡所有東西。
  • 4:06 - 4:10
    我將會在Mac
    按下command-option-L
  • 4:10 - 4:14
    這相等於Windows系統的
    Control-Alt-L 去重設所有編碼
  • 4:14 - 4:16
    令它們易看一點。
  • 4:16 - 4:19
    好,讓我們回到Java編碼。
  • 4:19 - 4:23
    現在我已經有一個按鈕
    但它不會有任何作用。
  • 4:23 - 4:26
    讓我們開始為它加一個method
  • 4:26 - 4:32
    我將會加在display methods的上面
    輸入public void
  • 4:32 - 4:35
    我將會把method命名
    resetScore
  • 4:35 - 4:38
    因為我正常它的功能是
    重設分數。
  • 4:38 - 4:43
    捲動上來,我將會參考上面
    這些methods造成一樣。
  • 4:43 - 4:47
    輸入View v然後大括號。
  • 4:47 - 4:50
    我不會再在這裡繼續,
  • 4:50 - 4:53
    我會返回我的XML編碼,
  • 4:53 - 4:57
    我會做將這按鈕掛鉤上Java編碼
    的第二部分。
  • 4:57 - 5:02
    resetScore增加
    一個onClick屬性。

    83
    00:05:01,970 --> 00:05:06,310
    好,當我按下這按鈕
    這部分編碼便會執行。
  • 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
    另外,我同時想team A
    的分數變量
  • 5:24 - 5:27
    team B的分數變量變為0。
  • 5:27 - 5:30
    記住,當我按下這些按鈕,
    我會為變量加二
  • 5:30 - 5:32
    並把變量顯示出來。
  • 5:32 - 5:34
    所以,如果我不把
    變量重設為0,
  • 5:34 - 5:36
    這裡會顯示一個錯誤的數字。
  • 5:36 - 5:39
    我將用偽代碼方法寫下,
  • 5:39 - 5:43
    首先我想做的是把
    Team A的分數設為0。
  • 5:43 - 5:46
    然後Team B的也一樣。
  • 5:46 - 5:50
    現在它們都是0,但並未顯示出來。
  • 5:50 - 5:55
    所以在第三步,我將會顯示出
    Team A的分數,即是0,
  • 5:56 - 6:00
    更具體來說,我將會
    Team A的分數
  • 6:00 - 6:04
    顯示在這裡,而把Team B的分數
    則顯示在這裡。
  • 6:04 - 6:08
    由於我在第一及第二步已
    把他們設為0,
  • 6:08 - 6:10
    所以它們都在這裡顯示為0。
  • 6:10 - 6:14
    然後當我按下任何按鈕去更新
    ScoreForTeamA
  • 6:14 - 6:18
    ScoreForTeamB時,
    這裡會由0開始作出更新。
  • 6:20 - 6:24
    好,在重設分數這部分
    我將會把偽代碼用代碼輸入。
  • 6:24 - 6:29
    我首先做的是把A的分數
  • 6:29 - 6:34
    用賦值運算符設為0,
  • 6:34 - 6:36
    啊,當然不可忘記
    放這個分號,
  • 6:37 - 6:39
    B的分數同樣道理。
  • 6:42 - 6:49
    然後,我將會在顯示team A
    分數的位置 輸入scoreTeamA
  • 6:49 - 6:53
    然後,在顯示team B分數的位置
    輸入scoreTeamB
  • 6:55 - 6:57
    我也會在這裡加入註解
  • 6:59 - 7:00
    好,這一切看來都很合理。
  • 7:00 - 7:04
    也一段時間沒有在我的手機上
    運行測試了,
  • 7:04 - 7:07
    我將會按下運行按鈕,
    很好。
  • 7:07 - 7:08
    我已有一個RESET按鈕。
  • 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
    來試試另一邊,
    當我按下加兩分,
  • 8:12 - 8:14
    分數顯示成2。
  • 8:14 - 8:18
    讓我們再回去編碼
    看看為什麼會這樣。
  • 8:18 - 8:21
    我早前把顯示及設定分數對掉了
  • 8:21 - 8:25
    來看看會造成什麼的錯誤。
  • 8:25 - 8:30
    假設Team A現有30分而
    Team B現有40分。
  • 8:30 - 8:33
    當我看displayForTeamA
    它會是30。
  • 8:33 - 8:37
    而當我看displayForTeamB
    它會是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。
  • 9:00 - 9:06
    在我們角度看來,
    Team B分數由30分到
  • 9:06 - 9:12
    按下重設按鈕後變成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

Chinese, Traditional subtitles

Revisions