入门Android必须知道的三大布局

学习新技能，循序渐进、由易入难是最好的方式。移动端开发中，最简单的莫过于界面布局。�开发中使用最多的三种布局是：线性布局LinearLayout、相对布局RelativeLayout和帧布局FrameLayout。以上三种布局基本能�解决Android开发中90%以上的界面。下面看一下它们的实现方式。

LinearLayout

LinearLayout是在父布局中把所有的子控件按线性排列，有按行和列两种排列方式。先看效果：

LinearLayout

具体设置代码如下，其中的背景@color/colorMine是在全局文件res/values/colors.xml中定义的。

<!--<线性布局:vertical>-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="200dp"
              android:layout_alignParentBottom="true"
              android:gravity="center_vertical"
              android:orientation="vertical"
    android:weightSum="3">

    <Button
        android:id="@+id/button_left"
        android:text="button_left"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:textColor="#000000"
        android:background="@color/colorMine"
        />
    <Button
        android:id="@+id/button_center"
        android:text="button_center"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:textColor="#000000"
        />
    <Button
        android:id="@+id/button_right"
        android:text="button_right"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:textColor="#000000"
        android:background="@color/colorMine"
        />

</LinearLayout>

上图将线性布局的父视图的gravity属性设置为vertical，按行排列。每个控件都单独占一行。但是很明显发现中间的Button布局有间隙，这是因为没有设置背景的原因。添加背景后，我们能看到如下图正确的效果。

LinearLayout

RelativeLayout

RelativeLayout布局中，子控件采用相互参照的方式确定自身的位置。可以采用相对于父控件或者其他子控件的方式，使用方式较灵活。实际效果如下：

RelativeLayout

再具体代码中，可以很明显的看出相对于父控件的关键字中一般带有Parent, 相对于子空间的关键字多以to开头。

<RelativeLayout android:layout_height="match_parent"
                android:layout_width="match_parent"
                xmlns:android="http://schemas.android.com/apk/res/android">

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/textLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左上角"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        />
    <android.support.v7.widget.AppCompatTextView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="右上角"
        android:layout_toRightOf="@+id/textLeft"
        android:background="@color/colorMine"
        android:layout_alignParentTop="true"
        />

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/centerText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中间"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@color/colorMine"
        />

    <android.support.v7.widget.AppCompatTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左下角"
        android:layout_toLeftOf="@+id/centerText"
        android:layout_below="@+id/centerText"
        />

    <android.support.v7.widget.AppCompatTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右下角"
        android:layout_toRightOf="@+id/centerText"
        android:layout_below="@+id/centerText"
        />
</RelativeLayout>

FrameLayout

FrameLayout中子控件开始全部堆砌在父视图的左上角，通过设置子控件的属性gravity来调整位置。效果和代码如下：

FrameLayout

<FrameLayout android:layout_height="match_parent"
             android:layout_width="match_parent"
             xmlns:android="http://schemas.android.com/apk/res/android">
    <Button
        android:id="@+id/fra_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="One Button"
        android:background="@color/colorMine"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text View"
        android:background="@color/colorMine"
        android:layout_gravity="right"/>
</FrameLayout>

除了上述三种布局，Android中还有绝对布局、网格布局和表格布局。但是它们使用较少，将有限的精力放在常用的知识点上面是明智的选择。三大布局使用方式有不同的特点，具体选择需要基于具体页面分析。熟练掌握使用方式是Android入门必不可少的一步，希望能帮助到入门的同路人。

关注和喜欢都是对我的鼓励和支持~