在开发android的过程中,绘制Ui往往会用到各种布局
LinearLayout、RelativeLayout、FrameLayout、AbsoluteLayout、百分比布局
因为写这个文章的时候我也只是学了一点皮毛,外加上我也是学一点记一点,所以有不对的以后再改
Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列,就组成了用户所看见的界面。

所有的布局方式都可以归类为ViewGroup的5个类别,即ViewGroup的5个直接子类。其它的一些布局都扩展自这5个类。
- LinearLayout,线性布局
这个是我接触android开发的时候接触到的第一个布局,教学的时候所有的自动布局都要改成这个,因为它真的很简单
首先线性就是字面意思,所有的控件都呈线状排列,不是竖着就是横着,每个元素占一列
LinearLayout有一个专有属性,就是android:orientation,就是通过它来调整界面是横着排列还是竖着排列
horizontal(从左到右 )、vertical(从上到下)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
这里省略5个Button的代码
</LinearLayout>
这是两个模式的区别

需要注意的是,如果你设置了horizontal,那么内部控件就不能设置为match_patent,因为那样会单独一个控件会填满整个宽度,从而导致其他控件没地方放,vertical同理
- RelativeLayout,相对布局
相对布局也是一个非常常用的布局,RelativeLayout按照各子元素之间的位置关系完成布局。在此布局中的子元素里与位置相关的属性将生效。
例如android:layout_below, android:layout_above, android:layout_centerVertical等。注意在指定位置关系时,引用的ID必须在引用之前,先被定义,否则将出现异常。
相对布局默认的父元素是布局本身,所以如果没有设置这个控件时基于某个控件的之前,会基于布局整体排列
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button4"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="进入下一个布局文件"
android:layout_centerInParent="true"/>
</RelativeLayout>

我们再按照要求修改一下,让其他周围的四个按钮围绕着中间的主按钮,把中间的按钮当作父元素,这样就要求每个按钮写上ID
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="使用layout_alignParent(+位置)来定位,比如alignParentTop"/>
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text1"
android:text="使用layout_above设置相对控件的ID上方的,比如BUtton2和3"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text2"
android:text="使用layout_below设置相对控件的ID下方的,比如BUtton5和6"/>
<Button
android:id="@+id/button_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button_4"
android:layout_toLeftOf="@+id/button_4"
android:text="button_2"
/>
<Button
android:id="@+id/button_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button_4"
android:layout_toRightOf="@+id/button_4"
android:text="button_3"
/>
<Button
android:id="@+id/button_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="进入下一个布局文件"
/>
<Button
android:id="@+id/button_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button_4"
android:layout_toLeftOf="@+id/button_4"
android:text="button_5"
/>
<Button
android:id="@+id/button_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button_4"
android:layout_toRightOf="@+id/button_4"
android:text="button_6"
/>
</RelativeLayout>
就会如下图所示:

- rameLayout,帧布局
帧布局,所有控件都会默认摆放在左上角
FrameLayout是五大布局中最简单的一个布局,可以说成是层布局方式。在这个布局中,整个界面被当成一块空白备用区域,所有的子元素都不能被指定放置的位置,它们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的子元素之上,将前面的子元素部分和全部遮挡。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text3_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="这是一个帧布局,所有控件都会默认摆放在左上角"/>
<TextView
android:id="@+id/text3_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginTop="20dp"
android:text="左边的图片加了android:layout_gravity=right"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button_img"
android:layout_gravity="right"
android:src="@mipmap/ic_launcher"
/>
</FrameLayout>

- Percent 百分比布局
首先使用百分比布局是需要添加一个百分比布局库的依赖的,因为android开发团队把它定义在了suppoert库中
在项目的build.gradle文件中,写上(我写文章的时候最新版本就是这个:
implementation 'com.android.support:percent:28.0.0'
记得要Sunc Now一下
就可以编写百分比布局了
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/top_left"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:background="#ff44aacc"
app:layout_heightPercent="20%"
app:layout_widthPercent="70%"
/>
<View
android:id="@+id/top_right"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/top_left"
android:background="#ffe40000"
app:layout_heightPercent="20%"
app:layout_widthPercent="30%" />
<View
android:id="@+id/bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="@+id/top_left"
android:background="#ff00ff22"
app:layout_heightPercent="80%" />
</android.support.percent.PercentRelativeLayout>
外层使用了PercentRelativeLayout,因为百分比布局不是在系统SDK里面的,所以要把完整的包路径写出来
然后还需要定义一个app命名空间,这样百分比布局才创建完成
这里面写了4个按钮,然后使用app.layout_heightPercent和widthPercent修改它们的宽和高
这样是前面我们定义了app命名空间才能使用的,和定义android前缀一样的道理
并用不同的颜色区分不同的按钮
