Return to Video

Add the Reset Button

  • 0:00 - 0:04
    这里是我们计数器应用的图片
  • 0:04 - 0:06
    至少我们希望它是这个样子
  • 0:06 - 0:10
    现在 我会按照自己的想法 先从 XML 开始
  • 0:10 - 0:13
    先想一下现在 View 的情况
  • 0:13 - 0:18
    我们有所有 View 垂直排列
  • 0:18 - 0:19
    且是 LinearLayout
  • 0:19 - 0:23
    Team A和 Team B 分别有一个 LinearLayout
  • 0:23 - 0:27
    我们不能有两个根 View
  • 0:27 - 0:31
    它们被包含在一个水平的 LinearLayout里
  • 0:31 - 0:35
    也就是这两个紧邻的垂直 LinearLayout
  • 0:35 - 0:38
    现在我们想在这添加一个 RESET 按钮
  • 0:38 - 0:41
    你的大脑先不要考虑这些不同的 LinearLayout
  • 0:41 - 0:45
    我想让你思考水平 LinearLayout 里边的所有内容
  • 0:45 - 0:48
    这是一种单独的视图
  • 0:48 - 0:53
    现在你要尝试在这布置水平 LinearLayout
  • 0:53 - 0:54
    和这个 RESET 按钮
  • 0:54 - 0:57
    你要尝试布置两个View
  • 0:57 - 1:02
    一个是在顶部 另一个在屏幕的底部
  • 1:02 - 1:06
    所以问题是哪种 ViewGroup 允许你
  • 1:06 - 1:09
    将一个 View 放在顶部而另一个 View 放在屏幕的底部呢?
  • 1:09 - 1:13
    事实证明 LinearLayout 是一个非常好的选择
  • 1:13 - 1:17
    我可以将水平 LinearLayout 放在这 与父 View 的宽度一致
  • 1:17 - 1:20
    把高度设为 wrap_content
  • 1:21 - 1:24
    把 RESET 按钮放在这 居中
  • 1:24 - 1:26
    紧贴着底部
  • 1:26 - 1:29
    这样你就有了一个 LinearLayout
  • 1:29 - 1:33
    这个 LinearLayout 有一个按钮和子 LinearLayout
  • 1:33 - 1:36
    按钮是 RESET 按钮
  • 1:36 - 1:40
    LinearLayout 就是指我们这里的水平 LinearLayout
  • 1:40 - 1:44
    而且 这个水平 LinearLayout 有两个子布局
  • 1:44 - 1:47
    这些子布局也是 LinearLayout
  • 1:47 - 1:50
    你可以看到一个是 Team A 的线性布局
  • 1:50 - 1:52
    一个是Team B 的线性布局
  • 1:52 - 1:57
    Team A 的线性布局有两个 TextView 和 三个按钮
  • 1:57 - 2:00
    Team B 的布局也是一样
  • 2:00 - 2:03
    有五部分 两个 TextView 和三个按钮
  • 2:03 - 2:05
    你已经完成了布局这一部分
  • 2:05 - 2:09
    你需要添加这些 好了 我们开始
  • 2:09 - 2:13
    来到 XML 代码界面 我将要做的第一件事就是
  • 2:13 - 2:18
    实现根 LinearLayout 你可以在图中看到
  • 2:18 - 2:24
    这里应该是 RelativeLayout 我想做的是
  • 2:24 - 2:28
    剪切然后粘贴这两行 因为它们需要在根 View 里
  • 2:28 - 2:34
    我正在对它们进行剪切 然后粘贴在这 在我的根 View 里
  • 2:34 - 2:37
    关闭这里的 RelativeLayout
  • 2:37 - 2:44
    把结束标签移动到最尾端
  • 2:46 - 2:49
    现在我们基本有了图示的东西
  • 2:49 - 2:53
    好了 看一下有一些错误
  • 2:53 - 2:57
    这里 我没有设置宽度和高度 我们做这部分
  • 2:59 - 3:02
    我的 RelativeLayout 在屏幕的底部中间有一个按钮
  • 3:02 - 3:05
    为了实现它 相对布局需要填充整个屏幕
  • 3:05 - 3:07
    因此将宽度和高度都设置成 match_parents
  • 3:09 - 3:12
    现在我需要添加按钮
  • 3:12 - 3:18
    向下滚动 在这 也就是 LinearLayout 的结束位置
  • 3:18 - 3:23
    但是仍然在 RelativeLayout 里面 添加按钮
  • 3:23 - 3:27
    继续 按钮的宽和高设置成 wrap_content
  • 3:27 - 3:30
    因为它不是一个扩展到整个屏幕底端
  • 3:30 - 3:33
    或者整个屏幕的按钮
  • 3:34 - 3:37
    按钮的父 View 是 RelativeLayout
  • 3:37 - 3:40
    我们将按钮的文本设置为 Reset
  • 3:40 - 3:43
    我们看一下它是什么样子
  • 3:43 - 3:47
    RESET 按钮在这 却不是我们想要的位置
  • 3:47 - 3:52
    它的父 View 是填充整个屏幕的 RelativeLayout
  • 3:52 - 3:54
    我可以将它对准父 View
  • 3:54 - 3:57
    让它贴紧父 View 的底部
  • 3:57 - 4:01
    我想让它在父 View 的中央 并且水平
  • 4:01 - 4:04
    按钮已经在正确的位置了
  • 4:04 - 4:06
    将这里的代码全选
  • 4:06 - 4:10
    在 Mac 上点击 command + L
  • 4:10 - 4:14
    或者在 Windows 使用 Control+Alt+L 来重新排列代码
  • 4:14 - 4:16
    看起来更好了
  • 4:16 - 4:19
    我们回到 Java 代码
  • 4:19 - 4:23
    现在我们虽然有了代码 但是还没有实现功能
  • 4:23 - 4:26
    从给它添加方法开始
  • 4:26 - 4:32
    在 display 方法前添加方法 public void
  • 4:32 - 4:35
    我把方法叫做 resetScore
  • 4:35 - 4:38
    因为这就是我想让它做的
  • 4:38 - 4:43
    向上滚动 让它和其他方法匹配
  • 4:43 - 4:47
    View v 然后是大括号
  • 4:47 - 4:50
    先不要担心这里是什么
  • 4:50 - 4:53
    回到 XML 代码
  • 4:53 - 4:57
    我要做的第二部分是将按钮和 Java 代码绑定
  • 4:57 - 5:02
    通过给 resetScore 添加 onClick 属性
  • 5:02 - 5:06
    当我点击这个按钮的时候 代码会运行
  • 5:06 - 5:08
    而不是其他代码
  • 5:08 - 5:09
    我们需要添加些什么
  • 5:11 - 5:14
    我们回到伪代码的讨论
  • 5:14 - 5:17
    当我点击 RESET 按钮 会发生什么呢?
  • 5:17 - 5:21
    我想让这两个分数都显示0
  • 5:21 - 5:24
    就是说 Team A 和 Team B 的变量的值
  • 5:24 - 5:27
    都变成 0
  • 5:27 - 5:30
    记住 当我点击这些按钮中的任何一个时 会给
  • 5:30 - 5:32
    变量加2并且显示出来
  • 5:32 - 5:34
    所以 如果我不使变量归零的话
  • 5:34 - 5:36
    它就会显示一个错误的数字
  • 5:36 - 5:39
    所以我们需要的是
  • 5:39 - 5:43
    第一件事就是我想把 Team A 的分数设置为 0
  • 5:43 - 5:46
    然后对 Team B 做同样的事
  • 5:46 - 5:50
    现在两队的分数都为 0 但是没有什么显示出来
  • 5:50 - 5:55
    这就是为什么要有第三步 即显示已经设置为0的Team A 的分数
  • 5:56 - 6:00
    I鈥檓 going to display the score for
    说的更具体一点 就是在这显示
  • 6:00 - 6:04
    Team A 的分数 在这显示Team B 的分数
  • 6:04 - 6:08
    因为第一步和第二步 我确定它们已经被设置为0
  • 6:08 - 6:10
    它们会在这和这显示0
  • 6:10 - 6:14
    当我点击这些按钮中的任何一个来给 ScoreForTeamA 或
  • 6:14 - 6:18
    ScoreForTeamB 增加分数时 它会从0开始增加
  • 6:20 - 6:24
    在重置分数时 我要把伪代码写成代码
  • 6:24 - 6:29
    第一步 使用0和赋值符将A 的分数
  • 6:29 - 6:34
    设置为0
  • 6:34 - 6:36
    别忘了分号
  • 6:37 - 6:39
    对于 B 做相同的事情
  • 6:42 - 6:49
    之后 在 Team A 的区域显示 Team A 的分数
  • 6:49 - 6:53
    然后在 Team B 的区域显示 Team B 的分数
  • 6:55 - 6:57
    继续然后在这添加一个注释
  • 6:59 - 7:00
    这些看起来很合理
  • 7:00 - 7:04
    因为我的手机上运行的是先前没有改动的
  • 7:04 - 7:07
    所以我需要重新运行
  • 7:07 - 7:08
    我有一个 RESET 按钮
  • 7:08 - 7:09
    看一下它是否工作
  • 7:13 - 7:15
    很好 它重置为0了
  • 7:15 - 7:16
    我们再点多一些数字
  • 7:16 - 7:19
    确保所有的东西都正常运行
  • 7:24 - 7:28
    正常运行 真棒
  • 7:28 - 7:30
    现在有一个有点复杂的问题
  • 7:30 - 7:34
    我给你展示一下 如果你调换代码的位置会发生什么
  • 7:34 - 7:35
    做一些不同的东西
  • 7:36 - 7:39
    我调换这两个会怎样呢?
  • 7:39 - 7:41
    我们看一下发生了什么
  • 7:42 - 7:46
    我们看到它成功运行
  • 7:46 - 7:48
    我会添加一些分数
  • 7:49 - 7:53
    现在点击 RESET 按钮
  • 7:53 - 7:56
    它好像没有做任何事
  • 7:56 - 7:59
    再点击试试 有趣
  • 7:59 - 8:01
    看起来一点难度
  • 8:01 - 8:05
    在分数显示19之前 我点击了 RESET 按钮 但是没什么改变
  • 8:05 - 8:08
    但是当我点击 FREE THROW 时 它显示1
  • 8:10 - 8:12
    尝试另一边 如果我点击 +2 POINTS
  • 8:12 - 8:14
    它显示2
  • 8:14 - 8:18
    我们再看一看代码 为什么会这样
  • 8:18 - 8:21
    因为我调换了显示和设置分数的代码
  • 8:21 - 8:25
    看一下它会发生什么错误呢?
  • 8:25 - 8:30
    比如 Team A 有30分 Team B 有40分
  • 8:30 - 8:33
    当我执行 displayForTeamA 它会显示30
  • 8:33 - 8:37
    当我执行 displayForTeamB 它会显示40
  • 8:37 - 8:41
    在那之后 它才会设置它们的值为0
  • 8:41 - 8:46
    但是显示的数字却不会是0
  • 8:46 - 8:48
    但是实际上它们的变量已经是0
  • 8:48 - 8:53
    所以当我们点击 addThreeForTeamB 时 它会读取设置的分数变量
  • 8:53 - 9:00
    然后加3并显示出来
  • 9:00 - 9:06
    对我们来说 就像 Team B 原来是30分
  • 9:06 - 9:12
    但是点击 RESET 按钮后 就变成了3分 这是一种怪异的跳跃
  • 9:12 - 9:15
    现在不换回它们的位置而修复错误的一个方式是
  • 9:15 - 9:19
    在这里显示0分
  • 9:19 - 9:22
    你可以在你自己的设备上测试 但是它确实能够运行
  • 9:22 - 9:24
    只是有点麻烦
  • 9:25 - 9:29
    我喜欢展示这样的例子 因为它的代码
  • 9:29 - 9:31
    简洁 美观
  • 9:31 - 9:34
    在这个例子里 我认为我第一次写代码的方式
  • 9:34 - 9:36
    更好
  • 9:36 - 9:39
    但是你会看到在这种情况下 可以有两种不同的
  • 9:39 - 9:43
    方式来写代码 这两种方式在技术上都是正确的
  • 9:43 - 9:45
    因为没有唯一的答案
  • 9:45 - 9:49
    你不应该被正确的方式所局限
  • 9:49 - 9:53
    尝试用自己的方式实现 再看看别人是怎么做的
  • 9:53 - 9:58
    然后比较 谁的方式更高效 谁的代码更简洁
  • 9:58 - 10:01
    这种讨论能成为非常有帮助的学习经验
  • 10:01 - 10:04
    把代码调整回之前运行正确的状态
  • 10:04 - 10:05
    能正常运行
  • 10:05 - 10:10
    现在我的应用的功能已经有了 但是它还不够美观 我们修改一下
Cím:
Add the Reset Button
Leírás:

more » « less
Video Language:
English
Team:
Udacity
Projekt:
UD837 - Android for Beginners
Duration:
10:11

Chinese, Simplified subtitles

Felülvizsgálatok Compare revisions