这张图，会让大家想到什么？

不过这并不是真实的零钱金额，图也不是从微信官方界面截出来的，而是笔者通过AIDE写出来的。

从这节开始，为大家讲述安卓的一些常用控件，这节课程涉及到4个控件。

关于控件

一个界面是由多个控件组合而成的，控件对于布局而言，就相当于盖房子的砖瓦。界面中有文字，图片，视频，这些内容的载体，就是各种不同的控件。

比如文字，要用TextView来承载，图片用ImageView，视频VideoView等。

控件需要依赖于布局而存在，布局决定了控件在界面中的排序方式，比如文字在图片左边，标题在内容上方之类。

每个控件有各自的宽高，这两个属性决定了控件在屏幕中展示的大小面积。宽高是每个控件必须的属性。

线性布局LinearLayout

本节课我们大量运用了线性布局LinearLayout，这个布局也是开发中很常用的。控件在线性布局中，向一个方向顺序排列，从上到下，从左到右，就像是一条线。

在布局文件中，声明一个线性布局，很简单。只要用两个尖括号，将线性布局的单词放进去即可。就像这样

，在xml中，一对尖括号称之为一个标签。安卓布局是用xml文件来定义的，根据xml的规定，标签必须要闭合，我们要用/来声明一个标签何时闭合。

像上面这样，才是正确的控件调用方式。也可以简写成，这种方式与上面方式的区别在于，上面的方式，可以在两个LinearLayout之间加入其他内容。而这种方式就不行了。

之前说了，每个控件都要包含宽高属性，那么，上面说的声明方式在xml语法中是合法的，但要作为安卓布局文件仍然是不合格的，还需要为它指定宽高。

layout_width，指定了布局的宽度，layout_height定义布局的高度。双引号里的值，代表了宽度与高度的值。wrap_content，为包裹内容，就是布局会根据自己的子控件来动态改变宽高。match_parent则是填充父控件，控件的宽高会与父控件的宽高保持一致。

下面，是aide创建工程后，自动创建出来的布局文件。

在布局文件最外层的是一个线性布局LinearLayout，宽高都是match_parent，由于该LinearLayout并没有父控件，所以它的父控件就可以看作是设备的显示屏。它的宽高为match_parent，也就是说它的宽度与高度，和屏幕的宽高一致。

在Linearlayout中，除了宽高，还有一个xmlns属性，这个属性是作为安卓布局文件所必须的命名空间。为什么用android:layout_width就可以指定空间的宽度？就是因为命名空间的约束。每个android开头的属性，都是受命名空间的约束的。

另外一个属性，是gravity，这个属性可以理解为对控件对齐方式的定义，center是居中对齐。这个属性的取值有left,top,right,bottom,center,分别对应左上右下中。

在LinearLayout中，声明了一个TextView控件，值得一提的是，TextView只是一个控件，不是布局，它是不能作为父控件，也就不会包含子控件，所以是以的方式声明出来的。

然后TextView有一个text属性，这个属性定义了它所显示的文字。在代码中，它的值是@string/hello_world，这种方式，说明了，在项目的values文件夹下，有一个strings文件，其中有个string的标签name为hello_world

strings.xml文件定义了项目中使用的一些文本资源，可以通过@string/{name}的方式引用其中定义的值。

TextView的text属性还可以直接填写要显示的文本，就像这样

android:text="你好"

最终，布局的显示效果就像这样

编写自己的布局

回到文章开始的那张截图，我们来分析一下它的构成。

首先，整个界面的根布局是一个垂直的线性布局。

然后，线性布局中，又定义了许多个水平布局。

在这些水平布局中加入了显示图标的ImageView，显示文字的TextView。

打开布局文件，将原本的内容加以修改。

我们删除原先的TextView，删除了LinearLayout的gravity属性，增加了orientation属性，

orientation属性就是用来声明线性布局方向的，其值有二horizontal和vertical代表水平和垂直，不声明则默认水平方式排列，因为我们要垂直排列，所以要加以声明。

声明顶部控件

顶部控件是一个水平排列子控件的线性布局，看了上面的描述，大家应该可以自己写出来了。很简单，改一下orientation属性的值为horizontal就可以了。

然后是左边返回按钮的声明，我们用一个ImageView来展示，代码如下。

在这里，对于宽高属性的值，我们并没有用match_parent和wrap_content，因为match_parent显然不合适，它会将返回图标拉伸至整个屏幕，使其他控件无法显示。wrap_content也不适合。返回图标是一个图片，图片本身是有大小的，假如这张图片很大，那么也会占满整个屏幕，使其他控件无法显示。所以我们定义了它的固定宽高，为15dp。

关于dp

dp是安卓特有的一种单位，类似的有定义文字大小的sp单位。

众所周知，安卓设备品牌众多，型号繁杂，不同品牌不同型号的设备，屏幕分辨率是不同的。分辨率是指屏幕宽度与高度所能显示的像素点，比如320*480就表示屏幕宽度为320个像素点，高度为480个像素点。如果我们以像素作为单位来声明控件的宽高比如160，那么在320*480的屏幕上，控件已经占用的屏幕1/2的宽度，但在1080*1920的设备上，160像素才仅仅占了1/6.75，这显然是不合理的。所以安卓推出了dp这个单位，dp会根据设备的dpi来计算控件实际的宽高，使同一个控件在不同分辨率的屏幕上，比例总是差不多的。

关于drawable图片资源

ImageView还有一个src属性，这个属性定义了该图片控件显示的是哪张图片。drawable并不是指单独的drawable目录，而是多个drawable目录的集合。

为什么要有这么多的drawable目录呢？还是由于屏幕分辨率的问题。假如一张图片，宽高为60像素，那么在320*480的屏幕上，显示出来很清晰，但是保持相同比例显示在更高分辨率的设备上，就会模糊，失真，就像我们放大一张照片来看一样。所以安卓又定了这么多drawable文件夹，用来放置不同分辨率的相同内容的图片，以适应屏幕的变化，这里不再赘述，需要了解详细内容，可自行搜索。在这里我们擦图片资源都放在drawable-hdpi目录下。

可以看到，笔者已准备好了钱包页面中所使用的各个图标。

ImageView的src属性：drawable/back,就是指使用drawable目录下的back图片，这里并不需要声明图片的格式，只需填写图片名称即可。

然后是"钱包"文字的显示

textSize是指文字的大小，textStyle是文字的风格，这里使用了bold属性来将文字加粗，textcolor是文字的颜色。marginLeft是指文字距离左边控件的距离。也就是与返回图标ImageView的距离。

关于color

颜色我们用RGB三原色来表示，我们肉眼所能看到的颜色，都可以由红色，绿色，蓝色混合而来。每种颜色的最小值为0，最大值为255，通过调整每个颜色的色值范围，可以展示出各种不同的颜色。颜色值固定以#号开始，后面跟8位十六进制字符，也可以用6位，8位色值前两位表示透明度，之后分别用两位表示红，绿，蓝。6位色值则没有对透明度的定义，仅包含红绿蓝。#373737是指不包含透明度的红黄蓝色度都为55的颜色。55以16进制表示，就是37。

之后就是账单文字，因为显示在最右边。所以我们定义了一个宽度为match_parent的TextView，它将占用所有剩余的空间。并设置其中的文本对齐方式为右对齐。

至此，顶部的返回，账单布局设计完成，完整代码如下

预览一下效果

暂且不管顶部的标题，后面会将它处理掉。

这篇所讲的内容有点多，余下的内容，我们放在下一篇吧。

上一篇:编译与运行

下一篇:界面编写2