Android基础—小白篇(三)：为自己的APK描眉画眼——布局And控件(布局篇)

哈！2017了，先祝大家新年快乐，万事如意，还在上学的，上大学的，在将来的几天中考试不挂科，上高中的，在接下来的日子里好好学习，为高考做准备！
嘿嘿，不多说喽，下面进入我们的正题——为我们的android应用描眉画眼……
我们都应该知道这么一句话，人靠衣装马靠鞍，其实应该都大同小异的吧，我们的android应用也应该有一个漂亮的界面(妹子若没有漂亮的外表怎么能够吸引帅哥呢？哈哈)来吸引一些用户来用我们的应用！而在android中用什么来打造美丽的外表呢？在android中起这个作用的就是我们的布局和控件，下面小编我来分别说一下布局和控件在android程序中分别起什么作用哈，若有说的不对的话，请各位前辈或同行在下方的评论区指出，毕竟小编我是属于自学的，嘻嘻……

布局

布局在小编我的理解中若要拿现实的例子来举例的话，我感觉它应该是一栋楼房的整个外框架，当一栋楼的外框架所确定好了，我们便可以在它的内部进行各种建设，而在我们的Android程序中，布局分别有LinearLayout(线性布局)、RelativeLayout(相对布局)、FrameLayout(帧布局)、TableLayout(表格布局)、AbsoluteLayout(绝对布局)，由于在实际开发中TableLayout和AbsoluteLayout不经常使用，而且AbsoluteLayout过于死板(看名字就看的出来嘛，绝对……)所以官方也已经不推荐使用喽，各位可以少学一个了，哈哈，TableLayout(表格布局)，这种布局也不是很常用，我们只需要了解一下它的基本用法就可以了，但是在2015年的7月份左右官方推出了一个百分比布局，目的嘛，应该就是为适配各种大小不同的手机屏幕所推出的，因为在之前，适配各种手机屏幕大小的方法是设一大堆value值来达到Android软件在各种手机上里面的控件位置相对一样，接下来我们便开始我们的布局之旅吧！Let‘s go！

• LinearLayout(线性布局)
  我们看名字应该就能懂的了，既然叫线性布局，那么一定就有方向，线有横、竖，所以我们的线性布局当然也是这样的啦，不过我们在为这个布局设置属性的时候就不这么叫啦，那么该怎么叫呢，哈哈，不多说哈，咱们还是看实际效果吧，上代码，上图片！

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <Button        android:id="@+id/BT_button1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="buttn1"/>    <Button        android:id="@+id/BT_button2"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="buttn2"/>    <Button        android:id="@+id/BT_button3"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="buttn3"/></LinearLayout>

效果图如下：

好了，代码和图片都有了，那么我们就来解释一下吧，在代码中我们看到了LinearLayout，以及下面对应该布局的各种属性，那么这些属性都是什么呢，其实若我们有点英语基础就特别容易理解了，但是为了照顾下和小编本人一样的连英文字母到底有多少个都不知道的我还是来说明一下吧，首先在各种属性中，第一个看到的就是:
“android:id”，那么这个属性起什么作用呢，我们可以想象一下，我们每个人都有一个与众不同的身份证号(办假证的除外哈，嘻嘻)，一个人对应着一个身份证号，假如双胞胎长的特像，但是只要他们的身份证号不相互换的话我们就可以根据这个身份证号来找到我们想要找到人，在Android中同样如此，假如我们想要在某个地方去引用这个控件或者这个布局，那么我们就去找它的ID就好啦，只要ID找对了，就不怕我们的布局或者控件找错！
下面的就是：
“android:layout_width”，我们简单的翻译下就是，布局的宽度，我们还拿第一次的哪个例子说，一栋大楼，肯定有它的高度，宽度和长度，那么相对应的在我们Android软件中的布局当然也有宽度和高度啦(毕竟是2D的，平面图，所以长度是没有滴)！诺，高度就是下面哪个属性啦”“android:layout_height”“,其实这两个属性中的值都是相同的，分别为：match_parent和wrap_content(其实还有一个值的是fill_parent，只是已经被弃用了)，那么match_parent和wrap_content有什么区别呢，其实把它翻译过来就可以啦，match_parent为在该方向上填满整个父布局比较霸道，wrap_content则比较温柔啦，我用多少地儿就占多少地儿，适合就好。
下面就是关于方向的啦：
“android:orientation”，可以看到我在后面给的值为：vertical，相信英语好的同学已经知道这是什么意思了，没错它就是垂直的意思，为了显示下效果，小编我在该布局中添加了几个Button，当我们运行程序的时候就是那个样子的喽，下面我们来改变一下属性，来看看水平的是什么效果，上代码，上图片啦！
activity_main.xml(改):

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal">    <Button        android:id="@+id/BT_button1"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:text="buttn1"/>    <Button        android:id="@+id/BT_button2"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:text="buttn2"/>    <Button        android:id="@+id/BT_button3"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:text="buttn3"/></LinearLayout>

