WEBVTT

00:00:00.180 --> 00:00:04.710
为了建立这个布局 我们打开 activity_main.xml 文件

00:00:04.710 --> 00:00:07.670
我们用垂直线性布局把这些视图

00:00:07.670 --> 00:00:09.340
垂直的放置

00:00:09.340 --> 00:00:12.870
所以第一步 我需要把 RelativeLayout 改成 LinearLayout

00:00:12.870 --> 00:00:17.110
立刻就出现了一个错误提示 即起始标记与

00:00:17.110 --> 00:00:20.840
结束标记不匹配 所以我把这个复制粘贴到这里来

00:00:20.840 --> 00:00:22.100
现在 标记就匹配了

00:00:22.100 --> 00:00:23.930
下一步 我可以加入视图

00:00:23.930 --> 00:00:25.720
首先 需要一个 QUANTITY TextView

00:00:25.720 --> 00:00:29.880
所以 我用这里的这个 TextView 并且把它的 text 改为 “Quantity”

00:00:29.880 --> 00:00:31.960
接下来 我需要一个写着 0 的 TextView

00:00:31.960 --> 00:00:34.460
我把上面第一个 TextView 复制到下面

00:00:34.460 --> 00:00:38.430
根据这个屏幕截图 我把它的 text 改为 “0”

00:00:38.430 --> 00:00:41.500
这个线性布局中的最后一个子视图是一个按钮

00:00:41.500 --> 00:00:45.020
我们还没有在布局中添加按钮 你可以在 Google 中搜索如何添加按钮

00:00:45.020 --> 00:00:48.160
如果你打开了一个浏览器 你可以搜索 “button android”

00:00:48.160 --> 00:00:51.500
第一个链接看起来不错 它是 developer.android.com 网站的链接

00:00:52.570 --> 00:00:56.700
这是关于 Button 的文档 我们忽略大部分的内容

00:00:56.700 --> 00:00:59.250
将滑动条向下拉 来看类的概述

00:00:59.250 --> 00:01:03.000
这里提到了一些我们还没有学过的 Java 代码

00:01:03.000 --> 00:01:06.300
但是在下面有关于 Button 的 XML 代码

00:01:06.300 --> 00:01:09.280
我们复制它 看看它的效果

00:01:09.280 --> 00:01:12.420
在我们的布局中 我要在这两个 TextView 下面添加一个 Button

00:01:12.420 --> 00:01:16.030
我们把代码粘贴在这

00:01:16.030 --> 00:01:18.900
把 “@string/self_destruct”

00:01:18.900 --> 00:01:22.280
改成 “ORDER”

00:01:22.280 --> 00:01:24.900
最后一行可以删掉 因为我们不需要

00:01:24.900 --> 00:01:28.580
现在 我们就有了一个 “QUANTITY” TextView 一个 “0” TextView

00:01:28.580 --> 00:01:29.270
和一个 “ORDER” Button

00:01:30.320 --> 00:01:32.220
运行我们的应用 看看它是什么样子的

00:01:32.220 --> 00:01:33.540
通过点击绿色的运行按钮

00:01:33.540 --> 00:01:36.290
从下面可以看到它还在编译

00:01:37.690 --> 00:01:38.660
这不是我们想要的

00:01:38.660 --> 00:01:43.470
看起来水平布局代替了垂直布局

00:01:43.470 --> 00:01:47.586
让我们确定一下是否添加了orientation 属性

00:01:47.586 --> 00:01:52.020
把这里改成 android;orientation="vertical"

00:01:52.020 --> 00:01:53.570
问题解决了

00:01:53.570 --> 00:01:54.490
再点击运行

00:01:55.520 --> 00:01:57.010
现在好啦

00:01:57.010 --> 00:02:00.270
这三个子视图垂直排列在这里

00:02:00.270 --> 00:02:01.810
现在 我们要设置样式

00:02:01.810 --> 00:02:04.160
使得它们看起来与屏幕截图更加相似

00:02:05.280 --> 00:02:08.460
从这张截图我们可以看到 QUANTITY 的文本是大写的

00:02:09.600 --> 00:02:13.950
我们在课程一中学过一个属性 android:textAllCaps

00:02:13.950 --> 00:02:16.230
在自动填充提示里有这个属性

00:02:16.230 --> 00:02:18.310
如果提示框里有这个属性 你可以直接点回车键

00:02:18.310 --> 00:02:20.390
它就自动地添加到这里了

00:02:21.400 --> 00:02:24.970
我们把它的值设置为 true 因为我们希望显示大写字母

00:02:24.970 --> 00:02:28.580
我们之所以用这个属性

00:02:28.580 --> 00:02:32.620
是因为 如果我们想改变用户界面使得 QUANTITY 为小写

00:02:32.620 --> 00:02:35.650
我们只需要删除这个属性就够了

00:02:35.650 --> 00:02:38.020
而不用改变文本

00:02:38.020 --> 00:02:41.840
接下来 把 “0” 设置为 16sp 大小

00:02:41.840 --> 00:02:45.970
我们添加一个 textSize 属性 提示框里已经显示出来了

00:02:45.970 --> 00:02:50.000
点击回车即可 把它的值设置为 16sp

00:02:50.000 --> 00:02:52.450
我想把它设置成黑色字体

00:02:52.450 --> 00:02:54.700
我将使用 Android 系统中的黑色

00:02:54.700 --> 00:02:57.380
通过这样来引用它

00:02:57.380 --> 00:03:00.558
这两个 TextView 已经设置好了

00:03:00.558 --> 00:03:05.011
Button 这样就很好 它的文本都是自动大写的

00:03:05.011 --> 00:03:08.820
它的 height 和 width 的值都是 wrap_content

00:03:08.820 --> 00:03:11.898
我们需要解决垂直的间隔问题

00:03:11.898 --> 00:03:15.810
我们希望 “QUANTITY” 和 “0” 之间有 16dp 的

00:03:15.810 --> 00:03:17.190
内间距 或者外边距

00:03:17.190 --> 00:03:20.027
我们也希望 “0” 和 “ORDER” 按钮之间

00:03:20.027 --> 00:03:21.430
有 16dp 的内边距

00:03:21.430 --> 00:03:23.960
你可以通过很多方法实现它

00:03:23.960 --> 00:03:27.650
我是通过给 Button 添加 Layout_marginTop 来实现的

00:03:31.410 --> 00:03:34.490
给 QUANTITY TextView 添加 一个 Layout_marginBottom 属性

00:03:37.810 --> 00:03:40.810
你可以尝试其他的方法 只要效果一样就行了

00:03:40.810 --> 00:03:44.000
我之所以用 内边距和外边距 是因为我知道

00:03:44.000 --> 00:03:47.040
中间的区域将会改变

00:03:47.040 --> 00:03:49.670
我们把它变成一个数量选择器

00:03:49.670 --> 00:03:54.620
这个选择器包含增加和减少按钮 并且希望 quantity 的标题

00:03:54.620 --> 00:03:56.830
与选择器之间有 16dp 的间隔

00:03:56.830 --> 00:03:57.560
对 Button 也是一样

00:03:58.610 --> 00:04:01.280
在设备上重新运行它

00:04:01.280 --> 00:04:03.350
效果正是我们想要的

00:04:03.350 --> 00:04:07.150
QUANTITY TextView 中的文本都是大写的 “0” TextView 中的文本都是

00:04:07.150 --> 00:04:11.710
黑色字体 并且字体大小都是 16dp 而且 ORDER Button 也在这

00:04:11.710 --> 00:04:14.540
而且这些视图中的间隔都是 16dp

00:04:15.760 --> 00:04:18.240
干得好 我差点忘了

00:04:18.240 --> 00:04:21.560
还有一个问题是 当点击按钮之后会发生什么

00:04:21.560 --> 00:04:25.950
目前什么也没发生

00:04:25.950 --> 00:04:27.660
看看接下来会发生什么