相对布局——RealativeLayout,在安卓开发中存在非常大的作用,我们可以使用相对布局来更巧妙的控制我们的控件的摆放。今天我们学习控件基于页面居中,左上,右上,左下,右下,基于居中控件的左上,右上,左下,右下,为了方便学习,这里的控件均采用按钮。
完成页面居中处理,我们要先设置我们的布局设置
<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=".MainActivity">
完成这一步过后,可以通过界面布局完成控件居中
android:layout_centerInParent="true"
为了后续相对布局的继续学习,我们需要将相对控件基于第一位
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="居中"
android:layout_centerInParent="true"
android:textAllCaps="false"
/>
控件基于页面的布局设置,基于这几条设置
android:layout_alignParentTop="true" //页面顶部
android:layout_alignParentBottom="true" //页面底部
android:layout_alignParentLeft="true" //页面左侧
android:layout_alignParentRight="true" //页面右侧
通过这几条设置相互组合即可完成控件基于页面左上、右上、左下、右下
//左上
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
//右上
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"//不设置基于右侧,会自动设置为基于左侧
//左下
android:layout_alignParentBottom="true" //不设置基于底部,会自动设置为基于顶部
android:layout_alignParentLeft="true"
//右下
android:layout_alignParentBottom="true" //不设置基于底部,会自动设置为基于顶部
android:layout_alignParentRight="true" //不设置基于右侧,会自动设置为基于左侧
我们将这些设置运用到控件上
控件基于居中控件,基于这几条设置
android:layout_above="@id/button3" //居中控件顶部
android:layout_below="@id/button3" //居中控件底部
android:layout_toLeftOf="@id/button3" //居中控件左侧
android:layout_toRightOf="@id/button3" //居中控件右侧
通过这几条设置相互组合即可完成控件基于居中控件左上、右上、左下、右下
//基于居中控件左上
android:layout_toLeftOf="@id/button3"
android:layout_above="@id/button3"
//基于居中控件右上
android:layout_toRightOf="@id/button3"
android:layout_above="@id/button3"
//基于居中控件左下
android:layout_toLeftOf="@id/button3"
android:layout_below="@id/button3"
//基于居中控件右下
android:layout_toRightOf="@id/button3"
android:layout_below="@id/button3"
将这些设置运用到控件中
得到了我们想要的控件基于居中控件的左上、右上、左下、右下效果
如果将基于居中控件的设置单独设置上下左右会出现怎样的情况呢?
android:layout_above="@id/button3"
android:layout_below="@id/button3"
android:layout_toLeftOf="@id/button3"
android:layout_toRightOf="@id/button3"
是否会出现出现我们正上,正下,正左,正右吗?
它并没有我们预期的那样存在居中按键的上下左右,反而相当怪异的布局,为什么会出现这样的情况呢?
我们可以在工程文件找到答案
原来是系统简单执行,那我们要怎样才能达到我们预期的效果
那要怎样才可以完成正上,正下,正左,正右呢?我们要将我们上面所学的知识点结合,通过工程文件可以看出,四个控件缺少居中处理,我们加入居中代码处理看看会怎样。
//正上
android:layout_centerInParent="true"
android:layout_above="@id/button3"
//正下
android:layout_centerInParent="true"
android:layout_below="@id/button3"
//正左
android:layout_toLeftOf="@id/button3"
android:layout_centerInParent="true"
//正右
android:layout_toRightOf="@id/button3"
android:layout_centerInParent="true"
通过居中调整,达到了我们预期的期望,完成了正方向的上下左右相对布局
下面贴上完整布局代码以及效果:
<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=".MainActivity">
//居中控件
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="居中"
android:layout_centerInParent="true"
android:textAllCaps="false"
/>
//基于页面四角控件
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="左上"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:textAllCaps="false"
/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="右上"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:textAllCaps="false"
/>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="左下"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:textAllCaps="false"
/>
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="右下"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:textAllCaps="false"
/>
//基于控件四角
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="中左上"
android:layout_toLeftOf="@id/button3"
android:layout_above="@id/button3"
android:textAllCaps="false"
/>
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="中右上"
android:layout_toRightOf="@id/button3"
android:layout_above="@id/button3"
android:textAllCaps="false"
/>
<Button
android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="中左下"
android:layout_toLeftOf="@id/button3"
android:layout_below="@id/button3"
android:textAllCaps="false"
/>
<Button
android:id="@+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="中右下"
android:layout_toRightOf="@id/button3"
android:layout_below="@id/button3"
android:textAllCaps="false"
/>
//基于控件正方向
<Button
android:id="@+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="上"
android:layout_centerInParent="true"
android:layout_above="@id/button3"
android:textAllCaps="false"
/>
<Button
android:id="@+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="下"
android:layout_centerInParent="true"
android:layout_below="@id/button3"
android:textAllCaps="false"
/>
<Button
android:id="@+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="左"
android:layout_toLeftOf="@id/button3"
android:layout_centerInParent="true"
android:textAllCaps="false"
/>
<Button
android:id="@+id/button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="右"
android:layout_toRightOf="@id/button3"
android:layout_centerInParent="true"
android:textAllCaps="false"
/>
</RelativeLayout>
相对布局的学习目前就这么多了,学无止境,继续努力
大家一起学习努力