Android学习之基础知识六—Android四种布局详解

一、Android基本布局

　　布局是一种可以放置多个控件的容器，它可以按照一定规律调整内部控件的位置，而且布局内部除了可以放置控件外，还可以放置布局，实现多层布局嵌套。布局和控件、布局和布局之间的关系如下图所示：

二、线性布局（LinearLayout）

　　1、LinearLayout布局是一种非常常用的布局文件，它内部所包含的控件在线性方向上依次排列。线性方向有水平和垂直两种，通过android：orientation属性来指定线性排列方向，可选值有两种：horizontal（控件在水平方向排列）、vertical（控件在垂直方向排列），默认排列方式是水平排列

接下来通过代码来直观感受一下：

第一步：创建三个按钮：

第二步：运行程序，效果如下（左），如果将android：orientation的值选为horizontal（水平），效果如下（右）

    

注意：

　　如果LinearLayout的排列方向是：horizontal（水平），那么其内部的控件就绝对不能将宽度指定为：match_parent（与父布局一样宽），因为这样的话，单独一个控件就会将整个水平方向占满，其他的控件就没有可以放置的位置了。同理，如果LinearLayout的排列方向是：vertical（垂直），那么内部控件的高度就绝对不能指定为：match_parent

　　2、android：layout_gravity属性与android：gravity属性：

　　　　android：layout_gravity属性：用于指定控件在布局中的对齐方式

　　　　android：gravity属性：用于指定文字在控件中的对齐方式

注意：

　　使用android：layout_gravity属性时，如果LinearLayout的排列方向是：horizontal（水平方向）时，只有垂直方向上的对齐方式才会生效，因为水平方向上的长度是不固定的，每添加一个控件，水平方向上的长度都会变，无法指定该方向上的对齐方式。同理，如果LinearLayout的排列方向是：vertical（垂直方向），那么只有水平方向的对齐方式有效。

下面通过代码来感受一下：

第一步：在activity_main.xml中指定：LinearLayout布局的排列方向为：horizontal（水平方向），first button对齐方式为：top，second button对齐方式为：center_vertical，third button对齐方式为：bottom

第二步：运行程序，效果如下：

　　3、android：layout_weight属性：这是一个很重要的属性，它允许我们使用比例的方式来指定控件的大小，在手机屏幕的适配性方面起到非常重要的作用。

我们先来看一下代码和效果：编写一个消息发送界面（一个文本编辑框，一个发送按钮）

第一步：在布局中添加一个文本编辑框和发送按钮

第二步：效果展示：

代码分析：

　　1、代码中将EditText控件和Button控件的宽度都指定为0dp，然后使用了android：layout_weight属性，此时，控件的宽度就由android：layout_weight属性来控制了

　　2、系统是通过控件中android：layout_weight的值来分配屏幕宽度的，计算方法是：先把每个控件中layout_weight的值相加，得到一个总值，然后根据每个控件的值除以总值得到所占的比例。比如上面EditText控件所占的屏幕宽度为：4/(1+4)=4/5，同样，Button所占屏幕宽度即为：1/5.

拓展：

　　其实对于上面的代码我们还可以进行优化：将Button控件的宽度改回：wrap_content，这是，Button的宽度依然按：wrap_content来计算，而EditText控件就会占据屏幕剩下的所有空间，使用这种方式编辑界面，不仅在各种屏幕的适配方面会非常好，而且看起来也更加舒服。

    

三、相对布局（RelativeLayout）

　　RelativeLayout布局也是一种非常常用的布局。和LinearLayout的排列方式不同，RelativeLayout显得更加随意，它可以通过相对定位的方式让控件出现在布局的任何位置，也正因为如此，RelativeLayout中的属性非常的多，不过这些属性都是有规律可循的。

先看代码和效果：

第一步：在RelativeLayout布局中加入五个Button，分别位于左上角、右上角、布局中间、左下角、右下角

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/first_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="first button"/>
    <Button
        android:id="@+id/second_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="second button"/>
    <Button
        android:id="@+id/third_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="third button"/>
    <Button
        android:id="@+id/four_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="four button" />
    <Button
        android:id="@+id/five_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="five button"/>
</RelativeLayout>

第二步：效果展示：

代码分析：

　　layout_alignParentLeft、Layout_aligntParentTop：控件位于父布局的左上角

