Chinese, Simplified subtitles

← Build_Layout

Get Embed Code
13 Languages

Showing Revision 2 created 07/18/2016 by Udacity Robot.

  1. 为了建立这个布局 我们打开 activity_main.xml 文件
  2. 我们用垂直线性布局把这些视图
  3. 垂直的放置
  4. 所以第一步 我需要把 RelativeLayout 改成 LinearLayout
  5. 立刻就出现了一个错误提示 即起始标记与
  6. 结束标记不匹配 所以我把这个复制粘贴到这里来
  7. 现在 标记就匹配了
  8. 下一步 我可以加入视图
  9. 首先 需要一个 QUANTITY TextView
  10. 所以 我用这里的这个 TextView 并且把它的 text 改为 “Quantity”
  11. 接下来 我需要一个写着 0 的 TextView
  12. 我把上面第一个 TextView 复制到下面
  13. 根据这个屏幕截图 我把它的 text 改为 “0”
  14. 这个线性布局中的最后一个子视图是一个按钮
  15. 我们还没有在布局中添加按钮 你可以在 Google 中搜索如何添加按钮
  16. 如果你打开了一个浏览器 你可以搜索 “button android”
  17. 第一个链接看起来不错 它是 developer.android.com 网站的链接
  18. 这是关于 Button 的文档 我们忽略大部分的内容
  19. 将滑动条向下拉 来看类的概述
  20. 这里提到了一些我们还没有学过的 Java 代码
  21. 但是在下面有关于 Button 的 XML 代码
  22. 我们复制它 看看它的效果
  23. 在我们的布局中 我要在这两个 TextView 下面添加一个 Button
  24. 我们把代码粘贴在这
  25. 把 “@string/self_destruct”
  26. 改成 “ORDER”
  27. 最后一行可以删掉 因为我们不需要
  28. 现在 我们就有了一个 “QUANTITY” TextView 一个 “0” TextView
  29. 和一个 “ORDER” Button
  30. 运行我们的应用 看看它是什么样子的
  31. 通过点击绿色的运行按钮
  32. 从下面可以看到它还在编译
  33. 这不是我们想要的
  34. 看起来水平布局代替了垂直布局
  35. 让我们确定一下是否添加了orientation 属性
  36. 把这里改成 android;orientation="vertical"
  37. 问题解决了
  38. 再点击运行
  39. 现在好啦
  40. 这三个子视图垂直排列在这里
  41. 现在 我们要设置样式
  42. 使得它们看起来与屏幕截图更加相似
  43. 从这张截图我们可以看到 QUANTITY 的文本是大写的
  44. 我们在课程一中学过一个属性 android:textAllCaps
  45. 在自动填充提示里有这个属性
  46. 如果提示框里有这个属性 你可以直接点回车键
  47. 它就自动地添加到这里了
  48. 我们把它的值设置为 true 因为我们希望显示大写字母
  49. 我们之所以用这个属性
  50. 是因为 如果我们想改变用户界面使得 QUANTITY 为小写
  51. 我们只需要删除这个属性就够了
  52. 而不用改变文本
  53. 接下来 把 “0” 设置为 16sp 大小
  54. 我们添加一个 textSize 属性 提示框里已经显示出来了
  55. 点击回车即可 把它的值设置为 16sp
  56. 我想把它设置成黑色字体
  57. 我将使用 Android 系统中的黑色
  58. 通过这样来引用它
  59. 这两个 TextView 已经设置好了
  60. Button 这样就很好 它的文本都是自动大写的
  61. 它的 height 和 width 的值都是 wrap_content
  62. 我们需要解决垂直的间隔问题
  63. 我们希望 “QUANTITY” 和 “0” 之间有 16dp 的
  64. 内间距 或者外边距
  65. 我们也希望 “0” 和 “ORDER” 按钮之间
  66. 有 16dp 的内边距
  67. 你可以通过很多方法实现它
  68. 我是通过给 Button 添加 Layout_marginTop 来实现的
  69. 给 QUANTITY TextView 添加 一个 Layout_marginBottom 属性
  70. 你可以尝试其他的方法 只要效果一样就行了
  71. 我之所以用 内边距和外边距 是因为我知道
  72. 中间的区域将会改变
  73. 我们把它变成一个数量选择器
  74. 这个选择器包含增加和减少按钮 并且希望 quantity 的标题
  75. 与选择器之间有 16dp 的间隔
  76. 对 Button 也是一样
  77. 在设备上重新运行它
  78. 效果正是我们想要的
  79. QUANTITY TextView 中的文本都是大写的 “0” TextView 中的文本都是
  80. 黑色字体 并且字体大小都是 16dp 而且 ORDER Button 也在这
  81. 而且这些视图中的间隔都是 16dp
  82. 干得好 我差点忘了
  83. 还有一个问题是 当点击按钮之后会发生什么
  84. 目前什么也没发生
  85. 看看接下来会发生什么