效果图如下：

OK,现在我们把LinearLayout的方向改为horizontal(水平)，Button按钮中的宽度和高度的值直接换了个位置，可以很直观的看到，当我们把方向改为horizontal(水平)的后，控件所占的那一列则全部属于该控件的，即！我们也就可以想到方向设置为vertical(垂直)的时候，则控件所在的那一行全部属于该控件！
下面我们再来说下LinearLayout另一个重要的属性——android:layout_weight，这个属性是做什么的呢，其实吧，这个属性是允许我们使用比例的方式来指定控件的大小的，它在手机适配性方面可以起到非常重要的作用呢，还记得开篇时所提到的那个百分比布局么，没错，那个布局和LinearLayout中的这个属性原理是相同的，那么请大家再思考一个问题，既然我们都使用比例来控制控件的大小了，那么我们还用在layout_width或者layout_height设置具体的值么？哈哈，我们还是用代码来验证一下吧！

...    <Button        android:id="@+id/BT_button1"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:text="buttn1" />    <Button        android:id="@+id/BT_button2"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="2"        android:text="buttn2" />    <Button        android:id="@+id/BT_button3"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="3"        android:text="buttn3" />

效果图：

解释下代码，在该代码中，由于我并没有对LinearLayout的属性做更改，所以就不贴出来啦，我们只看这三个Button控件中的属性，我都将它们的宽度设置成了0dp，然后分别设置的android:layout_weight属性的值为1，2，3，那么这是什么意思呢，其实很好理解的，第一个Button所占的宽度为1/(1+2+3),同理，第二个则为2/6，第三个则为3/6，即Android应用在为这些控件分配控件大小的时候，会先将所有拥有该android:layout_weight属性的值相加，然后再将设备的屏幕分成相应的份数，最后根据拥有该属性控件中设置的值进行相应的分配！
OK，现在LinearLayout所特有的属性已经说的差不多了，我们进行下一个布局吧，进入RelativeLayout(相对布局)的世界！
* RelativeLayout(相对布局)

RelativeLayout(相对布局)就比LinearLayout(线性布局)更为随意啦，它可以通过相对定位的方式让控件出现在布局的任何位置。也正因为如此，它的属性就非常多啦，但是只要用心的话其实不难的，我们还是拿代码说话吧，修改activity_main.xml文件中的代码，如下：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent">    <Button        android:id="@+id/BT_button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentLeft="true"        android:layout_alignParentTop="true"        android:text="button1" />    <Button        android:id="@+id/BT_button2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:layout_alignParentTop="true"        android:text="button2" />    <Button        android:id="@+id/BT_button3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentLeft="true"        android:text="button3" />    <Button        android:id="@+id/BT_button4"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:text="button4" />    <Button        android:id="@+id/BT_button5"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:text="button5" /></RelativeLayout>