　　layout_alignParentRight、Layout_aligntParentTop：控件位于父布局的右上角

　　layout_alignParentLeft、Layout_aligntParentBottom：控件位于父布局的左下角

　　layout_alignParentRight、Layout_aligntParentBottom：控件位于父布局的右下角

　　Layout_centerInParent：控件位于父布局的中心

拓展：

　　上面的控件都是相对于布局进行定位的，其实在RelativeLayout布局中，控件也可以相对于控件进行定位，下面是代码和效果：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/first_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="first button"/>
    <Button
        android:id="@+id/second_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/first_button"
17         android:layout_toLeftOf="@id/first_button"
        android:text="second button"/>
    <Button
        android:id="@+id/third_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/first_button"
24         android:layout_toRightOf="@id/first_button"
        android:text="third button"/>
    <Button
        android:id="@+id/four_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/first_button"
31         android:layout_toLeftOf="@id/first_button"
        android:text="four button" />
    <Button
        android:id="@+id/five_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/first_button"
38         android:layout_toRightOf="@id/first_button"
        android:text="five button"/>
</RelativeLayout>

效果展示：

代码分析：

　　android：layout_above属性：一个控件位于另一个控件的上方

　　android：layout_below属性：一个控件位于另一个控件的下方

　　android：layout_toLfetOf属性：一个控件位于另一个控件的左边

　　android：layout_toRightOf属性：一个控件位于另一个控件的右边

除此之外，还有另外一组相对于控件定位的属性：

　　android：layout_aligntLeft属性：一个控件的左边缘与另外一个控件的左边缘对齐

　　android：layout_aligntRight属性：一个控件的右边缘与另外一个控件的右边缘对齐

　　android：layout_aligntTop属性：一个控件的上边缘与另外一个控件的上边缘对齐

　　android：layout_aligntBottom属性：一个控件的下边缘与另外一个控件的下边缘对齐

下面举一个简单的例子：

   

四、帧布局（FrameLayout）

　　FrameLayout布局因为其定位方式的欠缺，所以它的应用场景很少，下面我们就来简单的了解一下：

    

　　关于FrameLayout布局，在碎片中可以有所应用，后面我们会学到的。 

五、百分比布局（PercentFrameLayout、PercentRelativeLayout）

　　1、 只有LinearLayout布局支持使用：layout_weight 来实现按比例指定控件大小的功能。

　　2、百分比布局允许直接指定控件在布局中所占的百分比，这样可以轻松实现平分布局或者按任意比例分割布局的效果了。

　　3、因为LinearLayout布局本身已经支持按比例来指定控件大小了，所以百分比布局只为FrameLayout布局和RelativeLayout布局进行了扩展，提供了PercentFrameLayout和PercentRelativeLayout两种全新的布局。

　　4、百分比布局是一种全新的布局，为了使其能在所有Android版本上使用，我们需要在app/build.gradle文件中添加百分比布局库的依赖：

　　implementation 'com.android.support：percent：27.1.1'

 　　5、下面看代码和效果：

<?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:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/first_button"
        android:text="first button"
        android:layout_gravity="left|top"
        app:layout_widthPercent="50%"
12         app:layout_heightPercent="50%"
       />
    <Button
        android:id="@+id/second_button"
        android:text="second button"
        android:layout_gravity="right|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"/>
    <Button
        android:id="@+id/third_button"
        android:text="third button"
        android:layout_gravity="left|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"/>
    <Button
        android:id="@+id/four_button"
        android:text="four button"
        android:layout_gravity="right|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"/>
</android.support.percent.PercentFrameLayout>

 

代码分析：

　　1、在XML文件中需要定义一个app的命名空间，这样才能使用百分比布局的自定义属性（app属性）

　　　　app：layout_widthPercent属性：指定宽度百分比

　　　　app：layout_heightPercent属性：指定高度的百分比。

　　2、PercentFrameLayout还继承了FrameLayout的特性，及所有的控件默认都是摆放在布局的左上角。

　　　　使用layout_gravity来分别指定左上、右上、左下、右下

　　3、PercentRelativeLayout用法与PercentFrameLayout用法相似，它也继承了RelativeLayout布局的所有属性，并且可以使用app：layout_widthPercent和app：layout_heightPercent属性来指定控件所占的百分比。