YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Chinese, Traditional subtitles

← 13-02 Adding a CheckBox - Solution

Get Embed Code
13 Languages

Showing Revision 1 created 10/20/2015 by sp11.

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