应用程序中,页面时人机交互的媒介,界面中控件的合理摆放排列能带来更好的用户体验,控件的摆放位置是由布局管理器来进行管理,常见的布局管理器有LinearLayout(线性布局)、RelativeLayout(相对布局)、ConstraintLayout (约束布局)等,Android Studio默认创建的Activity为ConstraintLayout类型的布局方式,如果需要使用其他类型的布局方式,只需要把布局标签中指定布局方式的代码改为需要的布局即可。
LinearLayout
LinearLayout即线性布局,该类布局有水平垂直两种布局方式,布局内的控件分别按照水平、垂直两种方式进行排列。
实例需求
在一个垂直的线性布局中嵌套一个水平布局和一个垂直布局,两个布局均分屏幕区域,并且在两个布局中分别添加两个Button控件,水平线性布局的Button控件在该布局的底部中间位置显示,垂直线性布局的Button在该布局的右侧中部位置显示。
实例代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FFA07A"
android:orientation="horizontal"
android:gravity="center|bottom">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#AEEEEE"
android:orientation="vertical"
android:gravity="center|right">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button4"/>
</LinearLayout>
</LinearLayout>
属性详解
- <LinearLayout></LinearLayout>:该对标签确定了一个线性布局,在头标签中可编写添加属性代码,在这对标签中可以嵌套布局或添加控件。
- layout_width:该属性指定了布局的宽度,取值一般有三种:match_parentp:与父容器同宽、warp_content:由控件内容撑起宽度、具体数值指定宽度,单位为"dp"
- layout_height:该属性指定了布局的高度,取值一般有三种:match_parentp:与父容器同高、warp_content:由控件内容撑起高度、具体数值指定高度,单位为"dp"
- layout_weight:设置权重,即当前布局的高或宽占父容器剩余宽/高的比值(实例中嵌套的两个线性布局高度都设置为"0dp",再设置其layout_weight为"1",即父容器高度均分两份,两个线性布局各占一份,实现均分高度的效果)
- orientation:该属性用于指定线性布局的布局方式,取值有两种:horizontal:水平线性布局、vertical:垂直线性布局
- gravity:设置布局内元素/控件的对齐方式,(在水平线性布局中其属性值格式为:水平对齐方式 | 垂直对齐方式,在垂直线性布局中其属性值格式为:垂直对齐方式 | 水平对齐方式,如果只指定一个只,即水平、垂直对齐方式都为该的对齐方式)
演示效果
RelativeLayout
RelativeLayout表示相对布局,顾名思义,相对布局就是指该布局中的元素/控件的位置是相对于父容器和兄弟控件来确定的,与线性布局不同的是,该布局下确定一个控件的代码是在控件内部编写,而不是在布局头标签中确定,控件的位置也是有水平和垂直两个方向来确定,控件的水平位置默认为:靠左排列、垂直位置默认为:靠顶部排列(即:在相对布局中,若不指定一个控件的位置,该控件默认显示在布局的左上方,并且多个控件不指定位置,会呈现层叠、覆盖现象,若只指定水平方向位置,其垂直方向会显示在屏幕顶部,只指定垂直方向位置,水平位置会显示在屏幕左侧)。
实例需求
使用相对布局,将四个Button控件摆放在屏幕上的四个角上,在屏幕中间摆放一个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"
android:background="#F08080"
tools:context="androidui.RelativeActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
android:layout_alignParentRight="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3"
android:layout_alignParentBottom="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button4"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"/>
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button5"
android:layout_centerInParent="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button6"
android:layout_alignLeft="@+id/button5"
android:layout_above="@+id/button5"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button7"
android:layout_alignRight="@id/button5"
android:layout_below="@+id/button5"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button8"
android:layout_toLeftOf="@+id/button5"
android:layout_alignTop="@+id/button5"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button9"
android:layout_toRightOf="@+id/button5"
android:layout_alignBottom="@+id/button5"/>
</RelativeLayout>
属性详解
- <RelativeLayout></RelativeLayout>:该标签定义了一个相对布局
- layout_alignParentLeft:该属性指定控件位置与父容器的左侧对齐,取值有:true、false
- layout_alignParentRight:该属性指定控件位置与父容器的右侧对齐,取值有:true、false
- layout_alignParentTop:该属性指定控件位置与父容器的顶部对齐,取值有:true、false
- layout_alignParentBottom:该属性指定控件位置与父容器的底部对齐,取值有:true、false
- layout_centerInParent:该属性指定控件显示在父容器的中间位置,即水平垂直都居中,取值有:true、false
- layout_toLeftOf:该属性指定控件在某个控件的左侧,取值为:参照控件的id
- layout_toRightOf:该属性指定控件在某个控件的右侧,取值为:参照控件的id
- layout_above:该属性指定控件在某个控件的上方,取值为:参照控件的id
- layout_below:该属性指定控件在某个控件的下方,取值为:参照控件的id
- layout_alignLeft:该属性指定控件与某个控件的左侧对其,取值为:参照控件的id
- layout_alignRight:该属性指定控件与某个控件的右侧对其,取值为:参照控件的id
- layout_alignTop:该属性指定控件与某个控件的顶部对其,取值为:参照控件的id
- layout_alignBottom:该属性指定控件与某个控件的底部对其,取值为:参照控件的id
演示效果
ok,以上就是最常用的两种布局:LinearLayout(线性布局)、RelativeLayout(相对布局)的使用和属性的解析 ,相对布局的属性相对较多,但是根据其英文意思来理解记忆其实不难。