效果图如下：

OK,现在来解释下这段代码吧，我们首先将布局换成了RelativeLayout，且我们在LinearLayout中说过了，android:orientation属性是LinearLayout所特有的，所以我们在RelativeLayout中就把它取消啦，把宽和高都设为match_parent就好啦，接下来看下面的几个控件的属性了，这些属性其实很好理解的(若是英语好的话)，android:layout_alignParentLeft顾名思义就是在父布局的左边，下面的那几个我就不用说了吧，若将它们一块儿用的话那就是左上，右上，左下，右下啦，若是居中的话……额……就是这个属性了android:layout_centerInParent，即！在父布局的中心，也就是居中喽，它们的值也就两个，一个为true一个就是false，当我们要使用这个属性的时候我们写true就OK了，若是不用的话……我们还写它干嘛，哈哈！
既然是相对布局了，那么我们是否有一个疑惑，就是，是不是可以相对所有，即，上面的那个例子是相对父布局，那么我们是否可以相对控件呢(貌似在xml中，除了布局就是控件，所以就是可不可以相对所有喽)，哈哈，当然可以啦，下面我们来改一下activity_main如下：

    <Button        android:id="@+id/BT_button5"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:text="button5" />    <Button        android:id="@+id/BT_button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/BT_button5"        android:layout_toLeftOf="@id/BT_button5"        android:text="button1" />    <Button        android:id="@+id/BT_button2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/BT_button5"        android:layout_toRightOf="@id/BT_button5"        android:text="button2" />    <Button        android:id="@+id/BT_button3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/BT_button5"        android:layout_toLeftOf="@id/BT_button5"        android:text="button3" />    <Button        android:id="@+id/BT_button4"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/BT_button5"        android:layout_toRightOf="@id/BT_button5"        android:text="button4" />

效果图：

显而易见了吧，是可以的，现在我们所有的Button都集中到了Button5的周围，下面我们来解释下代码吧，看代码若是有些强迫症的同学看的话应该会有些想打死我的心思了，为啥代码不Button1，Button2，Button3……这样写下来，为啥要把Button5放最上面嘛，哈哈，其实这是有个小坑的，由于我们除去Button5剩下的4个Button中的属性都用了android:layout_above、android:layout_below、android:layout_toLeftOf、android:layout_toRightOf，这些属性都是什么意思呢，其实看字面意思就懂啦，above意思就是在某个控件的上方，同理below就是在某个控件的下方，toLeftOf就是在某个控件的左边，toRightOf就是在某个控件的右边，它们的属性值是相同的都是引用某个控件的ID(小编我已经说过啦，只要通过ID就可以找到一个控件的)，既然是通过一个ID，那么这个ID就必须要存在，然后编译器执行的话并不是并行的，而是顺序编译的，所以我们若把Button5放在最底下的话，我们在上方的引用是会失败的，所以这里是小编故意这么写的，以防我们这些一点儿都不懂的小白出错！所以不只是在RelativieLayout中这样写，而是在所有的xml中都应该这样写，若想用，则先声明！
有的小伙伴有可能会说我不想让它在某个控件的某个方向，我要它自定义距父布局左或右又或者上和下，那该怎么办，其实很简单的，距父布局左就是android:layout_marginLeft，同理若是右则将Left改为Right就好，上下一个意思啦，值嘛就直接写数字就好了最后加上单位dp就好了。
OK，下面进行我们的下一个布局FrameLayout(帧布局)！

• FrameLayout(帧布局)
  FrameLayout(帧布局)，它相对于前面两种布局就简单多了，因此相应的应用场景也就少了很多，这种布局没有方便的定位方式(LinearLayout中的水平和垂直，RelativeLayout中的相对于控件或布局的上下左右)，所有的控件都会默认摆放在布局的左上角，嘿嘿，多说无益，眼见为实，上代码，我们还是改一下activity_main.xml中的代码如下：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent">    <Button        android:id="@+id/BT_button1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="button1" />    <Button        android:id="@+id/BT_button2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="button2" /></FrameLayout>

