Android-初探布局管理器

最新推荐文章于 2020-08-17 17:36:28 发布

原创最新推荐文章于 2020-08-17 17:36:28 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

#Android初级专栏收录该内容

2 篇文章

订阅专栏

本文深入解析Android中的多种布局方式，包括绝对布局、线性布局、表格布局、帧布局及约束布局的特点与应用。详细介绍了各布局的XML属性设置，如LinearLayout的权重分配、TableLayout的列操作、FrameLayout的组件堆叠以及ConstraintLayout的灵活性，帮助开发者掌握不同场景下的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Android9里，GridLayout 和 RelativeLayout 不被推荐使用，而推荐使用约束布局 ConstraintLayout ，所以就不做详细介绍。

文章目录

AbsolutelyLayout
绝对布局，开发者直接指定组件的大小位置。只适和某些针对性的显示屏，不具有普适性。

LinearLayout

线性布局属于比较基础比较熟悉的布局，它可以控制各个组件横向/纵向排列。但是Android的线性布局不会换行，当组件排列到头后，剩余的组件将显示不出来。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    
    //排列方式：vertical纵向，horizontal横向
    android:orientation="vertical"
    
    android:id="@+id/main_layout"
    android:gravity="center_horizontal"
    tools:context=".MainActivity">

   <Button
    android:id="@+id/bt1"
    android:text="普通按钮1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
    
    //此处省略剩下的五个button......

</LinearLayout>

如图所示，按钮6并没有显示出来；
手机运行效果
在线性布局中，还可以通过权重来分配布局空间：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:id="@+id/main_layout"
    android:gravity="center_horizontal"
    tools:context=".MainActivity">
	
   <Button
    android:id="@+id/bt1"
    android:text="普通按钮1"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"/>
    
    <Button
        android:id="@+id/bt2"
        android:text="普通按钮2"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>
        
    //此处省略剩下的四个button......

</LinearLayout>

权重：将layout_width设置为 0dp ，通过 layout_weight 设置占用空间的比例（所占空间比例 = 该组件 layout_weight / 所有组件 layout_weight 之和）

TableLayout

表格布局继承了线性布局，因此本质上依旧是线性布局管理器。
表格布局通过添加 tablerow、其他组件来控制表格的行数列数。
TableRow 也是一个容器，可以向里面添加其他组件，每添加一个组件，该TableRow 就增加一行。

XML属性	相关方法	相关方法
android:collapseColumns	setCollapseColumns(int,boolean)	设置需要被隐藏的列的序列号。多个序列号间用逗号隔开
android:shrinkColumns	setShrinkColumns(boolean)	设置需要被收缩的列的序列号。多个序列号间用逗号隔开
android:stretchColumns	setStretchColumns(boolean)	设置需要被拉伸的列的序列号。多个序列号间用逗号隔开

注：序列号从0开始

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/main_layout"
    tools:context=".MainActivity">

    <TableLayout
        android:id="@+id/tl1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="1"
        android:stretchColumns="2">
        <Button
            android:id="@+id/bt1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="独占一行的普通按钮"/>
        <TableRow>
            <Button
                android:id="@+id/bt2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="普通按钮"/>
            <Button
                android:id="@+id/bt3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="收缩的按钮"/>
            <Button
                android:id="@+id/bt4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="拉伸的按钮"/>
        </TableRow>
    </TableLayout>

    <TableLayout
        android:id="@+id/tl2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="1">
        <Button
            android:id="@+id/bt5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="独占一行的普通按钮"/>
        <TableRow>
            <Button
                android:id="@+id/bt6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="普通按钮"/>
            <Button
                android:id="@+id/bt7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="隐藏的按钮"/>
            <Button
                android:id="@+id/bt8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="普通按钮"/>
        </TableRow>
    </TableLayout>

    <TableLayout
        android:id="@+id/tl3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="1,2">
        <Button
            android:id="@+id/bt9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="独占一行的普通按钮"/>
        <TableRow>
            <Button
                android:id="@+id/bt10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="普通按钮"/>
            <Button
                android:id="@+id/bt11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="拉伸的按钮"/>
            <Button
                android:id="@+id/bt12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="拉伸的按钮"/>
        </TableRow>
    </TableLayout>
</LinearLayout>

效果如图所示：
手机运行效果

FrameLayout

帧布局会为加入的组件创建一个空白的区域（一帧），这些帧会根据gravity属性自动对齐，如果没有规定线性显示，那么最后加入的组件会显示在最上面。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/main_layout"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="350dp"
        android:height="350dp"
        android:layout_gravity="center"
        android:background="#F44336"/>
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="300dp"
        android:height="300dp"
        android:layout_gravity="center"
        android:background="#E91E63"/>
    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="250dp"
        android:height="250dp"
        android:layout_gravity="center"
        android:background="#9C27B0"/>
    <TextView
        android:id="@+id/tv4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="200dp"
        android:height="200dp"
        android:layout_gravity="center"
        android:background="#673AB7"/>
    <TextView
        android:id="@+id/tv5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="150dp"
        android:height="150dp"
        android:layout_gravity="center"
        android:background="#3F51B5"/>
    <TextView
        android:id="@+id/tv6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="100dp"
        android:height="100dp"
        android:layout_gravity="center"
        android:background="#03A9F4"/>

</FrameLayout>