今天来学习下RelativeLayout布局

新建RelativeActivity，并且打开布局更改根布局如下

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".main.RelativeActivity"> </RelativeLayout>

RelativeLayout控制子控件有下面几个常用属性,其值分别为false 或者true

android:layout_alignParentTop=”” 子控件与顶部居左对齐

android:layout_alignParentBottom=”” 子控件与底部居左对齐

android:layout_alignParentLeft=”” 子控件居左

android:layout_alignParentRight=”” 子控件居右

android:layout_centerInParent=”” 子控件居中

android:layout_centerHorizontal=”” 子控件水平居中

android:layout_centerVertical=”” 子控件垂直居中
android:layout_above=”” 子控件在某个控件之上 值为控件id
android:layout_below=”” 子控件在某个控件之下 值为控件id
android:layout_toLeftOf=”” 子控件在某个控件的左边 值为控件id
android:layout_toRightOf=”” 子控件在某个控件的右边 值为控件id
android:layout_alignTop=”” 子控件与某个控件顶部对齐

android:layout_alignBottom=”” 子控件与某个控件顶部对齐
android:layout_alignLeft=”” 子控件与某个控件左边对齐
android:layout_alignRight=”” 子控件与某个控件右边对齐

下面来演示一下，上下左右居中，四个脚各放置一个button,中间再放置一个button

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".main.RelativeActivity"> <androidx.appcompat.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:textAllCaps="false" android:text="Left Top" android:textSize="24sp" /> <androidx.appcompat.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:textAllCaps="false" android:text="Right Top" android:textSize="24sp" /> <androidx.appcompat.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentBottom="true" android:textAllCaps="false" android:text="Left Bottom" android:textSize="24sp" /> <androidx.appcompat.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:textAllCaps="false" android:text="Right Bottom" android:textSize="24sp" /> <androidx.appcompat.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Center" android:textAllCaps="false" android:textSize="24sp" /> </RelativeLayout>

效果显示如下，当然也可以用上节课提到的FrameLayout 实现

接下来我们试下layout_above 和layout_below

测试代码如下

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".main.RelativeActivity"> <androidx.appcompat.widget.AppCompatButton android:id="@+id/center_button_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Center" android:textAllCaps="false" android:textSize="24sp" /> <androidx.appcompat.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/center_button_view" android:layout_centerHorizontal="true" android:text="Center Above" android:textAllCaps="false" android:textSize="24sp" /> <androidx.appcompat.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_below="@id/center_button_view" android:text="Center Below" android:textAllCaps="false" android:textSize="24sp" /> </RelativeLayout>

显示效果如下

然后我们可以设置上面的按钮与中间的按钮右对齐，下面的按钮与中间的按钮左对齐

测试代码如下

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".main.RelativeActivity"> <androidx.appcompat.widget.AppCompatButton android:id="@+id/center_button_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Center" android:textAllCaps="false" android:textSize="24sp" /> <androidx.appcompat.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/center_button_view" android:text="Center Above" android:layout_alignRight="@id/center_button_view" android:textAllCaps="false" android:textSize="24sp" /> <androidx.appcompat.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/center_button_view" android:layout_alignLeft="@id/center_button_view" android:text="Center Below" android:textAllCaps="false" android:textSize="24sp" /> </RelativeLayout>

效果如下

我们也可以设置上面的按钮放到中间按钮左边，下面按钮放到中间按钮右边

测试代码如下

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".main.RelativeActivity"> <androidx.appcompat.widget.AppCompatButton android:id="@+id/center_button_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Center" android:textAllCaps="false" android:textSize="24sp" /> <androidx.appcompat.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Center Above" android:layout_toLeftOf="@id/center_button_view" android:layout_centerInParent="true" android:textAllCaps="false" android:textSize="24sp" /> <androidx.appcompat.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/center_button_view" android:text="Center Below" android:layout_centerInParent="true" android:textAllCaps="false" android:textSize="24sp" /> </RelativeLayout>

显示效果如下

我们可以看到由于文字太长，控件太小导致按钮变高了，现在我们让左边的按钮与中间的按钮上面对齐，也就是左边的按钮顶部参考中间按钮，右边按钮底部参考中间按钮

测试代码如下

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".main.RelativeActivity"> <androidx.appcompat.widget.AppCompatButton android:id="@+id/center_button_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Center" android:textAllCaps="false" android:textSize="24sp" /> <androidx.appcompat.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Center Above" android:layout_toLeftOf="@id/center_button_view" android:layout_centerInParent="true" android:layout_alignTop="@id/center_button_view" android:textAllCaps="false" android:textSize="24sp" /> <androidx.appcompat.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/center_button_view" android:text="Center Below" android:layout_centerInParent="true" android:layout_alignBottom="@id/center_button_view" android:textAllCaps="false" android:textSize="24sp" /> </RelativeLayout>

显示效果如下

总之，RelativeLayout 是一个功能非常强大的布局，属性也比较多。需要初学者多去练习，才能掌握布局技巧。项目中，基本上不会只使用一种布局，很多时候，都是各个布局结合起来，一起使用，进行嵌套。下节开始讲解ConstraintLayout,全新替代RelativeLayout的一种布局。

我是tibbytang 7年android开发经验，关注我，学习更多Android开发知识。