相对布局知识小结

最新推荐文章于 2020-05-01 15:05:13 发布

WindFromFarEast

最新推荐文章于 2020-05-01 15:05:13 发布

阅读量673

点赞数 1

分类专栏： Android

本文链接：https://blog.youkuaiyun.com/xwx617/article/details/55670815

版权

Android 专栏收录该内容

50 篇文章

订阅专栏

本文总结了Android开发中相对布局的相关知识，包括布局的定位原则，详细讲解了位置对齐、方向对齐、父控件边缘对齐、父控件中央对齐以及SDK4.2后引入的头尾对齐特性，并配以xml效果展示。

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

一、什么是相对布局
这里写图片描述
二、为什么要使用相对布局

三、相对布局属性之位置对齐
这里写图片描述

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView 
        android:id="@+id/textView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView01"
        android:background="#ff00ff"
        />

    <!--相对布局属性之位置对齐
    toRightOf：让这个控件的左边缘对齐另一个控件的右边缘
    toLeftOf：让这个控件的右边缘对齐另一个控件的左边缘
    below：让这个控件的上边缘对齐另一个控件的下边缘
    above：让这个控件的下边缘对齐另一个控件的上边缘
    注意@id是引用一个id,@+id是新建一个id,不能弄混
    并且由于TextView01已经在左上角了，因此放在他左边和上边的控件会超出屏幕导致不可见
    -->
    <TextView 
        android:id="@+id/textView02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView02"
        android:background="#0000ff"
        android:layout_toRightOf="@id/textView01"
        />
    <TextView 
        android:id="@+id/textView03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView03"
        android:layout_toLeftOf="@id/textView01"
        android:background="#00ffff"
        />
    <TextView 
        android:id="@+id/textView04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView04"
        android:layout_above="@id/textView01"
        android:background="#00ff00"
        />
    <TextView 
        android:id="@+id/textView05"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView05"
        android:layout_below="@id/textView01"
        android:background="#00ff00"
        />

</RelativeLayout>

xml效果图
这里写图片描述

四、相对布局属性之方向对齐
这里写图片描述

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff00ff"
        android:text="TextView01" />

    <!-- 
        相对布局属性之方向对齐
        alignRight：让这个控件右边缘对齐另一个控件的右边缘
        alignBotton：让这个控件下边缘对齐另一个控件的下边缘
        alignTop
        alignLeft
     -->
    <TextView
        android:id="@+id/textView02"
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:background="#ffff00"
        android:layout_alignRight="@id/textView01"
        android:layout_below="@id/textView01"
        android:text="Text02" />
    <TextView
        android:id="@+id/textView03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:layout_alignBottom="@id/textView02"
        android:text="Text03" />
    <!-- 
        相对布局属性之基准线对齐
        主要是用来让英文字母对齐，基准线就是英文书写中从上到下的第三根线
        alignBaseline：
     -->
    <TextView
        android:id="@+id/textView04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_alignBaseline="@id/textView02"
        android:layout_toRightOf="@id/textView02"
        android:background="#00ff00"
        android:text="Text04" />
</RelativeLayout>

xml效果图
这里写图片描述

五、相对布局属性之父控件边缘对齐
这里写图片描述

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 
        相对布局属性之父控件边缘对齐
        alignParent+Bottom/Right/Left/Top：让这个边缘控件与其父控件的边缘对齐
        注意属性取值为布尔值，不再是id
     -->
    <TextView
        android:id="@+id/textView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView01"
        android:background="#ff00ff"
        android:layout_alignParentRight="true"
         />
    <!-- 
        相对布局的嵌套
     -->
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00ff00"
        android:layout_below="@id/textView01"
        >
        <TextView
        android:id="@+id/textView02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView02"
        android:layout_alignParentRight="true"
        android:background="#ff0000"
         />
    </RelativeLayout>

</RelativeLayout>

xml效果图
这里写图片描述

六、相对布局属性之父控件中央对齐
这里写图片描述

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- 
        相对布局属性之父控件居中对齐
        centerHorizontal：水平居中
        centerVertical：垂直居中
        centerInParent：水平垂直居中
     -->
    <TextView
        android:id="@+id/textView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView01" 
        android:background="#ff00ff"
        android:layout_centerHorizontal="true"
        />
    <TextView
        android:id="@+id/textView02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView02" 
        android:background="#ff0000"
        android:layout_centerVertical="true"
        />
    <TextView
        android:id="@+id/textView03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView03" 
        android:background="#ffff00"
        android:layout_centerInParent="true"
        />

</RelativeLayout>

xml效果图
这里写图片描述

七、相对布局属性之头尾对齐（SDK4.2之后有效）
这里写图片描述

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView01" 
        android:background="#ff00ff"
        />
    <!-- 
        相对布局属性之头部和尾部对齐
        alignEnd：让这个控件尾部和另一个控件的尾部对齐
        alignStart：让这个控件头部和另一个控件的头部对齐
        alignParentEnd：让这个控件尾部和父控件的尾部对齐
        alignParentStart：让这个控件头部和父控件的头部对齐
     -->
    <TextView
        android:id="@+id/textView02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text02" 
        android:background="#00ffff"
        android:layout_below="@id/textView01"
        android:layout_alignEnd="@id/textView01"
        />

</RelativeLayout>

xml效果图
这里写图片描述