相对布局(RelativeLayout)也是一种非常常用的布局。和线性布局的排列规则有许多不同,相对布局更加随意,它可以通过相对定位的方式让控件出现在布局的任何位置。也正是如此,相对布局的属性非常多,幸好,这些属性都是有规律可循的,不至于让我们太难的理解和记忆。下面通过实战来体会:
activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:text="按钮1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/button2"
android:text="按钮2"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/button3"
android:text="按钮3"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/button4"
android:text="按钮4"
android:layout_width="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/button5"
android:text="按钮5"
android:layout_width="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_height="wrap_content"/>
</RelativeLayout>
效果图:
经过前面的学习,现在看这段代码是不是没有那么费力啦,我们让Button1和父布局的左上角对齐,Button2和父布局的右上角对齐,Button3居中显示,Button4和父布局的左下角对齐,Button5和父布局的右下角对齐。虽然这些属性我们之前没有见过,不过正所谓“见名知意”,当看到他们的名字的时候就已经大概了解他们的作用。
上面的例子是相对于父布局进行定位的,那可不可以对相对于控件进行定位呢?当然是没任何问题的,重新修改activi——main.xml中的代码。
`<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button3"
android:text="按钮3"
android:layout_above="@id/button3"
android:layout_toRightOf="@id/button3"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮1"
android:layout_above="@id/button3"
android:layout_toLeftOf="@id/button3" />
<Button
android:id="@+id/button2"
android:text="按钮2"
android:layout_above="@id/button3"
android:layout_toRightOf="@id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/button4"
android:text="按钮4"
android:layout_below="@id/button3"
android:layout_toLeftOf="@id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/button5"
android:text="按钮5"
android:layout_below="@id/button3"
android:layout_toRightOf="@id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
效果图:
这里的android:layout_above属性可以让一个控件位于另一个控件的上方,需要为这个属性指定相对控件的引用,这里我们填入了@id/button3,表示该控件位于另一个控件的上方,其他属性相似,android:layout_left0f表示让一个控件位于另一个控件的左侧,其他属性相似
相对布局中还有另外一组相对于控件进行定位的属性layout_alignLeft表示让一个控件的左边缘和另一个控件的左边缘对齐,其他的也跟此类似。
帧布局
帧布局(FrameLayout)它相比于前两种布局就简单太多了,因此应用场景也少了很多。这种布局没有方便的定位方式,所有控件都会默认摆放在布局的左上角。下面通过实战体验下:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:id="@+id/text_view"
android:text="这是一个文本"
android:layout_height="wrap_content"/>
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
</FrameLayout>
*效果图:
可以看到后面添加的图片覆盖了前面的文字,我们可以通过layout_gravity属性来指定控件在布局的对齐方式,这和LinearLayout中的布局方式是相似的,修改上面代码:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:id="@+id/text_view"
android:layout_gravity="right"
android:text="这是一个文本"
android:layout_height="wrap_content"/>
<ImageView
android:id="@+id/image_view"
android:layout_gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
</FrameLayout>
重新运行: