Return to Video

Add the Reset Button

  • 0:00 - 0:04
    好了,这是我们的计分器应用的一张截图,至少
  • 0:04 - 0:06
    是我们希望它呈现出的样子
  • 0:06 - 0:10
    现在,我将要按我自己的思路,从可扩展标记语言(XML)开始着手
  • 0:10 - 0:13
    我们现在来看看视图布局情况
  • 0:13 - 0:18
    这就是我们拥有的全部视图,它们呈垂直状分布
  • 0:18 - 0:19
    线状布局
  • 0:19 - 0:23
    这里有一个B队的线状布局,还有一个A队的线状布局。
  • 0:23 - 0:27
    但是我不能同时拥有两个根视图,并且
  • 0:27 - 0:31
    它们被包含在一个刚好为水平位置的线状布局中,所以
  • 0:31 - 0:35
    这些是两个相邻的子线状布局
  • 0:35 - 0:38
    好了,现在我想要在下面加入一个重新计分键
  • 0:38 - 0:41
    为了防止这些不同布局让我的大脑崩溃,
  • 0:41 - 0:45
    我只需要在这一部分里解决问题
  • 0:45 - 0:48
    设置出一目了然的水平线状布局
  • 0:48 - 0:53
    现在,我正努力在这里,设置出水平线状布局
  • 0:53 - 0:54
    还有这个重新计分键
  • 0:54 - 0:57
    我在努力设置出两个视图
  • 0:57 - 1:02
    一个视图在顶部,另一个视图在屏幕的底部
  • 1:02 - 1:06
    于是现在问题来了,哪个视图组能够让我
  • 1:06 - 1:09
    往上看到顶部,往下看到屏幕底部?
  • 1:09 - 1:13
    事实证明相对布局较能满足这一条件
  • 1:13 - 1:17
    我可以在这里设置我的水平线状布局,宽度和父布局(parent match)
  • 1:17 - 1:20
    相匹配,并且高度自动适应视图大小(wrap content)
  • 1:21 - 1:24
    我可以把我的重新计分键设置在这里,位于
  • 1:24 - 1:26
    两组底部正中
  • 1:26 - 1:29
    好了,现在你有了一个相对布局
  • 1:29 - 1:33
    这个相对布局有一个底部子布局和线状子布局
  • 1:33 - 1:36
    底部子布局就是重新计分键
  • 1:36 - 1:40
    线状布局就是这里的这个水平线状布局
  • 1:40 - 1:44
    此外,这个水平线状布局有两个子布局
  • 1:44 - 1:47
    这两个子布局也是线状的
  • 1:47 - 1:50
    它们分别是A队的线状布局和
  • 1:50 - 1:52
    B队的线状布局,你可以在这里看到它
  • 1:52 - 1:57
    A队的线状布局有两个视图和三个按键
  • 1:57 - 2:00
    A队的线状布局也有两个视图和三个按键
  • 2:00 - 2:03
    五个子布局,两个文本视图和三个按键
  • 2:03 - 2:05
    我已经设置出的这个布局的比例
  • 2:05 - 2:09
    我只需要添加这个,好的,现在就动手
  • 2:09 - 2:13
    好了,我现在在我的XML代码内部了,要做的第一件事就是
  • 2:13 - 2:18
    设置我在图表里展示的相对根布局
  • 2:18 - 2:24
    所以我现在就要编写相对布局,并且我需要
  • 2:24 - 2:28
    剪切并粘贴这两行代码,因为它们必须处于根布局内部
  • 2:28 - 2:34
    所以我就把它们剪切并粘贴到这里,我的根布局内部
  • 2:34 - 2:37
    好了,现在我要关闭我的相对布局
  • 2:37 - 2:44
    我现在要把这个结束标签一直移动到底部
  • 2:46 - 2:49
    好了,我现在已经设置好的,本质上就是图表的这一部分
  • 2:49 - 2:53
    好吧,看起来我也犯了点错误
  • 2:53 - 2:57
    让我们来看看,没错,我还没有定义高度或宽度,所以现在就定义吧
  • 2:59 - 3:02
    现在在我的相对布局里,屏幕正中间的底部已经有了重新计分键
  • 3:02 - 3:05
    为了达到这个目的,我要写的代码也许需要把屏幕全占满
  • 3:05 - 3:07
    所以我需要在高度和宽度上都匹配父布局
  • 3:09 - 3:12
    好了,现在我只需要添加重新计分键
  • 3:12 - 3:18
    我现在往下滚动,到这里,停留在线状布局结束的地方
  • 3:18 - 3:23
    但我仍然处于相对布局内部,并且我要添加一个按键
  • 3:23 - 3:27
    我开始着手设置视图,让它自动适应视图大小(wrap content)
  • 3:27 - 3:30
    因为它不会自己扩展开来,占据屏幕的整个底部
  • 3:30 - 3:33
    也不会自己扩展开来,占据整个屏幕
  • 3:34 - 3:37
    现在,按键的父布局是相对布局
  • 3:37 - 3:40
    我们现在就设置按键的代码,让它成为重新计分按键
  • 3:40 - 3:43
    让我们来看看结果怎么样
  • 3:43 - 3:47
    好吧,我的重新计分键在上面这个地方,而不是我想要它呆的地方
  • 3:47 - 3:52
    但它的父布局是相对布局,能够占据整个屏幕
  • 3:52 - 3:54
    所以我可以把它设置到父布局中
  • 3:54 - 3:57
    我想要把它设置到父布局底部,并且
  • 3:57 - 4:01
    让它呆在父布局中心的水平方向就是了
  • 4:01 - 4:04
    不错,我的按键现在看起来位置总算正确了
  • 4:04 - 4:06
    我在这里选中所有代码
  • 4:06 - 4:10
    并且我使用Mac的使用所选内容查找(command option 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
    我将在显示方式正上方设置它,在公共类不返回任何参数(public void)这里
  • 4:32 - 4:35
    我把这个方法叫做重新计分法
  • 4:35 - 4:38
    因为这就是我的目的
  • 4:38 - 4:43
    向上翻滚,通过通过v视图,以及大括号
  • 4:43 - 4:47
    我让它与其他方法相匹配
  • 4:47 - 4:50
    现在我暂时不用操心这里怎样设置
  • 4:50 - 4:53
    我返回到我的XML代码
  • 4:53 - 4:57
    我开始设置钩子函数的第二部分,目的是把按键勾取到到Java代码
  • 4:57 - 5:02
    方法是为重新计分键增加一键属性
  • 5:02 - 5:06
    好了,现在我点击了这个按键,代码就会运行,然而
  • 5:06 - 5:08
    还没有编写代码
  • 5:08 - 5:09
    让我们来想想我需要添加什么
  • 5:11 - 5:14
    好了,让我们回过头来讨论伪代码吧
  • 5:14 - 5:17
    当我点击重新计分按键的时候,我期望发生什么?
  • 5:17 - 5:21
    唔,我期望两边积分都清零。
  • 5:21 - 5:24
    此外,我期望A队分数的变量
  • 5:24 - 5:27
    和B队分数的变量都清零
  • 5:27 - 5:30
    记住,当我点击这些按键中任何一个的时候,我都添加这两项
  • 5:30 - 5:32
    接下来显示变量
  • 5:32 - 5:34
    所以,如果我不将变量清零
  • 5:34 - 5:36
    结果就会显示出一个不正确的数字
  • 5:36 - 5:39
    所以我就需要伪代码这个诀窍了
  • 5:39 - 5:43
    我需要做的第一件事就是把A队分数清零
  • 5:43 - 5:46
    接下来也把B队分数清零
  • 5:46 - 5:50
    现在两队分数都为零了,但什么都没有显示出来,这就是为什么
  • 5:50 - 5:55
    在步骤3中,我将显示出已经被清零的A队的分数
  • 5:56 - 6:00
    详细点来说,我将显示出A队的分数
  • 6:00 - 6:04
    接下来我在这里显示出B队的分数
  • 6:04 - 6:08
    因为在步骤1和2中,我已经确保它们都被清零了
  • 6:08 - 6:10
    于是在这里和这里,显示出的都是零
  • 6:10 - 6:14
    当我点击这些按键中的任何一个来更新A队分数
  • 6:14 - 6:18
    或者B队分数时,的确会更新,但更新总是以零分开始
  • 6:20 - 6:24
    所以,为了重新计分,我需要将我的伪代码设置为代码、代码
  • 6:24 - 6:29
    我要做的第一件事就是记下A队分数,并且将它清零
  • 6:29 - 6:34
    方法是使用赋值算符和零值
  • 6:34 - 6:36
    噢,别忘了分号
  • 6:37 - 6:39
    我为B队分数做同样的处理
  • 6:42 - 6:49
    接下来,我将在A队的位置显示出A队的分数
  • 6:49 - 6:53
    然后在B队的位置显示出B队的分数
  • 6:55 - 6:57
    并且添加一个注释
  • 6:59 - 7:00
    好了,看起来都很像样
  • 7:00 - 7:04
    我已经很久没有在我手机上运行过什么了,所以
  • 7:04 - 7:07
    我现在点击运行键,不错,很棒
  • 7:07 - 7:08
    我已经有了重新计分键了
  • 7:08 - 7:09
    我们来看看有没有效果
  • 7:13 - 7:15
    挺棒的,清零了
  • 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
    验明真相的时刻到来了,重新计分!
  • 7:53 - 7:56
    唔,好像啥事都没发生
  • 7:56 - 7:59
    我们再来试试点击,唔,有意思
  • 7:59 - 8:01
    有点难理解,
  • 8:01 - 8:05
    之前的19分在我点击重新设置之后仍然没变
  • 8:05 - 8:08
    但在我点击罚球之后,显示出了一
  • 8:10 - 8:12
    让我们试试另外一边吧,我点击多两分
  • 8:12 - 8:14
    好了,显示出两分
  • 8:14 - 8:18
    我们来看看代码,找出这种效果的原因
  • 8:18 - 8:21
    所以我调转顺序,显示并设置分数
  • 8:21 - 8:25
    为了弄清哪种错误造成了这个后果
  • 8:25 - 8:30
    比如我们设置A队30分,B队40分
  • 8:30 - 8:33
    当我点击“显示A队分数”时,显示的是30分
  • 8:33 - 8:37
    当我点击“显示B队分数”时,显示的是40分
  • 8:37 - 8:41
    只有在这之后,才能把这些数值清零
  • 8:41 - 8:46
    但因为首先显示出了分数,所以一开始不会显示零值
  • 8:46 - 8:48
    但变量将为零
  • 8:48 - 8:53
    所以当我点击,比如说,“为B队添加3分”时
  • 8:53 - 9:00
    首先计算我设定好的零值,然后再添加三,最后显示三
  • 9:00 - 9:06
    所以在我们看来,就好像按了重新计分键后
  • 9:06 - 9:12
    B队从30分一下跳到了3分,感觉怪怪的
  • 9:12 - 9:15
    现在,除了把它调整到应有的形式之外,解决方法
  • 9:15 - 9:19
    就是我在这里设置显示零
  • 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