安卓布局 - 线性布局(LinearLayout)

在项目目录res/layout下，新建一个布局文件，名字叫linearlayout

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个"
        android:textSize="18sp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第三个" />

</LinearLayout>

有了新布局了，就要考虑怎么使用到这个新布局，在Activity的onCreate方法中修改：

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 修改布局文件
        setContentView(R.layout.linearlayout);
    }

先在模拟器中预览一下这个新布局的UI界面吧

可以看出：3个TextView是垂直排列的，并且我们给第一个设置了字体大小为18sp。

对齐方式：

layout_gravity：组件本身的对齐方式

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个"
        android:textSize="18sp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个"
        android:layout_gravity="right"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第三个"
        android:layout_gravity="center_horizontal"/>

</LinearLayout>

我们把第二个TextView设置了右对齐，第三个TextView设置了水平居中。

布局方向

android:orientation=”horizontal” 水平排列
android:orientation=”vertical” 垂直排列

下面模拟器预览水平排列：

(注意)：在vertical方向，左对齐、右对齐、水平居中才生效。在horizontal方向，顶部对齐、底部对齐、垂直居中才生效。

布局方向

android:orientation=”horizontal” 水平排列
android:orientation=”vertical” 垂直排列

下面模拟器预览水平排列：

(注意)：在vertical方向，左对齐、右对齐、水平居中才生效。在horizontal方向，顶部对齐、底部对齐、垂直居中才生效。

组件宽度

android:layout_width=”wrap_content” 包裹内容
android:layout_width=”match_parent” 匹配父节点

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第一个"
        android:textSize="18sp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个"
        android:layout_gravity="right"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第三个"
        android:layout_gravity="center_horizontal"/>

</LinearLayout>

在水平排列方向，我们把第一个TextView的宽度，设置为匹配父节点(这里它的父节点宽度就是屏幕的宽度)

可见，第一个TextView宽度占满屏幕，把第二个、第三个TextView挤出了屏幕外。

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个"
        android:background="@color/colorPrimary"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第二个"
        android:background="@color/colorAccent"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第三个"
        android:background="@color/colorPrimaryDark"/>

第一个和第三个宽度设置为包裹内容，第二个宽度设置为匹配父节点

权重：

权重：可以按比例分配屏幕剩余的宽度/高度
android:layout_weight=”1” 权重

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

    <TextView
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个"
        android:background="@color/colorPrimary"/>
    <TextView
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个"
        android:background="@color/colorAccent"/>
    <TextView
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第三个"
        android:background="@color/colorPrimaryDark"/>

</LinearLayout>

给我们三个组件都设置为1，那么就可以平分屏幕的宽度(高度)

提示：权重一般要和宽度(高度)搭配使用。

android:layout_weight="1"
android:layout_width="0dp"

实现以下布局

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

    <LinearLayout
        android:layout_weight="1"
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        >
        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:background="#ff0000"/>
        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:background="#ffffff"/>
        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:background="#000000"/>
        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:background="#666666"/>
    </LinearLayout>

    <LinearLayout
        android:layout_weight="1"
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:orientation="vertical"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/colorPrimaryDark"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/colorAccent"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/colorPrimaryDark"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#0000ff"/>
    </LinearLayout>

</LinearLayout>