Android初入门（二）“脸萌”布局

今天完成了一款“脸萌”游戏的布局，其他功能还未实现，主要学习五大布局的使用。

首先，先写第一个界面的布局。第一个界面有三个元素：背景图片，中间的卡通头像，下面的logo

这样的界面排版我使用的是相对布局：RelativeLayout

在相对布局的属性中设置背景图片：background="图片路径"

在布局中添加图片所用的属性为<ImageView>

中间的卡通头像属性设置为在父窗体中垂直居中并且水平居中，就能得到界面效果：

android:layout_centerVertical="true"
android:layout_centerHorizontal="true"

给这张图片设置一个按钮，这样点击这个卡通头像的时候就可以跳转到下一个界面：

android:onClick="register"

注意在java文件中所写的方法要与在这里设置的方法名完全相同

最下面的logo，使用的属性是在父窗体的最下方并且水平居中：

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

第一个界面的布局完成了，接下来是第二个界面的布局，根据第二个界面中每个元素的位置关系，我使用的也是相对布局，并且在相对布局中，嵌套多个相对布局：

背景的颜色有点浅灰色，如果没有背景图片，可以使用另一种方式，使用取色器，在屏幕上取到自己想要的颜色，讲颜色值放入background属性中。

在最大的相对布局中，再嵌套一个相对布局。

最左上角的小喇叭如果太贴近父窗体，可以使用layout_margin属性进行调整。

小喇叭是一个点击事件，在点击时图片会变成一个静音的小喇叭，再点击时又会变回原来的小喇叭，此时的控件选择<CheckBox>

图片的属性不能使用src，使用button=""，这个点击事件涉及两张图片，所以要开始写一个选择器，在选择器中放入两张图片，并判断出什么时候变成哪一张图片。

在res目录下新建一个文件夹drawable,再在drawable中添加一个xml文件，命名为：void_selector.xml:

在这个xml文件中，选择state_checked属性，这两行代码的意思是，如果当你点击了这张图片，就会变成静音喇叭，否则就是原来的小喇叭。

之后的点击事件中有两个不同的照片时，都需要添加选择器。

写完选择器之后，布局文件的checkbox控件中还要添加一个属性：android:checked="false"    才能使用这个功能。

之后的图片，都是在相对布局中，两张图片并排，可以给左边的图片设置一个id，右边的图片通过这个id设置相对于左边图片的右边位置上。

注意，中间一个男生一个女生的图片是需要设置按钮属性的，点击其中任何一个都会跳转到下一个界面。

第三个界面和第四个界面的布局是相同的，只要改变图片路径就可以了。

这个界面的布局使用的是在相对布局里面嵌套相对布局和线性布局。

这个布局重点要说的是实现界面的滚动下拉。

在布局中添加滚动下拉的属性：

<ScrollView 
        android:layout_width="match_parent"
        android:layout_height="match_parent">

注意这个属性里面只能有一个子类，就是只识别一个布局，如果里面有多个布局就无法识别，所以在多个布局的外面，用一个大布局将这些子类布局框起来，再在外面套上滚动下拉的属性就可以了。

下面是如何实现图片点击后跳转到另一个界面方法：

打开src目录下的MainActivity.java文件：

这个文件的界面是第一个界面。

添加一个跟之前在布局文件中设置的按钮同样名字的方法，然后使用一个意图，在意图中写所要跳转的class，并且执行。

在src目录下添加一个class文件：用来显示第二个界面，也就是第一个界面所要跳转的class

在这个java文件中，写上所要显示的界面：

setContentView(R.layout.所要显示的界面);

然后打开清单AndroidManifest.xml，在里面注册这个class，就可以实现界面的跳转了：

第二个界面跳转第三个界面，用的方法也跟上面的是相同的。这个“脸萌”的界面布局就基本上完成了。