LinearLayout线性布局详解

线性布局是Android UI页面开发常用的布局，LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. 根据官网的描述可以解释为：LinearLayout是一个视图组，它将所有子项在一个方向上，垂直或水平对齐。

编写xml布局

Android中的页面布局使用xml文档描述，xml是一种类似HTML的标签语言，可以用来标记数据、定义数据类型，可以允许用户对自己标记语言进行定义。我们打开Android Studio创建一个Android项目，默认会创建一个MainActivity页面，同时生成一个布局文件activity_main.xml，文件的路径如下图所示。

Android Studio界面

默认创建的activity_main.xml使用的主布局是ConstraintLayout约束布局，我们可以把约束布局删除，也可以在约束布局中嵌套线性布局。如果删除约束布局，请保留xml文件的第一行。下面我们尝试编写一下xml文件：

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

</LinearLayout>

编辑xml布局文件需要带上android命名空间xmlns:android="http://schemas.android.com/apk/res/android"，否则会因无法识别而报错。layout_width和layout_height为必须属性，分别表示布局的宽和高，属性名前面带上android前缀。orientation属性表示子项排列方向，也建议带上该属性，默认值为horizontal横向排列。

LinearLayout线性布局

上图右边为LinearLayout线性布局效果，啥也没有，因为我们啥也没写...

线性布局方向和尺寸

上面简单提及了一下线性布局的layout_width, layout_height, orientation属性，分别表示布局的宽、高和排列方向。宽和高属性的值可以为match_parent, wrap_content, 和固定数值尺寸。Android中推荐的长度尺寸单位是 dp，它表示像素密度，与像素单位 px的区别是可以根据分辨率调整展示，减少跨设备显示差异。

orientation属性有两个值：horizontal和vertical，分别表示横向和纵向排列子项。下面为LinearLayout添加两个TextView作为子项，展示horizontal和vertical的差异。

Vertical：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
 <TextView
 android:text="this is TextView1"
 android:textColor="@color/black"
 android:textSize="18sp"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>
 <TextView
 android:text="this is TextView1"
 android:textColor="@color/black"
 android:textSize="18sp"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>

</LinearLayout>

vertical

Horizontal：代码部分仅仅把vertical改为了horizontal

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="horizontal">
 <TextView
 android:text="this is TextView1"
 android:textColor="@color/black"
 android:textSize="18sp"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>
 <TextView
 android:text="this is TextView1"
 android:textColor="@color/black"
 android:textSize="18sp"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>

</LinearLayout>

horizontal

线性布局子项权重

子项可以通过设置layout_weight属性来设置自身宽高占容器布局的比例，如果每个子项要平均分配，将layout_weight属性值设置为1即可，同时需要将layout_width宽度设置为0dp（对于横向排列来说）。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="horizontal">
 <TextView
 android:text="this is TextView1"
 android:textColor="@color/black"
 android:textSize="18sp"
 android:layout_weight="2"
 android:background="@color/teal_200"
 android:layout_width="0dp"
 android:layout_height="wrap_content"/>
 <TextView
 android:text="this is TextView2"
 android:textColor="@color/black"
 android:textSize="18sp"
 android:layout_weight="1"
 android:background="@color/purple_200"
 android:layout_width="0dp"
 android:layout_height="wrap_content"/>

</LinearLayout>

layout_weight

线性布局的嵌套

线性布局可以嵌套线性布局，也可以嵌套其它布局。下面示例使用线性布局加权重实现底部带图片的导航栏样式：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:gravity="bottom"
 android:orientation="horizontal">
 <LinearLayout
 android:layout_weight="1"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:orientation="vertical">
 <ImageView
 android:src="@mipmap/ic_launcher"
 android:layout_width="40dp"
 android:layout_height="40dp"
 android:layout_gravity="center"/>
 <TextView
 android:text="第一项"
 android:textColor="@color/black"
 android:textSize="18sp"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"/>
 </LinearLayout>
 <LinearLayout
 android:layout_weight="1"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:orientation="vertical">
 <ImageView
 android:src="@mipmap/ic_launcher"
 android:layout_width="40dp"
 android:layout_height="40dp"
 android:layout_gravity="center"/>
 <TextView
 android:text="第二项"
 android:textColor="@color/black"
 android:textSize="18sp"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"/>
 </LinearLayout>
 <LinearLayout
 android:layout_weight="1"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:orientation="vertical">
 <ImageView
 android:src="@mipmap/ic_launcher"
 android:layout_width="40dp"
 android:layout_height="40dp"
 android:layout_gravity="center"/>
 <TextView
 android:text="第三项"
 android:textColor="@color/black"
 android:textSize="18sp"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"/>
 </LinearLayout>
 <LinearLayout
 android:layout_weight="1"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:orientation="vertical">
 <ImageView
 android:src="@mipmap/ic_launcher"
 android:layout_width="40dp"
 android:layout_height="40dp"
 android:layout_gravity="center"/>
 <TextView
 android:text="第四项"
 android:textColor="@color/black"
 android:textSize="18sp"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"/>
 </LinearLayout>

</LinearLayout>

效果预览：

布局嵌套

上面的示例看着代码比较多，其实每个子项都是一个LinearLayout包裹着一个图片框和一个文本框，重复渲染了四遍，每个子项LinearLayout平均分配外层布局的宽度。

其它常用属性

除了以上的layout_width, layout_height, orientation, layout_weight 属性，还经常用到下列属性：

属性	描述
android:id	为控件指定相应的ID
android:padding	指定控件的内边距，控件当中的内容
android:layout_margin	视图与周围视图的距离（外边距）
android:minWidth	视图最小宽度
android:minHeight	视图最小高度
android:background	视图的背景: 可以是颜色，也可以是图片
android:visible	视图的可视属性
android:layout_gravity	视图与上级视图的对齐方式
android:gravity	视图中内容与视图的对齐方式
android:layout_centerHrizontal	水平居中
android:layout_centerVertical	垂直居中