效果图：

哈哈，看到了吧，Button2在Button1的上方，为了更加的显示出效果，我在写Button1属性的时候将android:layout_width改为match_parent,这样是不是就更能显示出FrameLayout特性了呢，即！所有的控件都会默认摆放在布局的左上角，无论写多少个控件，它总是一层一层的覆盖……，那么在FrameLayout可不可以指定下各控件的对齐方式呢？答案是肯定的，即可以使用layout_gravity属性来指定控件在布局中的对齐方式，用法和LinearLayout是相似的，修改activity_main.xml代码如下：

...    <Button        android:id="@+id/BT_button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="left"        android:text="button1" />    <Button        android:id="@+id/BT_button2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="right"        android:text="button2" />...

效果图：

在该代码中我们分别将两个Button的android:layout_gravity属性设置为left、right，然后运行后的效果就如图啦，事实证明FrameLayout是可以设置对齐方式的，当然layout_gravity属性中的值还有很多，大家若感兴趣的话可以试试哈。至于它的使用场景，一个是看布局需求，另一个就是……哈哈，以后再说，嘻嘻。
OK，让我们进入我们的下一个布局TableLayout(表格布局)

• TableLayout(表格布局)
  其实我特想叫TableLayout为抽屉布局，并不是强翻译出来的，而是最后它的效果和我们现实中的抽屉特别相似，在现实中我们都见过抽屉吧，那么抽屉是什么样子的呢，是不是特别整齐的插在桌子上面，不管大小还是模样几乎都一样，哈哈，说的再多也是空谈，我们还是上代码吧，修改activity_main.xml如下：

<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent">    <TableRow>        <TextView            android:layout_height="wrap_content"            android:text="Account:" />        <EditText            android:id="@+id/ET_account"            android:layout_height="wrap_content"            android:hint="Input your account" />    </TableRow>    <TableRow>        <TextView            android:layout_height="wrap_content"            android:text="Password:" />        <EditText            android:id="@+id/ET_password"            android:layout_height="wrap_content"            android:inputType="textPassword" />    </TableRow>    <TableRow>        <Button            android:id="@+id/BT_login"            android:layout_height="wrap_content"            android:layout_span="2"            android:text="login" />    </TableRow></TableLayout>

好的先不看运行后的样子，我们现在解释下代码吧，首先总布局是TableLayout其实这个可以想象成我们现实中的桌子，哈哈，现在开始造抽屉啦，在下面的代码中我们可以看到的就是TableRow然后再它里面我们就看到我们的控件了，其实这个TableRow就可以想象成我们的抽屉，抽屉里面的在东西就可以了，在里面我们看到了两个我们还没有说到的控件，一个是TextView另一个就是EditText，简单说，TextView就是显示一行文本，可以是任意语言的，EditText就是输入一行文本，可以是任意类型的，字符串数字通吃！它们的属性我们后边再说哈！由大入小，嘿嘿，最下层的那个抽屉中我们放了一个Button，里面有个属性我们没有见过，android:yout_span这个后面我赋值为2，那么意思是什么呢，假如说现在有一位强迫症患者，他要求我的每一个抽屉中的布局都必须一样，若为两列则所有的抽屉都为两列，就是抽屉中只放一个物品，那么它就占一列的位置，另一列不允许占，但是这位患者又为了美观不想这么做，那么该怎么办呢，哈哈，这个android:layout_span属性就应运而生了，后面数字为多少那么就允许此控件占多少列！我们来看下运行的效果吧：

看着是不是特别的不舒服，尤其是强迫症患者，因为右半边没东西嘛，一个是浪费空间另一个是不美观，那么该怎么办呢，哈哈其实添加一行代码就好了，下面来改一下我们的activity_main.xml文件吧如下：

