Return to Video

4 - The Stages SOL

  • 0:01 - 0:05
    在進入XML前
    先解答這些問題。
  • 0:05 - 0:07
    首先第一件事,
    選擇視圖。
  • 0:07 - 0:09
    在這裡畫方框。
  • 0:10 - 0:11
    這兒有五個
    不同的視圖,
  • 0:11 - 0:14
    不包括視圖組,
    嚴格上來說它也是一個視圖。
  • 0:14 - 0:18
    無論怎樣,
    這個五個視圖是上面這兩個,
  • 0:18 - 0:19
    後面跟著三個按鍵。
  • 0:19 - 0:24
    沒有ImageViews。
  • 0:24 - 0:28
    你或許覺得奇怪
    把這些定為兩個不同的TextViews,
  • 0:28 - 0:32
    在最終產品樣式化A組
  • 0:32 - 0:34
    和分數看起來是不一樣的。
  • 0:34 - 0:38
    因此我把這兩個認定為
    單獨的TextViews。
  • 0:38 - 0:40
    繼續到第二步,
    擺放視圖。
  • 0:40 - 0:43
    選擇要使用的ViewGroup,
  • 0:43 - 0:47
    我想到的是
    線性佈局和相對佈局。
  • 0:47 - 0:49
    這個是個垂直欄的視圖。
  • 0:49 - 0:53
    很明顯
    要用線性佈局。
  • 0:54 - 0:57
    最後一步就是風格化視圖。
  • 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
    從刪除這個TextView開始。
  • 1:13 - 1:17
    所有這些paddingLeft,
    paddingRight,paddingTop
  • 1:17 - 1:20
    和paddingBottom都刪除。
  • 1:20 - 1:23
    要小心別刪掉有用的那些。
  • 1:23 - 1:25
    好。
  • 1:25 - 1:28
    前面說過要使用的ViewGroup
    不會是個相對佈局,
  • 1:28 - 1:30
    而是線性佈局,
    現在做修改。
  • 1:31 - 1:35
    在線性佈局這裡,
    有兩個TextViews
  • 1:35 - 1:36
    後面帶有三個按鍵。
  • 1:36 - 1:38
    從這個開始。
  • 1:38 - 1:43
    現在不會指定
    視圖寬高。
  • 1:43 - 1:45
    只保留為
    wrap_content,
  • 1:45 - 1:48
    這樣TextView的方框
    圍繞文字。
  • 1:49 - 1:52
    同時給TextView
    設定文字。
  • 1:52 - 1:55
    第一個TextView
    是A組。
  • 1:56 - 1:59
    在預覽中看看。
  • 1:59 - 2:02
    能看見一個小TextView
    顯示Team A.
  • 2:02 - 2:04
    再多建立幾個。
  • 2:04 - 2:07
    下面這個是分數,
    也是一個TextView。
  • 2:07 - 2:10
    開始輸入Text.
  • 2:10 - 2:12
    出現TextView,
    回車。
  • 2:12 - 2:16
    同樣設為wrap_content。
  • 2:16 - 2:18
    添加文字。
  • 2:18 - 2:22
    分數通常從零開始,
    因此設為零。
  • 2:22 - 2:23
    好。
  • 2:23 - 2:26
    現在到按鍵。
    輸入單詞Button.
  • 2:26 - 2:28
    也設為wrap_content。
  • 2:28 - 2:32
    現在第一個按鍵
    會顯示3分。
  • 2:32 - 2:35
    繼續複製
  • 2:35 - 2:40
    黏貼兩次
    得到兩個按鍵。
  • 2:40 - 2:43
    一個按鍵顯示+2分,
  • 2:43 - 2:45
    一個按鍵顯示自由投擲。
  • 2:45 - 2:47
    一起看看預覽。
  • 2:48 - 2:51
    有三個按鍵。
  • 2:51 - 2:54
    Team A和零。
  • 2:54 - 2:56
    有所有的視圖,
  • 2:56 - 2:59
    不過和預期最終目標
    有點差別。
  • 2:59 - 3:01
    記住,它們處於一個垂直欄裡。
  • 3:01 - 3:03
    估計我需要改變佈局的方向,
  • 3:03 - 3:05
    現在處理。
  • 3:05 - 3:10
    開始輸入方向,
    需要垂直的。
  • 3:10 - 3:12
    現在看起來好些了。
  • 3:12 - 3:17
    現在這些按鍵
    擴展為窗口的寬。
  • 3:17 - 3:20
    我應該不需要
    給按鍵做wrap_content,
  • 3:20 - 3:23
    相反地,
    我需要做match_parent。
  • 3:23 - 3:24
    現在修改。
  • 3:26 - 3:29
    所有按鍵的寬現在是
    match_parent。
  • 3:29 - 3:33
    預覽。
    現在看起來好多了。
  • 3:33 - 3:39
    好的。文字還是看起來
    被擠在角落裡,
  • 3:39 - 3:44
    要解決這個
    我需要使用一個叫重力的東西。
  • 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
    這個和在TextViews裡
    輸入文字是一樣,
  • 4:01 - 4:03
    默認在左上角。
  • 4:03 - 4:09
    選擇這個文字,
  • 4:09 - 4:14
    使用屬性等量,
    叫直線,
  • 4:14 - 4:19
    使其在文字框裡水準居中
    以及垂直居中。
  • 4:19 - 4:20
    很好。
  • 4:20 - 4:24
    把視圖的內容
    移動到包含視圖邊緣
  • 4:24 - 4:27
    就是佈局重力做的事。
  • 4:27 - 4:30
    如果你認為
    這個和一些對其方式很相似
  • 4:30 - 4:34
    可以和相對佈局一起用,
    確實,
  • 4:34 - 4:37
    你可以用線性佈局
    和重力屬性,這樣更給力。
  • 4:37 - 4:39
    一起來看看代碼。
  • 4:40 - 4:44
    先處理第一個TextView,
    輸入gravity.
  • 4:45 - 4:47
    好的,有兩個選擇,
  • 4:47 - 4:49
    Layout gravity和gravity.
  • 4:49 - 4:51
    剛給你們講解了gravity屬性。
  • 4:51 - 4:53
    因此這個是需要的那個。
  • 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: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
    在這對寬做修改。
  • 6:00 - 6:05
    我用match_parent
    不用wrap_content。
  • 6:05 - 6:06
    再看看預覽。
  • 6:07 - 6:11
    縮小。
    看起來好多了。
  • 6:11 - 6:12
    向上居中。
  • 6:12 - 6:14
    對分數做同樣處理。
  • 6:16 - 6:19
    同樣添加gravity,
  • 6:19 - 6:20
    以及在所有佈局中添加。
  • 6:20 - 6:26
    水準居中,
    修改寬為match_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
    我要給每個TextViews
    4dp的填充。
  • 6:41 - 6:46
    輸入padding,
    設為4dp。
  • 6:47 - 6:48
    還記得dp嗎?
  • 6:48 - 6:52
    只用padding,
    不是底部填充或其他類似的。
  • 6:52 - 6:54
    在整個TextView周圍
    用4dp的填充。
  • 6:54 - 6:57
    預覽看看。
  • 6:58 - 7:01
    給出多一些的空間。
  • 7:01 - 7:04
    對分數TextView做同樣操作。
  • 7:08 - 7:11
    對按鍵同樣操作。
  • 7:16 - 7:19
    嗯。看起來改動不大。
  • 7:19 - 7:24
    我要是設置大一點
    像8dp會怎樣?
  • 7:24 - 7:26
    20dp會怎樣?
  • 7:26 - 7:30
    嗯,有意思,
    看起來讓按鍵本身變大。
  • 7:30 - 7:32
    我要的不是按鍵變大,
  • 7:32 - 7:34
    而是按鍵周圍的空間變大。
  • 7:34 - 7:38
    事實上,最好使用
    layout_margin。
  • 7:38 - 7:41
    記住,填充
    實際上是在視圖內填充,
  • 7:41 - 7:43
    而留白是在視圖周圍
    留出空間。
  • 7:44 - 7:45
    因此改成layout_margin。
  • 7:45 - 7:47
    設為8dp。
  • 7:47 - 7:49
    看起來好多了。
  • 7:49 - 7:53
    視圖周圍有空間,
    兩個視圖中間也有。
  • 7:53 - 7:55
    繼續處理其他按鍵。
  • 7:56 - 8:00
    留空,不是填充,
    layout_margin。
  • 8:00 - 8:01
    看起來很好。
  • 8:01 - 8:04
    如果你用的是不同屬性,
  • 8:04 - 8:08
    像5dp填充而不是4dp,
    都是可以的。
  • 8:08 - 8:12
    記住在這一點
    只是看起來更易讀一些。
  • 8:12 - 8:15
    在後面我們再來關注
    文字尺寸和顏色。
  • 8:17 - 8:19
    好。幹得不錯。
  • 8:19 - 8:20
    這步完成了。
タイトル:
4 - The Stages SOL
概説:

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

Chinese, Traditional subtitles

改訂