Android基础（二）--Android五大布局

Android基础知识整理第二篇

---

Android的布局

• 布局分为以下五种：

  • RelativeLayout
  • LinearLayout
  • GridLayout
  • FrameLayout
  • AbsoluteLayout

---

这里需要解释一下，什么是布局。在Android中，关于UI的设计，很多时候是基于一种特定的页面内容的分布方式来进行的，简单的说，就是我的一个按钮和另外一个按钮，一个在上面，一个在下面，这就是一种布局的方式。

1. RelativeLayout - 相对布局

首先我们看一段代码

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The First TextView" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The Second TextView" />
</RelativeLayout>

• 这段代码中，可以看到代码最外层是一个<RelativeLayout></RelativeLayout>在里面放了两个TextView（这里先知道TextView是显示文字的控件，之后再进行详解）,然后我们看一下运行起来是什么样子的。

• 很显然，两个文字重叠在了一起，什么也看不清，既然是相对布局，我们要去实现他们的相对性，就要靠一些代码来完成了。
• 相对布局的作用，就是让在这个布局内的控件可以互相作为位置的参照。

我们修改一下代码中的一些内容

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

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The First TextView" />
    <TextView
        android:id="@+id/tv_2"
        android:layout_below="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The Second TextView" />
</RelativeLayout>

• 我们可以看到，在每个TextView中，加入了一行代码，android:id="@+id/" 这里，我们可以为任何一个控件（最外层的RelativeLayout也可以设置id）设置一个id，这个id就作为了这个控件的标识。

• 另外一行代码android:layout_below="@+id/tv_1"，这里表示当前控件在id为tv_1的下面（below）。我们看一下效果。

• 可以看到，我们的第二个控件已经在第一个控件的下面了。

---

• 我们从上面的简单示例中理解一个问题，就是每一个控件都有他们的属性，表示一定的含义，来控制这个控件表现出来的样式，位置或者其他特性。

• 那么，不光是TextView拥有这些属性，我们称TextView外层嵌套的RelativeLayout为父布局控件 （这里我们把RelativeLayout也称为一个控件，实际上，所有的控件都是继承至View类或者ViewGroup这个类，这个将在以后整理中慢慢进行理解）。

• RelativeLayout也拥有一些属性。既然所有的控件都有很多属性，这些属性是不是会有一些属性是通用的呢，答案是肯定的，列一个表格来看一下一些常用的属性。

