RelativeLayout相对布局

在开发安卓项目中，RelativeLayout相对布局也是经常会用到的布局！使用RelativeLayout相对布局来布局的页面虽然灵活，但是属性之间也容易产生冲突。

 

一、TableLayout概念：

RelativeLayout相对布局允许子元素指定它们相对于其父元素或兄弟元素的位置，这是实际布局中最常用的布局方式之一。相对布局和LinearLayout，FrameLayout相比较来说，性能不是最好的，但是它可以大大减少布局的结构层次，从而达到优化布局的效果，它的灵活性大很多，当然属性也多，属性之间产生冲突的的可能性也大，使用相对布局时要多做些测试。

 

二、RelativeLayout的基本属性:

1、gravity设置容器内组件的显示位置，居中，上下左右都可以；

2、ignoreGravity设置了该属性为true的属性的组件，将不受gravity属性的影响。

3、layout_alignParentStart设置是否紧贴父布局开始的位置

4、layout_alignParentEnd=设置是否紧贴父布局结束的位置

5、layout_toStartOf设置位于某个id控件的开始位置

6、layout_toEndOf设置位于某个id控件的结束位置

7、layout_alignStart设置和某个id的控件的开始位置位于一条线上

8、layout_alignEnd设置和某个id的控件的结束位置位于一条线上

9、layout_alignWithParentIfMissing如果找不到其他子控件，就相对于父控件布

 

三、根据父容器定位属性：

1、alignParentTop贴紧父元素的上边缘；

2、alignParentButton贴紧父元素的下边缘；

3、alignParentLeft贴紧父元素的左边缘；

4、alignParentRight贴紧父元素的右边缘；

5、layout_centerHorizontal水平居中；

6、layout_centerVerical垂直居中；

7、layout_centerInParent相对于父元素完全居中；

 

例子：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp">
    <Button
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:text="左上角"
        android:background="@color/colorAccent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"/> <!-- 左边缘+上边缘=贴紧父元素的左上角边缘位置 -->
    <Button
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:text="右上角"
        android:background="@color/colorAccent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"/><!-- 右边缘+上边缘=贴紧父元素的右上角边缘位置 -->
    <Button
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:text="左下角"
        android:background="@color/colorAccent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"/><!-- 左边缘+下边缘=贴紧父元素的左下角边缘位置 -->
    <Button
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="@color/colorAccent"
        android:text="右下角"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"/><!-- 右边缘+下边缘=贴紧父元素的右下角边缘位置 -->
    <Button
        android:id="@+id/center"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="@color/colorAccent"
        android:text="中间居中"
        android:layout_centerInParent="true"/><!-- 相对父布局中间居中位置 -->

    <Button
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="@color/colorAccent"
        android:text="垂直居中"
        android:layout_centerVertical="true"/> <!-- 相对父布局垂直居中位置 -->
    <Button
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="@color/colorAccent"
        android:text="水平居中"
        android:layout_centerHorizontal="true"/> <!-- 相对父布局水平居中位置 -->
</RelativeLayout>

页面效果：

四、根据兄弟组件定位属性：

1、layout_above参考组件的上方；2、layout_below参考组件下方；

3、layout_toLeftOf参考组件的左边；4、layout_toRightOf参考组件的右边；

5、layout_anlignTop对齐参考组件的上边缘；6、layout_alignButtom对齐参考组件的下边缘；

7、layout_alignLeft对齐参考组件的左边缘；8、layout_alignRight对齐参考组件的右边缘；

例子：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="400dp">
    <Button
        android:id="@+id/but1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:text="参考"
        android:background="@color/colorAccent"
        android:layout_centerInParent="true" /><!--参考的按钮相对于父元素完全居中-->
    <Button
        android:id="@+id/but2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:text="参考左边"
        android:background="@color/colorgreen"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/but1"/><!--参考组件的左方-->
    <Button
        android:id="@+id/but3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:text="参考右边"
        android:background="@color/colorgreen"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/but1"/><!--参考组件的右方-->
    <Button
        android:id="@+id/but4"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/colorgreen"
        android:text="参考上面"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/but1"/><!--参考组件的上方-->
    <Button
        android:id="@+id/but5"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/colorgreen"
        android:text="参考下面"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/but1"/><!--参考组件的下方-->
    <Button
        android:id="@+id/but6"
        android:layout_width="50dp"
        android:layout_height="35dp"
        android:background="@color/colorPrimary"
        android:text="对齐参考上边"
        android:layout_centerHorizontal="true"
        android:layout_alignTop="@id/but1"/><!--对齐参考组件的上边缘-->
    <Button
        android:id="@+id/but7"
        android:layout_width="50dp"
        android:layout_height="35dp"
        android:background="@color/colorPrimary"
        android:text="对齐参考下边"
        android:layout_centerHorizontal="true"
        android:layout_alignBottom="@id/but1"/><!--对齐参考组件的下边缘-->
    <Button
        android:id="@+id/but8"
        android:layout_width="30dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        android:text="对齐参考左边"
        android:layout_centerVertical="true"
        android:layout_alignLeft="@id/but1"/><!--对齐参考组件的左边缘-->
    <Button
        android:id="@+id/but9"
        android:layout_width="30dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        android:text="对齐参考左边"
        android:layout_centerVertical="true"
        android:layout_alignRight="@id/but1"/><!--对齐参考组件的右边缘-->
</RelativeLayout>

页面效果：

五、margin偏移和padding填充属性

layout_marginBottom离某元素底边缘的距离

layout_marginLeft离某元素左边缘的距离

layout_marginRigh离某元素右边缘的距离

layout_marginTop离某元素上边缘的距离

例子：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="400dp">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="400dp">
        <Button
            android:id="@+id/but1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="margin外边距"
            android:background="@color/colorAccent"
            android:layout_marginTop="100dp"
            android:layout_marginBottom="100dp"
            android:layout_marginLeft="100dp"
            android:layout_marginRight="100dp"/><!--给组件设置上下左右为100dp的外边距-->
    </RelativeLayout>
</RelativeLayout>

页面效果：

注意：padding填充用法跟margin偏移用法也是一样，将layout_marginLeft的margin替换成padding即可；只不过padding是填充效果！