美文网首页Android开发
Android RelativeLayout布局

Android RelativeLayout布局

作者: KingWorld | 来源:发表于2020-09-28 09:35 被阅读0次
    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 LinearLayout布局
    Android RelativeLayout布局
    Android ConstraintLayout布局
    Android 自定义布局

    相关文章

      网友评论

        本文标题:Android RelativeLayout布局

        本文链接:https://www.haomeiwen.com/subject/hqmluktx.html