美文网首页
初识安卓之RelativeLayout相对布局

初识安卓之RelativeLayout相对布局

作者: 拾实 | 来源:发表于2019-01-11 17:29 被阅读0次

    0.前言

    之前简要总结了LinearLayout(线性布局)的一些知识,今天来分享一个更容易满足平时的一些需求的布局方式——RelativeLayout(相对布局)

    1.常用属性

    属性名 意义
    gravity 该组件所含子组件在其内部的对齐方式
    ignoreGravity 若设置为true,该组件将不会受之前父容器gravity设置值的影响

    下面是一些根据 父元素(RelativeLayout) 定位的常用属性:

    属性名 意义
    layout_margin 相对父元素上、下、左、右的偏移值
    layout_marginTop 相对父元素上侧的偏移值
    layout_marginLeft 相对父元素左侧的偏移值
    layout_marginBottom 相对父元素下侧的偏移值
    layout_marginRight 相对父元素右侧的偏移值

    在未设置margin相关的属性时,组件是默认出现在左上方的,特别需要注意的是: 在使用marginBottommarginRight的时候,如果设置的值过小,组件依然会出现在左上方。

    下面的属性也是相对父元素的,设置为true生效:

    属性名 意义
    layout_centerInParent 使组件处于父元素正中心
    layout_centerHorizontal 使组件水平居中
    layout_centerVertical 使组件垂直居中

    对齐方式:

    属性名 意义
    layout_alignParentLeft 左对齐
    layout_alignParentRight 右对齐
    layout_alignParentTop 顶部对齐
    layout_alignParentBottom 底部对齐

    下面是相对兄弟组件定位的属性,这类属性在使用时需指明参考组件的id:

    属性名 意义
    layout_above 相对兄弟组件的上方
    layout_below 相对兄弟组件的下方
    layout_toLeftOf 相对兄弟组件的左侧
    layout_toRightOf 相对兄弟组件的右侧
    layout_alignTop 相对兄弟组件的上边界对齐
    layout_alignBottom 相对兄弟组件的下边界对齐
    layout_alignLeft 相对兄弟组件的左边界对齐
    layout_alignRight 相对兄弟组件的右边界对齐

    上面四种和下面四种是完全不同的属性,举个栗子:

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#00FFFF">
            <Button
                android:id="@+id/test"
                android:layout_centerInParent="true"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="#FF1493" />
            <!--注意下面这两个按钮的不同之处-->
            <Button
                android:layout_alignBottom="@id/test"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="#FF1400" />
            <Button
                android:layout_below="@id/test"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="#0000cd" />
        </RelativeLayout>
    
    preview
    而且我们还可以发现,并不是设置了layout_below的参考组件id,该组件就会出现在参考组件的正下方,而是下方的左侧,若想实现正下方效果,
    还得加个在父元素中水平居中:android:layout_centerHorizontal="true"

    下面是设置内边距的属性,可以个margin系列的属性类比:

    属性名 意义
    padding 上下左右的内边距
    paddingLeft 左侧的内边距
    paddingRight 右侧的内边距
    paddingTop 上侧的内边距
    paddingBottom 下侧的内边距

    举个栗子:

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#00FFFF">
           <TextView
               android:id="@+id/testText"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"  
               android:text="默认的TextView"/>
            <TextView
                android:layout_below="@id/testText"
                android:padding="50dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="改动的TextView"/>
        </RelativeLayout>
    
    preview2

    2.使用相对布局实现一个九宫格效果

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#00FFFF">
            <Button
                android:id="@+id/centerB"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="#000000"
                android:layout_centerInParent="true">
            <Button
                android:id="@+id/leftB"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="#006600"
                android:layout_centerVertical="true"
                android:layout_toLeftOf="@id/centerB"/>
            <Button
                android:id="@+id/rightB"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="#0000cd"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@id/centerB"/>
            <Button
                android:id="@+id/topB"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="#FF1493"
                android:layout_centerHorizontal="true"
                android:layout_above="@id/centerB" />
            <Button
                android:id="@+id/bottomB"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="#4169E1"
                android:layout_centerHorizontal="true"
                android:layout_below="@id/centerB"/>
            <Button
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="#F8F8FF"
                android:layout_above="@id/leftB"
                android:layout_toLeftOf="@id/topB"/>
            <Button
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="#ff0000"
                android:layout_below="@id/leftB"
                android:layout_toLeftOf="@id/bottomB"/>
            <Button
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="#ffff00"
                android:layout_above="@id/rightB"
                android:layout_toRightOf="@id/topB"/>
            <Button
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="#00ff00"
                android:layout_below="@id/rightB"
                android:layout_toRightOf="@id/bottomB"/>
        </RelativeLayout>
    
    preview3

    如有错误,欢迎指正~

    相关文章

      网友评论

          本文标题:初识安卓之RelativeLayout相对布局

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