Return to Video

Adding a CheckBox - Solution

  • 0:01 - 0:03
    为了创建这个布局 我们首先想想需要哪些 View
  • 0:03 - 0:07
    我假设所有的这一切都已经建好了
  • 0:07 - 0:11
    只是讨论需要增加到布局里的新东西
  • 0:11 - 0:15
    我们需要增加的这两个 View 是内容为 Toppings 的 TextView
  • 0:15 - 0:18
    和内容为生奶的 CheckBox 视图
  • 0:18 - 0:21
    你可能不知道 Android 里存在这个 View
  • 0:21 - 0:24
    但是希望你用 Google 搜索帮助你找到答案
  • 0:25 - 0:28
    继续第二步 我们需要定位 View
  • 0:28 - 0:31
    假设这些 View 已经正确定位好
  • 0:31 - 0:35
    我们只需要在同一排垂直增加 Toppings 和 Whipped cream
  • 0:35 - 0:37
    因为根 View 是垂直的
  • 0:37 - 0:40
    LinearLayout 我们只是在它的顶部增加两个 View
  • 0:41 - 0:44
    第三步 我们需要设计 View
  • 0:44 - 0:46
    在 Toppings 标题的样式和 Quantity 以及 Order Summary 标题的样式是一样的
  • 0:46 - 0:49
    我们只是复制
  • 0:49 - 0:51
    和粘贴早已存在的标题
  • 0:51 - 0:55
    这个 CheckBox 视图是新的 所以我们相应地需要设计它的样式
  • 0:55 - 0:59
    让框与文本之间的距离为 24 dp
  • 0:59 - 1:04
    将 Whipped cream 字体大小改为 16 sp
  • 1:04 - 1:06
    现在 在我们的应用上做出这些改变
  • 1:07 - 1:11
    为了添加一个像 QUANTITY 的标题的Toppings 标题
  • 1:11 - 1:13
    我只是复制粘贴这段代码
  • 1:13 - 1:17
    复制它 然后添加它到这个垂直 LinearLayout 的顶部
  • 1:18 - 1:20
    好 所以现在显示两个 QUANTITY
  • 1:20 - 1:23
    我想要改变文本使它显示 Toppings
  • 1:23 - 1:25
    复制底部空白部分
  • 1:25 - 1:29
    这样标题和下面的内容之间有一些空间
  • 1:30 - 1:33
    在我们没有添加 CheckBox 给应用之前
  • 1:33 - 1:34
    我想用 Google 搜索怎样去做
  • 1:34 - 1:38
    搜索 checkbox android
  • 1:38 - 1:41
    记得加上 android 因为其他平台也有可能有 CheckBox
  • 1:41 - 1:45
    例如网页 或其他移动平台
  • 1:45 - 1:48
    这会让你得到和 Android 相关的结果
  • 1:48 - 1:50
    我们试一下第一个链接
  • 1:50 - 1:53
    这是 CheckBox 类的参考文档
  • 1:53 - 1:56
    向下滚动 可以看到一个类的概述
  • 1:56 - 1:59
    然后直接进入 XML 属性
  • 1:59 - 2:03
    我真的喜欢这个 即使它是 CheckBox 在 XML 中使用的一些例子
  • 2:03 - 2:05
    返回搜索结果
  • 2:05 - 2:07
    单击第二个链接
  • 2:07 - 2:10
    酷 现在它显示一些 CheckBox 的图片
  • 2:10 - 2:12
    这是一些 XML
  • 2:12 - 2:13
    这看起来非常好
  • 2:13 - 2:16
    在 LinearLayout 里有两个 CheckBox
  • 2:16 - 2:19
    我只是复制第一个 CheckBox 的代码
  • 2:19 - 2:20
    然后粘贴它到我们的应用里
  • 2:22 - 2:26
    返回我们的应用 我将它粘贴到 Toppings 文本之后
  • 2:26 - 2:29
    不过在 QUANTITY 文本之前 所以这里正好
  • 2:29 - 2:33
    我想要修改 XML 因为它不是非常适合我们的使用情况
  • 2:33 - 2:37
    我将删除 id 和这里的 text
  • 2:37 - 2:40
    替换肉 因为咖啡店里不卖肉
  • 2:40 - 2:42
    我将设计 Whipped cream 的类型
  • 2:43 - 2:46
    顺便说一句 你之前看到的 @string/meat
  • 2:46 - 2:50
    是指在 strings.xml 文件里的一个资源字符串
  • 2:50 - 2:53
    之后我们会再谈谈这一点 但是现在
  • 2:53 - 2:56
    你可以在这里直接输入字符串
  • 2:56 - 2:59
    看 预览更新了 所以现在有一个叫 Whipped cream 的 CheckBox
  • 2:59 - 3:03
    CheckBox 给你一个框
  • 3:03 - 3:08
    和一些文本 所以你在这里你不必增加另外的文本视图
  • 3:08 - 3:11
    我们也不需要 onClick 这一行
  • 3:12 - 3:16
    对于这个编码任务我们所关心的是使 CheckBox 出现在这里
  • 3:16 - 3:20
    你能够到这个 XML 的其他方式是通过
  • 3:20 - 3:21
    检查常见的 Android 视图备忘单
  • 3:23 - 3:25
    这个备忘单列出了一些常见的 Android 视图
  • 3:25 - 3:27
    它有一些 XML 的例子
  • 3:28 - 3:33
    这是 CheckBox 视图 这是它是什么样的一个例子
  • 3:33 - 3:34
    和对应的 XML
  • 3:34 - 3:37
    你可以从这复制 XML 代码
  • 3:38 - 3:41
    返回 Android Studio 然后运行应用来看它是什么样的
  • 3:42 - 3:43
    它在这里
  • 3:43 - 3:44
    看起来非常好
  • 3:44 - 3:47
    我们有一个 Toppings 标题和一个 Whipped cream 复选框
  • 3:48 - 3:50
    我们也得到了这个酷的动画 当我们勾选这个框的时候
  • 3:51 - 3:55
    我看到的唯一的问题是没有间距
  • 3:55 - 3:58
    例如 QUANTITY 标题和 Whipped cream 复选框太近了
  • 3:58 - 4:01
    它们之间没有足够的空间
  • 4:02 - 4:04
    返回我们标注红线的地方
  • 4:04 - 4:09
    我们应该在这增加 24 dp 的空间 并改变字体大小为 16 sp
  • 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
    我要么添加底部内边距 要么添加底部外边距给这个 CheckBox
  • 4:58 - 5:02
    或添加顶部内边距 又或者添加顶部外边距给 QUANTITY 标题
  • 5:02 - 5:03
    无论是哪种工作方式都能奏效
  • 5:03 - 5:07
    我选择给 QUANTITY 标题添加 marginTop(顶部外边距)属性
  • 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
    Google 搜索网上信息的模式 然后将它应用到你的应用里
Title:
Adding a CheckBox - Solution
Description:

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

Chinese, Simplified subtitles

Revisions Compare revisions