Return to Video

4 : The Stages SOL

  • 0:01 - 0:05
    好的 在讲 XML 之前 我先回答一下这些问题
  • 0:05 - 0:07
    第一 选择 View
  • 0:07 - 0:09
    我将我看到的 View 用方框圈起来
  • 0:10 - 0:11
    这里有五个不同的 View
  • 0:11 - 0:14
    不包含 ViewGroup 严格地说 它也是一个 View
  • 0:14 - 0:18
    但不管怎么说 这五个 View 分别是两个 TextView
  • 0:18 - 0:19
    和后面的三个 Button
  • 0:19 - 0:24
    没有 ImageView 所以我说没有 ImageView
  • 0:24 - 0:28
    你也许会好奇为什么我断定这里有两个不同的 TextView
  • 0:28 - 0:32
    因为最后 Team A 的样式与
  • 0:32 - 0:34
    得分的样式看起来非常不同
  • 0:34 - 0:38
    所以我断定这是两个独立的 TextView
  • 0:38 - 0:40
    第二步 定位这些View
  • 0:40 - 0:43
    在这一步 我将选择 我们需要使用的 ViewGroup
  • 0:43 - 0:47
    我记得有 LinearLayout 和 Relative Layouts
  • 0:47 - 0:49
    现在这些 View 是垂直排列的
  • 0:49 - 0:53
    现在我清楚我想要的是 LinearLayout
  • 0:54 - 0:57
    第三步 调整 View 的外观
  • 0:57 - 1:00
    在制作 XML 的时候我将解决这个问题
  • 1:00 - 1:03
    现在我们来讲 XML
  • 1:03 - 1:05
    看着这个文本标签
  • 1:05 - 1:08
    我要做的第一件事是
  • 1:08 - 1:10
    删除我不需要的东西
  • 1:10 - 1:12
    我将删除这个 TextView
  • 1:13 - 1:17
    所有的这些 paddingLeft、paddingRight、paddingTop 和
  • 1:17 - 1:20
    paddingBottom 我也将删掉
  • 1:20 - 1:23
    小心 不要删掉不该删的东西
  • 1:23 - 1:25
    好的
  • 1:25 - 1:28
    我们说过我们要用的 ViewGroup 不是 RelativeLayout
  • 1:28 - 1:30
    而是 LinearLayout 的 现在我将改变它
  • 1:31 - 1:35
    在这个 LinearLayout 中 我要添加两个 TextView
  • 1:35 - 1:36
    其后再添加三个按钮
  • 1:36 - 1:38
    现在我来做这些事情
  • 1:38 - 1:40
    目前 我不会具体的设置 TextView 的宽度
  • 1:40 - 1:43
    和高度
  • 1:43 - 1:45
    我仅仅把它设置为 wrap_content
  • 1:45 - 1:48
    这将使得文本填充整个 TextView
  • 1:49 - 1:52
    设置 TextView 的文本信息
  • 1:52 - 1:55
    第一个 TextView 显示 Team A
  • 1:56 - 1:59
    让我们预览一下它的样子
  • 1:59 - 2:02
    我可以看见这有一个小小的 TextView 显示着 Team A
  • 2:02 - 2:04
    让我们多创建几个吧
  • 2:04 - 2:07
    在它下面要显示 Score 它也是一个 TextView
  • 2:07 - 2:10
    现在我要输入 Text
  • 2:10 - 2:12
    我看见了 TextView 点击 Enter 键
  • 2:12 - 2:16
    我把它也设置为 wrap_content
  • 2:16 - 2:18
    我要添加文本信息了
  • 2:18 - 2:22
    以为分数常常从零开始 所以我把初试值设为零
  • 2:22 - 2:23
    好的
  • 2:23 - 2:23
    该创建按钮了
  • 2:23 - 2:26
    现在我要输入 Button
  • 2:26 - 2:28
    把它们也设置为 wrap_content
  • 2:28 - 2:32
    第一个 Button 显示 +3 Points
  • 2:32 - 2:35
    复制这段代码
  • 2:35 - 2:40
    粘贴两次 我们可以得到两个按钮
  • 2:40 - 2:43
    一个按钮显示 +2 Points
  • 2:43 - 2:45
    另一个按钮显示 Free Throw(罚球)
  • 2:45 - 2:47
    我们看看它在 Preview 中是什么样子的
  • 2:48 - 2:51
    现在有三个按钮了
  • 2:51 - 2:54
    我可以看见 Team A 和 0
  • 2:54 - 2:56
    所有 View 都有了
  • 2:56 - 2:59
    但是它们看起来还不是最后我们想要的样子
  • 2:59 - 3:01
    记得它们是垂直排列的
  • 3:01 - 3:03
    所以我要改变布局的方向
  • 3:03 - 3:05
    现在把它改过来
  • 3:05 - 3:10
    我需要输入 orientation 把它的值设置为 vertical
  • 3:10 - 3:12
    现在看起来好多了
  • 3:12 - 3:17
    这些按钮应该展开来填充整个窗口
  • 3:17 - 3:20
    所以我不想要这些按钮是 wrap_content
  • 3:20 - 3:23
    而是换成 match_parent
  • 3:23 - 3:24
    我要修改它
  • 3:26 - 3:29
    现在按钮的宽度都是 match_parent 了
  • 3:29 - 3:30
    预览一下
  • 3:31 - 3:33
    看起来更好了 它们都展开了
  • 3:33 - 3:34
    好的
  • 3:34 - 3:39
    我的文本还挤在这个角落里
  • 3:39 - 3:44
    为了解决这个问题 我要使用 gravity
  • 3:44 - 3:46
    在 Google Drawing 里
  • 3:46 - 3:49
    画一个文本框
  • 3:50 - 3:52
    这像是一个 View 的边界
  • 3:52 - 3:54
    输入 Team A
  • 3:54 - 3:58
    默认的情况下 它是在左上角
  • 3:58 - 4:01
    这与 TextView 相似 当在 TextView 中输入文本信息的时候
  • 4:01 - 4:03
    默认也是在左上角
  • 4:03 - 4:09
    在 Google Drawing 选中这些文本
  • 4:09 - 4:14
    并使用这些与属性等价的线条
  • 4:14 - 4:19
    来水平集中和垂直居中文本
  • 4:19 - 4:20
    非常好
  • 4:20 - 4:24
    选取 View 的内容并且在 View 边界内移动它
  • 4:24 - 4:27
    这就是布局 gravity 要做的事情
  • 4:27 - 4:30
    如果你觉得这很像 RelativeLayout 中的各种对齐方式
  • 4:30 - 4:34
    没错 你可以用 gravity
  • 4:34 - 4:37
    属性实现 这就是它的强大之处
  • 4:37 - 4:39
    看看代码
  • 4:40 - 4:44
    选中第一个 TextView 输入 gravity
  • 4:45 - 4:47
    好的 出现了两个选项
  • 4:47 - 4:49
    Layout、_gravity 和 gravity
  • 4:49 - 4:51
    我刚刚跟你说的是 gravity 属性
  • 4:51 - 4:53
    所以我将用这一个
  • 4:53 - 4:56
    这有很多选项
  • 4:56 - 4:58
    我想要水平居中
  • 4:58 - 5:00
    所以我选择这个选项
  • 5:00 - 5:03
    去 Preview 里看看发生了什么
  • 5:04 - 5:08
    好像没发生什么 这是有原因的
  • 5:09 - 5:13
    你可能看不清 所以我点击这里放大
  • 5:15 - 5:16
    好的
  • 5:16 - 5:21
    这里是 Team A 你可以隐约看见 View 的边界
  • 5:21 - 5:25
    如果我告诉你它已经在 View 中居中了
  • 5:25 - 5:27
    你也无话可说
  • 5:27 - 5:32
    在 View 中它确实是居中了 只是 View 比较小而已
  • 5:32 - 5:33
    回到 Google Drawing
  • 5:33 - 5:39
    就像我把矩形框的大小缩小到文本的大小一样
  • 5:39 - 5:40
    它是居中了 但是
  • 5:40 - 5:45
    它看起来与被挤到左边没什么不同
  • 5:45 - 5:47
    如果我想让它在手机上居中
  • 5:47 - 5:50
    我需要将 View 扩展成手机的宽度
  • 5:50 - 5:52
    我们需要改变它的宽度
  • 5:54 - 5:56
    回到这里 关闭 Preview
  • 5:57 - 5:59
    找到 width
  • 6:00 - 6:05
    把 wrap_content 换成 match_parent
  • 6:05 - 6:06
    再预览一下
  • 6:07 - 6:08
    缩小
  • 6:09 - 6:11
    看起来好多了
  • 6:11 - 6:12
    它已经居中了
  • 6:12 - 6:14
    我们对分数 View 做同样的修改
  • 6:16 - 6:19
    我将在这添加 gravity
  • 6:19 - 6:20
    在所有的 Layout_gravity 中的 gravity
  • 6:20 - 6:26
    center_horizontal 把宽度改为 match_parent
  • 6:27 - 6:29
    让我们再检查一遍
  • 6:29 - 6:31
    所有的 View 都居中了
  • 6:31 - 6:32
    看起来非常好
  • 6:32 - 6:34
    它们都挤在一起
  • 6:34 - 6:37
    View 元素之间没有空隙
  • 6:37 - 6:41
    我将把每一个 TextView 的内边距设置为4
  • 6:41 - 6:46
    输入 padding 把它的值设置为 4dp
  • 6:47 - 6:48
    还记得 dp 吗?
  • 6:48 - 6:52
    我用的是 padding 不是 padding bottom 或者其它的属性
  • 6:52 - 6:54
    这将为整个 TextView 的周围提供 4dp 的宽度
  • 6:54 - 6:57
    让我们预览一下它的样子
  • 6:58 - 7:01
    这里有更多的空白区域了
  • 7:01 - 7:04
    对分数 TextView 做同样的修改
  • 7:08 - 7:11
    对按钮也做同样的修改
  • 7:16 - 7:19
    看起来并没有做太多的修改
  • 7:19 - 7:24
    如果我把这里的值改大一些 比如改成8 会怎么样?
  • 7:24 - 7:26
    如果改成20呢?
  • 7:26 - 7:30
    好有趣 看起来只有按钮变大了
  • 7:30 - 7:32
    我不想要按钮变大
  • 7:32 - 7:34
    我想让按钮周围的空隙变大
  • 7:34 - 7:38
    实际上 用 layout_margin 就可以实现
  • 7:38 - 7:41
    记住 padding 是在 View 内部加内边距
  • 7:41 - 7:43
    然而 margin 是在 View 的外部加空隙
  • 7:44 - 7:45
    所以我们把这里改成 layout_margin
  • 7:45 - 7:47
    设置它的值为 8dp
  • 7:47 - 7:49
    看起来好多了
  • 7:49 - 7:53
    现在这两个View的周围有空隙了
  • 7:53 - 7:55
    我们对其他的按钮也做修改
  • 7:56 - 8:00
    是 margin 而不是 padding 或者 layout_margin
  • 8:00 - 8:01
    看起来非常好
  • 8:01 - 8:04
    如果你选择跟我不一样的属性
  • 8:04 - 8:08
    比如你把 padding 的值设置为 5dp 而不是 4dp 也是可以的
  • 8:08 - 8:12
    记住 在这一步我只是为了让它可读性更强
  • 8:12 - 8:15
    下一步 我们需要考虑字体的大小和漂亮的颜色
  • 8:17 - 8:18
    好的
  • 8:18 - 8:19
    做的很好
  • 8:19 - 8:20
    你已经完成了这一步
タイトル:
4 : The Stages SOL
概説:

more » « less
Video Language:
English
Team:
Udacity
プロジェクト:
UD837 - Android for Beginners
Duration:
08:22

Chinese, Simplified subtitles

改訂 Compare revisions