线性布局。两种选择：

  • 从左往右(水平排列)；

  • 从上往下(垂直排列)。

水平排列布局

场景一：默认水平排列

默认情况下，LinearLayout 容器内的子控件是水平排列的，由左往右。

  1. <LinearLayout 
  2.     android:layout_height="match_parent"
  3.     android:layout_width="match_parent"
  4.     xmlns:android="http://schemas.android.com/apk/res/android">
  6.     <Button android:text="按钮1"
  7.         android:layout_width="wrap_content"
  8.         android:layout_height="wrap_content"/>
  10.     <Button android:text="按钮2"
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"/>
  14.     <Button android:text="按钮3"
  15.         android:layout_width="wrap_content"
  16.         android:layout_height="wrap_content"/>
  18. </LinearLayout>

页面有三个按钮，默认从左往右排列。
LinearLayout - 图1

上面只有三个子控件，一切看起来是那么的正常。如果子控件元素过多，多余的子控件不显示。LinearLayout 并不会自动的将多余的子控件换行，如下所示：

场景二：不会自动换行

  1. <LinearLayout 
  2.     android:layout_height="match_parent"
  3.     android:layout_width="match_parent"
  4.     xmlns:android="http://schemas.android.com/apk/res/android">
  6.     <Button android:text="按钮1"
  7.         android:layout_width="wrap_content"
  8.         android:layout_height="wrap_content"/>
  10.     <Button android:text="按钮2"
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"/>
  14.     <Button android:text="按钮3"
  15.         android:layout_width="wrap_content"
  16.         android:layout_height="wrap_content"/>
  18.     <Button android:text="按钮4"
  19.         android:layout_width="wrap_content"
  20.         android:layout_height="wrap_content"/>
  22.     <Button android:text="按钮5"
  23.         android:layout_width="wrap_content"
  24.         android:layout_height="wrap_content"/>
  26.     <Button android:text="按钮6"
  27.         android:layout_width="wrap_content"
  28.         android:layout_height="wrap_content"/>
  30. </LinearLayout>

上面 xml 中定义了 6 个按钮，但只显示了 5 个，还有 1 个直接隐藏不见了，LinearLayout 不会将多余的子控件换行的。

LinearLayout - 图2

场景三：match_parent

上面定义的按钮宽度和高度都是根据内容自适应的。如果其中一个按钮的宽度设置为 match_parent 会怎样呢？

  1. <LinearLayout 
  2.     android:layout_height="match_parent"
  3.     android:layout_width="match_parent"
  4.     xmlns:android="http://schemas.android.com/apk/res/android">
  6.     <Button android:text="按钮1"
  7.         android:layout_width="wrap_content"
  8.         android:layout_height="wrap_content"/>
  10.     <Button android:text="按钮2"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="wrap_content"/>
  14.     <Button android:text="按钮3"
  15.         android:layout_width="wrap_content"
  16.         android:layout_height="wrap_content"/>
  18. </LinearLayout>

上面 xml 中第二个按钮的宽度设置为 match_parent，可以看到按钮3 直接被覆盖了，按钮2 占去了除去按钮1 剩余所有宽度。
�
LinearLayout - 图3

垂直排列布局

要想要 LinearLayout 内的子控件垂直排列，只需为 LinearLayout 控件添加 android:orientation 属性，设置值为 vertical。

  1. <LinearLayout 
  2.     android:layout_height="match_parent"
  3.     android:layout_width="match_parent"
  4.     android:orientation="vertical"
  5.     xmlns:android="http://schemas.android.com/apk/res/android">
  7.     <Button android:text="按钮1"
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"/>
  11.     <Button android:text="按钮2"
  12.         android:layout_width="wrap_content"
  13.         android:layout_height="wrap_content"/>
  15.     <Button android:text="按钮3"
  16.         android:layout_width="wrap_content"
  17.         android:layout_height="wrap_content"/>
  19. </LinearLayout>

LinearLayout - 图4

实际应用

应用一：登录表单

layout_weight 讲解

  1. <LinearLayout
  2.         android:layout_height="wrap_content"
  3.         android:layout_width="match_parent"
  4.         android:paddingLeft="20dp"
  5.         android:paddingRight="20dp">
  7.         <TextView
  8.             android:layout_width="0dp"
  9.             android:layout_height="wrap_content"
  10.             android:layout_weight="1"
  11.             android:text="用户名" />
  13.         <EditText
  14.             android:layout_width="0dp"
  15.             android:layout_height="wrap_content"
  16.             android:layout_weight="4"/>
  18.     </LinearLayout>

上面 xml 可以看到 LinearLayout 的两个子控件 TextView 和 EditText 的宽度 layout_width 属性都设置为 0dp，即没有宽度。它们的宽度通过 layout_weight 属性控制，可以看到 TextView 的 layout_weight = 1，而 EditText 的 layout_weight = 4，即：TextView 的宽度占这一行的 1/5，而 EditText 的宽度占一行的 4/5。

完整示例代码

LinearLayout 可以嵌套。下面示例中最外层 LinearLayout 控件垂直布局，内部又有三个子 LinearLayout 控制每一行内的布局。

  1. <LinearLayout
  2.     android:layout_height="match_parent"
  3.     android:layout_width="match_parent"
  4.     android:orientation="vertical"
  5.     xmlns:android="http://schemas.android.com/apk/res/android">
  7.     <LinearLayout
  8.         android:layout_height="wrap_content"
  9.         android:layout_width="match_parent"
  10.         android:paddingLeft="20dp"
  11.         android:paddingRight="20dp">
  13.         <TextView
  14.             android:layout_width="0dp"
  15.             android:layout_height="wrap_content"
  16.             android:layout_weight="1"
  17.             android:text="用户名" />
  19.         <EditText
  20.             android:layout_width="0dp"
  21.             android:layout_height="wrap_content"
  22.             android:layout_weight="4"/>
  24.     </LinearLayout>
  26.     <LinearLayout
  27.         android:layout_height="wrap_content"
  28.         android:layout_width="match_parent"
  29.         android:paddingLeft="20dp"
  30.         android:paddingRight="20dp">
  32.         <TextView android:layout_width="0dp"
  33.             android:layout_height="wrap_content"
  34.             android:layout_weight="1"
  35.             android:text="密码" />
  37.         <EditText
  38.             android:layout_width="0dp"
  39.             android:layout_height="wrap_content"
  40.             android:layout_weight="4"/>
  42.     </LinearLayout>
  44.     <LinearLayout
  45.         android:layout_height="wrap_content"
  46.         android:layout_width="match_parent"
  47.         android:paddingLeft="20dp"
  48.         android:paddingRight="20dp">
  50.         <Button
  51.             android:layout_height="wrap_content"
  52.             android:layout_width="match_parent"
  53.             android:text="提交"/>
  54.     </LinearLayout>
  56. </LinearLayout>

LinearLayout - 图5