YouTube

Got a YouTube account?

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

Chinese, Simplified subtitles

← Adding a CheckBox - Solution

Get Embed Code
13 Languages

Showing Revision 2 created 08/04/2016 by Udacity Robot.

  1. 为了创建这个布局 我们首先想想需要哪些 View
  2. 我假设所有的这一切都已经建好了
  3. 只是讨论需要增加到布局里的新东西
  4. 我们需要增加的这两个 View 是内容为 Toppings 的 TextView
  5. 和内容为生奶的 CheckBox 视图
  6. 你可能不知道 Android 里存在这个 View
  7. 但是希望你用 Google 搜索帮助你找到答案
  8. 继续第二步 我们需要定位 View
  9. 假设这些 View 已经正确定位好
  10. 我们只需要在同一排垂直增加 Toppings 和 Whipped cream
  11. 因为根 View 是垂直的
  12. LinearLayout 我们只是在它的顶部增加两个 View
  13. 第三步 我们需要设计 View
  14. 在 Toppings 标题的样式和 Quantity 以及 Order Summary 标题的样式是一样的
  15. 我们只是复制
  16. 和粘贴早已存在的标题
  17. 这个 CheckBox 视图是新的 所以我们相应地需要设计它的样式
  18. 让框与文本之间的距离为 24 dp
  19. 将 Whipped cream 字体大小改为 16 sp
  20. 现在 在我们的应用上做出这些改变
  21. 为了添加一个像 QUANTITY 的标题的Toppings 标题
  22. 我只是复制粘贴这段代码
  23. 复制它 然后添加它到这个垂直 LinearLayout 的顶部
  24. 好 所以现在显示两个 QUANTITY
  25. 我想要改变文本使它显示 Toppings
  26. 复制底部空白部分
  27. 这样标题和下面的内容之间有一些空间
  28. 在我们没有添加 CheckBox 给应用之前
  29. 我想用 Google 搜索怎样去做
  30. 搜索 checkbox android
  31. 记得加上 android 因为其他平台也有可能有 CheckBox
  32. 例如网页 或其他移动平台
  33. 这会让你得到和 Android 相关的结果
  34. 我们试一下第一个链接
  35. 这是 CheckBox 类的参考文档
  36. 向下滚动 可以看到一个类的概述
  37. 然后直接进入 XML 属性
  38. 我真的喜欢这个 即使它是 CheckBox 在 XML 中使用的一些例子
  39. 返回搜索结果
  40. 单击第二个链接
  41. 酷 现在它显示一些 CheckBox 的图片
  42. 这是一些 XML
  43. 这看起来非常好
  44. 在 LinearLayout 里有两个 CheckBox
  45. 我只是复制第一个 CheckBox 的代码
  46. 然后粘贴它到我们的应用里
  47. 返回我们的应用 我将它粘贴到 Toppings 文本之后
  48. 不过在 QUANTITY 文本之前 所以这里正好
  49. 我想要修改 XML 因为它不是非常适合我们的使用情况
  50. 我将删除 id 和这里的 text
  51. 替换肉 因为咖啡店里不卖肉
  52. 我将设计 Whipped cream 的类型
  53. 顺便说一句 你之前看到的 @string/meat
  54. 是指在 strings.xml 文件里的一个资源字符串
  55. 之后我们会再谈谈这一点 但是现在
  56. 你可以在这里直接输入字符串
  57. 看 预览更新了 所以现在有一个叫 Whipped cream 的 CheckBox
  58. CheckBox 给你一个框
  59. 和一些文本 所以你在这里你不必增加另外的文本视图
  60. 我们也不需要 onClick 这一行
  61. 对于这个编码任务我们所关心的是使 CheckBox 出现在这里
  62. 你能够到这个 XML 的其他方式是通过
  63. 检查常见的 Android 视图备忘单
  64. 这个备忘单列出了一些常见的 Android 视图
  65. 它有一些 XML 的例子
  66. 这是 CheckBox 视图 这是它是什么样的一个例子
  67. 和对应的 XML
  68. 你可以从这复制 XML 代码
  69. 返回 Android Studio 然后运行应用来看它是什么样的
  70. 它在这里
  71. 看起来非常好
  72. 我们有一个 Toppings 标题和一个 Whipped cream 复选框
  73. 我们也得到了这个酷的动画 当我们勾选这个框的时候
  74. 我看到的唯一的问题是没有间距
  75. 例如 QUANTITY 标题和 Whipped cream 复选框太近了
  76. 它们之间没有足够的空间
  77. 返回我们标注红线的地方
  78. 我们应该在这增加 24 dp 的空间 并改变字体大小为 16 sp
  79. 首先 我将先改变字体的大小
  80. 输入 android:textSize=“16sp”
  81. 我将打开这里的预览来检查它是否增加字体大小
  82. 确实变大了
  83. 如果你不确定它是否刷新 你可以一直按这个按钮
  84. 现在为了弄清楚间隔
  85. 我通过一些实验和错误工作得到了经验
  86. 我试着设置外间距值
  87. 和内间距值 事实证明 paddingLeft
  88. 控制着框和文本之间的间距
  89. 现在我们增加内间距
  90. 文本移动到这了
  91. 但还存在一个问题
  92. 这里有足够的垂直空间 但是这里没有
  93. 我要么添加底部内边距 要么添加底部外边距给这个 CheckBox
  94. 或添加顶部内边距 又或者添加顶部外边距给 QUANTITY 标题
  95. 无论是哪种工作方式都能奏效
  96. 我选择给 QUANTITY 标题添加 marginTop(顶部外边距)属性
  97. 看起来更好了
  98. 现在各个部分之间的间距更匀称了
  99. 我将在我的设备上运行这个应用
  100. 这是应用运行效果
  101. 看起来非常好
  102. 干得漂亮
  103. 当你需要将更多的 UI 变化添加到你的应用时 你可以按照
  104. Google 搜索网上信息的模式 然后将它应用到你的应用里