Android RelativeLayout布局

2020-09-28 本文已影响0人 KingWorld

1、基本属性
    gravity :设置容器内组件的对齐方式
    ignoreGravity : 设置该属性为true的组件，将不受gravity属性的影响

2、根据父容器定位
    layout_alignParentLeft : 左对齐
    layout_alignParenRight : 右对齐
    layout_alignParentTop : 顶部对齐
    layout_alignParentButtom : 底部对齐
    android:layout_centerHorizontal :水平居中
    android:layout_centerVertical : 垂直居中
    android:layout_centerInParent : 中间位置

3、根据兄弟组件定位
    layout_toLeftOf : 参考组件的左边
    layout_toRightOf: 参考组件的左边
    layout_above : 参考组件的上方
    layout_below : 参考组件的下方
    layout_alignTop ：对齐参考组件的上边界
    layout_alignBottom : 对齐参考组件的下边界
    layout_alignLeft: 对齐参考组件的左边界
    layout_alignRight : 对齐参考组件的右边界

4、margin（偏移）
    设置组件与父容器的边界
    layout_margin 设置组件上下左右的偏移量
    layout_marginLeft 设置组件离左边的偏移量
    layout_marginRight 设置组件离右边的偏移量
    layout_marginTop 设置组件离上面的偏移量
    layout_marginButtom 设置组件离下面的偏移量

5、padding（填充）
    设置组件内部元素间的边距（比如TextView里的字体位置）
    android:padding 往内部元素的上下左右填充一定边距
    paddingLeft 往内部元素的左边填充一定边距
    paddingRight 往内部元素的右方填充一定边距
    paddingTop 往内部元素的上方填充一定边距
    paddingBottom 往内部元素的下发填充一定边距

1. RelativeLayout类

相对布局（RelativeLayout）将子视图以相对位置显示。默认显示在父视图的左上角。

layout_alignParentTop，父视图的上边
layout_alignParentBottom，父视图的下边
layout_alignParentLeft，父视图的左边
layout_alignParentRight，父视图的右边

设置4个子视图在边角位置。

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

    <!-- 左上角显示 -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="Default"
        android:gravity="center"
        android:background="#ffa6a5aa"/>
    <!-- 右上角显示 -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:text="Right"
        android:gravity="center"
        android:background="#ffa6a5aa"/>
    <!-- 左下角显示 -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:text="Bottom"
        android:gravity="center"
        android:background="#ffa6a5aa"/>
    <!-- 右下角显示 -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="Right|Bottom"
        android:gravity="center"
        android:background="#ffa6a5aa"/>
</RelativeLayout>

效果如下

这里写图片描述

2. 居中显示

layout_centerXX可以在父视图内居中显示

layout_centerInParent，相对于父视图完全居中
layout_centerHorizontal，相对于父视图水平居中
layout_centerVertical，相对于父视图垂直居中

可以配合alignParentXX使用

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

    <TextView
        android:layout_width="120dp"
        android:layout_height="40dp"
        android:text="centerInParent"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_centerInParent="true"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="40dp"
        android:text="centerHorizontal"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="40dp"
        android:text="alignParentBottom"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="40dp"
        android:text="centerVertical"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_centerVertical="true"/>

    <TextView
        android:layout_width="120dp"
        android:layout_height="40dp"
        android:text="alignParentRight"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

效果如下

这里写图片描述

3. 相对视图对齐

layout_above，视图的下边与相对视图的上边对齐
layout_below，视图的的上边与相对视图的下边对齐
layout_toRightOf，视图的左边与相对视图的右边对齐
layout_toLeftOf，视图的右边与相对视图的左边对齐

设置的子视图的相对位置，

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

    <TextView
        android:id="@+id/tv_center"
        android:layout_width="150dp"
        android:layout_height="60dp"
        android:layout_centerInParent="true"
        android:text="center"
        android:background="#ffffcc00"
        android:gravity="center" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="above"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_above="@id/tv_center"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="below"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_below="@id/tv_center"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="toRightOf"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_toRightOf="@id/tv_center"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="toLeftOf"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_toLeftOf="@id/tv_center"/>

</RelativeLayout>

效果如下

在这里插入图片描述

4. 边对齐

layout_alignTop，视图与基准视图的上边对齐
layout_alignBottom：视图与基准视图的下边对齐
layout_alignLeft：视图与基准视图的左边对齐
layout_alignRight：视图与基准视图的右边对齐
layout_alignBaseline：视图与基准视图的基准线对齐

设置的子视图某条边的对齐方式，

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

    <TextView
        android:id="@+id/tv_center"
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:text="center"
        android:textSize="32sp"
        android:background="#ffffcc00"
        android:gravity="center" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="20dp"
        android:text="alignTop"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_alignTop="@id/tv_center"/>

    <TextView
        android:layout_width="60dp"
        android:layout_height="20dp"
        android:text="alignBottom"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_alignBottom="@id/tv_center"/>

    <TextView
        android:layout_width="60dp"
        android:layout_height="20dp"
        android:text="alignLeft"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_alignLeft="@id/tv_center"/>

    <TextView
        android:layout_width="60dp"
        android:layout_height="20dp"
        android:text="alignRight"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_alignRight="@id/tv_center"/>

    <TextView
        android:layout_width="60dp"
        android:layout_height="20dp"
        android:text="alignBaseline"
        android:gravity="center"
        android:background="#ffa6a5aa"
        android:layout_alignBaseline="@id/tv_center"/>

</RelativeLayout>

效果如下

在这里插入图片描述

Android RelativeLayout布局

1. RelativeLayout类

2. 居中显示

3. 相对视图对齐

4. 边对齐

猜你喜欢

热点阅读