属性	值	含义
android:id	@+id/tv_1	为控件社会自id标志
android:background	可以是颜色的值(#ffffff)，背景图片，或者背景文件	设置控件的颜色，背影图片
android:gravity	top、bottom、left、right、center…	设置这个控件中内容显示的对齐方式
android:padding	例：10dp	控件的内边距
android:margin	例：10dp	控件的外边距
android:onClick	在activity类中绑定的点击方法方法名	设置这个方法的点击事件
android:clickable	true 或者 false	设置这个控件是否可以点击
android:layout_height	例：10dp或wrap_content或match_parent	为控件设置高度
android:layout_width	例：10dp或wrap_content或match_parent	为控件设置宽度

• 以上的这些属性，是非常基础的，也是平时使用非常频繁的，其中，有几个属性说一下，background，padding,margin和onClick。

• 前两个要放在一起解释，前面的是内边距，后面的是外边距，可以从下面的图看，整个控件是深色的方框，margin 就是在这个控件外面加边距，而padding则是以控件的边框为基准，向内添加边距，使得控件中的内容会距离边框更远。

• 属性的值的话，有三种方式，10dp表示10个像素表示除了文字意外的尺寸，match_parent表示填充满父布局，上面的例子的话，如果TextView使用这个属性值，会填满RelativeLayout。wrap_content表示适配当前控件内容的高度或者宽度，文字有多大，控件就有多高多宽。

注：图片来自网络

• onClick这个属性的话，我们会在整理button控件的时候第一次用到，这里不做解释。

• background这个属性，可以为它添加颜色，也可以添加背景图片。

  • 颜色： #ffffff代表白色，6位十六进制数值表示颜色。
  • 如果为8位十六进制数值，前两位代表透明度ff代表不透明，00代表完全透明。
  • 背景图片：@drawable/图片名称 或者 @mipmap/图片名称。注：drawable和mipmap都是存放图片的资源文件夹

---

除了这些通用的属性以外，我们来看一下RelativeLayout内的子控件都有哪些属性。

属性	含义	值
layout_alignParentRight	该控件与父布局控件右对齐	true or false
layout_alignParentLeft	该控件与父布局控件左对齐	true or false
layout_alignParentTop	该控件与父布局控件顶端对齐	true or false
layout_alignParentBottom	该控件与父布局控件底部对齐	true or false
layout_centerInParent	该控件位于父布局控件中心位置	true or false
layout_centerVertical	该控件位于父布局控件垂直中心位置	true or false
layout_centerHorizontal	该控件位于父布局控件水平中心位置	true or false
layout_toRightOf	该控件在哪个控件的右侧	另外一个子控件的id
layout_toLeftOf	该控件在哪个控件的左侧	另外一个子控件的id
layout_above	该控件在哪个控件的上侧	另外一个子控件的id
layout_below	该控件在哪个控件的下侧	另外一个子控件的id
layout_alignRight	该控件与哪个控件的右对齐	另外一个子控件的id
layout_alignLeft	该控件与哪个控件的左对齐	另外一个子控件的id
layout_alignTop	该控件与哪个控件的顶对齐	另外一个子控件的id
layout_alignBottom	该控件与哪个控件的底对齐	另外一个子控件的id

---

2.LinearLayout - 线性布局

我们看一下把布局改成线性布局以后的效果

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.csdn.myapplication.MainActivity">

    <TextView
        android:id="@+id/tv_1"
        android:padding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        android:text="The First TextView" />

    <TextView
        android:id="@+id/tv_2"
        android:padding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#9b9cff"
        android:text="The Second TextView" />
</LinearLayout>

• 这段代码中，我们修改了几个地方，来看一下效果

• 可以看到，布局中，两个控件是从左向右排列的，默认情况下是这样的。

• 当我们在代码中加入一条属性，修改如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.csdn.myapplication.MainActivity">

这时候内部的控件就会竖直排列。如果需要设置横向排列的修改代码为android:orientation="horizontal"

LinearLayout特有的属性

属性	含义	值
android:orientation	控制布局是横向或者纵向	vertical or horizontal
android:weightSum	设置布局的权重综合，子控件可以设置权重来显示占父布局的比例	数值 例：10

LinearLayout子控件特有的属性

属性	含义	值
android:layout_weight	子元素在LinearLayout中所占的权重	数值 例：5
android:layout_gravity	子元素在 LinearLayout 中的对齐方式	center，top，bottom…

---

3.GridLayout - 网格布局

• GridLayout我们首先还是来看一下效果

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.csdn.myapplication.MainActivity">

    <TextView
        android:id="@+id/tv_1"
        android:padding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        android:text="The First TextView" />

    <TextView
        android:id="@+id/tv_2"
        android:padding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#9b9cff"
        android:text="The Second TextView" />

    <TextView
        android:id="@+id/tv_3"
        android:padding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#9efc8b"
        android:text="The Three TextView" />

    <TextView
        android:id="@+id/tv_4"
        android:padding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffa86e"
        android:text="The Four TextView" />
</GridLayout>

• 我们在一个GridLayout中添加了4个TextView，看一下效果

• 可以看到，我们屏幕上只显示了一行，三个TextView，而且最右边还没显示全，这是因为，GridLayout默认情况下，是一行多列的，在屏幕外面，还有我们的第四个TextView

• 我们在GridLayout标签中，加入一条android:columnCount = "2"

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount = "2"
    tools:context="com.csdn.myapplication.MainActivity">

• 这时候的效果如下图

• 变成了两列，我们来归纳一下GridLayout的属性

GridLayout特有的属性

属性	含义	值
android:columnCount	GridLayout的最大列数	数值 例：2
android:rowCount	GridLayout的最大行数	数值 例：2
android:orientation	GridLayout中子元素的布局方向	vertical horizontal

GridLayout子控件特有的属性

属性	含义	值
android:layout_column	在第几列显示当前子控件	数值 例：2
android:layout_row	在第几行显示当前子控件	数值 例：2
android:layout_columnSpan	列合并，表示当前控件占几列的大小	数值 例：2
android:layout_rowSpan	行合并，表示当前控件占几行的大小	数值 例：2
android:layout_gravity	当前控件在单元格内的布局方式	center，top，bottom…

---

4.FrameLayout - 帧布局

• FrameLayout布局比较简单，当在布局中添加控件时，新添加的控件会覆盖前面的控件。

• 这种布局方式像是没有进行任何位置控制的RelativeLayout。

---

5.AbsoluteLayout- 绝对布局

• 绝对布局是一种基于坐标的布局方式，布局缺少灵活性和适配性，目前版本已经弃用，不在做整理。