Return to Video

13-02 Adding a CheckBox - Solution

  • 0:01 - 0:03
    要建立這個配置,首先
    思考我們需要的檢視方式
  • 0:03 - 0:07
    我要假設這些都已經建立好
    我們只需要
  • 0:07 - 0:11
    談談需要新增到配置的新東西
  • 0:11 - 0:15
    我們需要新增的兩個檢視
    是澆頭的TextView
  • 0:15 - 0:18
    與鮮奶油選項的勾選框格
  • 0:18 - 0:21
    你大概不知道安卓有這個項目
  • 0:21 - 0:24
    希望透過谷哥搜尋
    可以幫你找到答案
  • 0:25 - 0:28
    繼續到第二步驟
    我們需要決定配置的位置
  • 0:28 - 0:31
    假設這些項目位置都正確
  • 0:31 - 0:35
    我們只需要在同一排
    新增澆頭與鮮奶油項目
  • 0:35 - 0:37
    因為原始項目是垂直
  • 0:37 - 0:40
    線形配置,我們只需要
    在上方新增這兩個項目
  • 0:41 - 0:44
    第三步驟,設計項目
  • 0:44 - 0:46
    澆頭標題的風格與數量
  • 0:46 - 0:49
    和訂單概要一樣
    所以我們只需要複製
  • 0:49 - 0:51
    貼上已經存在的標題
  • 0:51 - 0:55
    勾選框格項目是新的
    所以需要設計風格
  • 0:55 - 0:59
    框格與文字之間的間格是24點
  • 0:59 - 1:04
    而且要將鮮奶油的字型大小
    改為16點
  • 1:04 - 1:06
    現在就讓我們在應用程式做改變
  • 1:07 - 1:11
    要讓澆頭標題跟數量一樣
    我只要複製
  • 1:11 - 1:13
    貼上編碼
  • 1:13 - 1:17
    複製然後新增到垂直線形配置上方
  • 1:18 - 1:20
    好,現在這裡有兩個數量
  • 1:20 - 1:23
    我要把文字改成澆頭
  • 1:23 - 1:25
    我也複製下方邊緣空白
  • 1:25 - 1:29
    讓標題與下方內文之間有間格
  • 1:30 - 1:33
    我們還沒在應用程式加入勾選框格
  • 1:33 - 1:34
    所以我要用谷哥搜尋如何做
  • 1:34 - 1:38
    我要搜尋安卓勾選框格
  • 1:38 - 1:41
    記得要加安卓
    因為可能有其他平台的
  • 1:41 - 1:45
    勾選框
    像是網頁或其他行動平台
  • 1:45 - 1:48
    這能將搜尋結果特定在安卓平台
  • 1:48 - 1:50
    我們先試試第一個連結
  • 1:50 - 1:53
    這是勾選框格的參考文件
  • 1:53 - 1:56
    我捲動檢視
    看到不錯的等級概要
  • 1:56 - 1:59
    然後直接就是XML屬性
  • 1:59 - 2:03
    我喜歡XML勾選框格的範例
  • 2:03 - 2:05
    所以讓我們再回去搜尋結果
  • 2:05 - 2:07
    點選第二個連結
  • 2:07 - 2:10
    酷,這顯示勾選框格的圖片
  • 2:10 - 2:12
    也有一些XML
  • 2:12 - 2:13
    這看起來不錯
  • 2:13 - 2:16
    有兩個線形配置的勾選框格
  • 2:16 - 2:19
    我要複製第一個勾選框格
  • 2:19 - 2:20
    然後貼到我們的應用程式
  • 2:22 - 2:26
    回到我們的應用程式
    我要貼在澆頭文字後面
  • 2:26 - 2:29
    但在數量文字前面,在這裡
  • 2:29 - 2:33
    我要修改XML
    因為這不太適合我們的案子
  • 2:33 - 2:37
    我要移除id還有這裡的文字
  • 2:37 - 2:40
    把肉類換掉
    因為我們的店不賣肉類
  • 2:40 - 2:42
    我要輸入鮮奶油
  • 2:43 - 2:46
    對了,你在
    @string/meat前面看到的
  • 2:46 - 2:50
    是strings.xml檔案的參照資源
  • 2:50 - 2:53
    我們之後會做更多說明
    但是現在
  • 2:53 - 2:56
    你只要直接在這裡輸入字串
  • 2:56 - 2:59
    看,預覽更新,所以現在
    我們有鮮奶油的勾選框格
  • 2:59 - 3:03
    勾選框格項目很棒的是
  • 3:03 - 3:08
    有一個框格與文字
    你不需要再新增文字項目
  • 3:08 - 3:11
    我們也不需要這裡的onClick
  • 3:12 - 3:16
    這個編碼任務是要讓
    勾選框格出現在這裡
  • 3:16 - 3:20
    另一個完成XML的方式是
    查看通用的
  • 3:20 - 3:21
    安卓項目快檢表
  • 3:23 - 3:25
    這個快檢表有一堆通用的安卓項目
  • 3:25 - 3:27
    也有XML的範例
  • 3:28 - 3:33
    這是勾選框格項目
    這是看起來的樣子
  • 3:33 - 3:34
    對照到XML
  • 3:34 - 3:37
    你可以從這裡複製XML
    然後貼到應用程式裡
  • 3:38 - 3:41
    回到安卓工作室
    執行應用程式看看
  • 3:42 - 3:43
    就是這樣
  • 3:43 - 3:44
    看起來不錯
  • 3:44 - 3:47
    我們有澆頭標題
    與鮮奶油的勾選框格
  • 3:48 - 3:50
    勾選框格時
    也有很酷的動畫效果
  • 3:51 - 3:55
    唯一的問題是沒有空格
  • 3:55 - 3:58
    舉例來說,數量標題與
  • 3:58 - 4:01
    鮮奶油勾選框太擠了
    這裡也沒有足夠的間格
  • 4:02 - 4:04
    回到我們提供的紅標行
  • 4:04 - 4:09
    我們要加24點間格
    把字型大小改成16點
  • 4:11 - 4:13
    首先我要改字型大小
  • 4:13 - 4:18
    我要輸入android.textSize
    然後輸入16sp
  • 4:18 - 4:22
    我要打開預覽
    看字型有沒有變大
  • 4:22 - 4:24
    有,變大了
  • 4:24 - 4:27
    如果你不確定有沒有更新
    你可以點擊這個按鍵
  • 4:27 - 4:27
  • 4:27 - 4:30
    現在看看間隔
    我已經設定好了
  • 4:30 - 4:32
    經過多次嘗試之後
  • 4:32 - 4:34
    我要設定邊緣值
  • 4:34 - 4:38
    然後試著設定填充值
    結果paddingLeft
  • 4:38 - 4:43
    控制框格與文字的間格
  • 4:43 - 4:43
    讓我們新增間格
  • 4:45 - 4:47
    酷,文字移動了
  • 4:47 - 4:49
    我還是發現一個問題
  • 4:49 - 4:53
    這裡有足夠的垂直空間
    但是這裡的垂直空間不夠
  • 4:53 - 4:58
    我可以新增底部空間
    或是勾選框格的底部邊緣
  • 4:58 - 5:02
    或是新增上方空間
    或是在數量標題上方加邊緣
  • 5:02 - 5:03
    任一種方式都可以
  • 5:03 - 5:07
    我要在數量標題上方加邊緣空間
  • 5:07 - 5:09
    好了,看起來好多了!
  • 5:09 - 5:11
    現在項目的間格較一致了
  • 5:11 - 5:13
    我要在我的裝置上執行應用程式
  • 5:14 - 5:15
    這就是應用程式
  • 5:15 - 5:16
    看起來不錯
  • 5:16 - 5:17
    做得好
  • 5:17 - 5:21
    需要新增更多UI變更到
    應用程式時,你可以照這個模式
  • 5:21 - 5:25
    線上谷哥搜尋資訊
    然後套用到你的應用程式
Title:
13-02 Adding a CheckBox - Solution
Description:

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

Chinese, Traditional subtitles

Revisions