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

最新推荐文章于 2025-09-21 10:55:18 发布

原创最新推荐文章于 2025-09-21 10:55:18 发布 · 593 阅读

2 ·

CC 4.0 BY-SA版权

Android开发基础专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了Android开发中LinearLayout的使用方法，包括布局方向、组件宽度、对齐方式及权重分配等内容，帮助开发者掌握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>