<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:stretchColumns="1">    ...</TableLayout>

在这我们为总布局TableLayout添加了一个属性android:stretchColumns并将它的值设为1，我们都知道计算机是从0开始计数的，而这个属性的意思是拉伸一列，具体拉伸的哪一列就是我们后面的值啦，写的1其实是拉伸的在我们眼中的2……运行后的效果如下：

OK，现在看着舒服多了吧！关于TableLayout就介绍这么多吧，毕竟属于小白篇的连入门都不算呢，以后根据具体需求再深究剩余的几个属性！下面学习我们的最后一个布局。百分比布局！
* 百分比布局

前面小编我已经说过了，官方为适配各种大小不同的屏幕所推出的该布局，由于LinearLayout已经支持按比例指定控件的大小了，所以百分比布局只为FrameLayout和RelativeLayout进行了功能扩展(不要问我为什么没有TableLayout，因为它太不常用了……)，提供了PercentFrameLayout和PercentRelativeLayout这两个全新的布局，让我们具体的学一下吧！
为了使该新布局可以再所有Android版本上都能使用，Android团队将该布局定义在了support库当中，因此我们就需要添加这个库啦，打开app/build.gradle文件，在dependencies闭包中添加如下内容：

dependencies {    ...    compile 'com.android.support:appcompat-v7:25.1.0'    compile 'com.android.support:percent:25.1.0'    ...}

在我们添加之前是有那个V7包的，后面跟的就是版本了，当添加compile ‘com.android.support:percent:25.1.0’后面的版本要和V7包的那个版本一样，若是低于那个版本了，虽说不会出错，但是看着这一行下面画着红色的波浪线还是不好受的，所以小伙伴们一定要注意这个问题啊！
下面就进入我们的activity_main.xml代码环节吧！
代码改为如下：

<?xml version="1.0" encoding="utf-8"?><android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent">    <Button        android:id="@+id/BT_button1"        android:layout_gravity="left|top"        android:text="button1"        app:layout_heightPercent="50%"        app:layout_widthPercent="50%" />    <Button        android:id="@+id/BT_button2"        android:layout_gravity="right|top"        android:text="button2"        app:layout_heightPercent="50%"        app:layout_widthPercent="50%" />    <Button        android:id="@+id/BT_button3"        android:layout_gravity="left|bottom"        android:text="button3"        app:layout_heightPercent="50%"        app:layout_widthPercent="50%" />    <Button        android:id="@+id/BT_button4"        android:layout_gravity="right|bottom"        android:text="button4"        app:layout_heightPercent="50%"        app:layout_widthPercent="50%" /></android.support.percent.PercentFrameLayout>

最外层我们使用了PercentFrameLayout，由于百分比布局并不是内置在系统的SDK中，所以需要把完整的包路径写出来，然后必须定义一个app的命名空间，这样才能使用百分比布局的自定义属性。
下面就简单啦，定义了四个Button然后借助android:layout_gravity属性来分别将这四个Button放置在布局的左上、右上、左下、右下四个位置，然后借助我们刚刚的新命名的app空间来使用layout_heightPercent和layout_widthPercent，它们的值就是百分比形式的啦，小编我设置的值都是50%，那么就是四个Button平分整个屏幕啦！下面看看效果吧：

是不是达到我们要的效果了呢，哈哈，另一个PercentRelativeLayout也是同样的道理，小编我就不演示啦！
OK，我们布局就到这儿吧，下面进入我们的控件篇！下一篇博文解释哈！
由于小编本人是大二狗这篇博客从元旦开始写，中间夹杂着复习，考试，一直到今天才写完，希望祝福不晚，嘻嘻……
大家若是有什么不懂的，可以在下面评论区中留言哈，我看到后会回的，另外对android有兴趣的同学可以加我们程序员刘某人的群:555974449,群里面有很多大神的，而且很热情，很热心的，大家不懂的可以问的。