Android基础#24-1：Android UI-使用LinearLayout或RelativeLayout让三个控件居中平均排列

ゝ一纸荒年。 2023-10-17 12:08 3阅读 0赞

#### 例1: 水平居中： ####

LinearLayout有边距，在LinearLayout中，左中右居中显示三个TextView。

效果图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbGlyYW5rZQ_size_10_color_FFFFFF_t_70_g_se_x_16][]

xml代码：

<?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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/black"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"。   //高度固定100dp
            android:orientation="horizontal"。//横向
            android:layout_margin="30dp"
            android:background="#FFBB86FC"
            >
            <TextView
                android:id="@+id/textview_left"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="10"
                android:text="left"
                android:gravity="center_vertical"
                >
            </TextView>
    
            <TextView
                android:id="@+id/textview_mid"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="10"
                android:text="middle"
                android:gravity="center_vertical"
                >
            </TextView>
            <TextView
                android:id="@+id/textview_right"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="10"
                android:text="right"
                android:gravity="center_vertical"
                >
            </TextView>
        </LinearLayout>
    
    </LinearLayout>

说明：

宽度要和父布局一致，即layout\_width设置为match\_parent；

使用**android:gravity**和**android:layout\_weight**让控件水平居中显示;

分别设置三个TextView的text属性值为“left”，“middle”，“right”；

三个TextView控件都设置layout\_weight属性，并且它们的值都相等，说明平均分配窗口；

#### 例2: 垂直居中： ####

使用**android:gravity**和**android:layout\_weight**让控件居中显示。

效果图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbGlyYW5rZQ_size_10_color_FFFFFF_t_70_g_se_x_16 1][]

xml代码：

只需要修改例子1中的LinearLayout的几个属性即可：

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" //铺满
            android:layout_margin="30dp"
            android:orientation="vertical"。 //纵向
            android:background="#FFBB86FC"

仅仅需要设置layout的属性orientation为vertical就可以了。

#### 例3: RelativeLayout实现左中右排列，模拟app的标题栏。 ####

效果图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbGlyYW5rZQ_size_14_color_FFFFFF_t_70_g_se_x_16][]

xml代码：

<?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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/black"
        >
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_margin="30dp"
            android:orientation="horizontal"
            android:background="#FFBB86FC"
            >
            <TextView
                android:id="@+id/textview_left"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="10"
                android:text="left"
                android:gravity="left"
                android:layout_centerVertical="true"
    
                >
            </TextView>
    
            <TextView
                android:id="@+id/textview_mid"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="10"
                android:text="middle"
                android:gravity="center"
                android:layout_centerVertical="true"
                >
            </TextView>
            <TextView
                android:id="@+id/textview_right"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="10"
                android:text="right"
                android:gravity="right"
                android:layout_centerVertical="true"
                >
            </TextView>
        </RelativeLayout>
    
    </LinearLayout>

分析：

顶层的LinearLayout内部嵌套了RelativeLayout，三个TextView的父布局都是这个RelativeLayout；

android:layout\_centerVertical="true"： 控件垂直居中排列。

--------------------

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbGlyYW5rZQ_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/81578299248646798de8628d313b681d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGlyYW5rZQ==,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbGlyYW5rZQ_size_10_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/76c09a514f82444f8e4a8379cbfb4fbd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGlyYW5rZQ==,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbGlyYW5rZQ_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ba0db0b015da408eab66e5b1f2c0b3dd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGlyYW5rZQ==,size_14,color_FFFFFF,t_70,g_se,x_16