android布局

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

https://i.loli.net/2019/04/25/5cc0a2a5b8adf.jpg

所有的布局方式都可以归类为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>

这是两个模式的区别

https://i.loli.net/2019/04/25/5cc0a642a66f2.png

需要注意的是，如果你设置了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>

https://i.loli.net/2019/04/25/5cc0a8ddf2238.png

我们再按照要求修改一下，让其他周围的四个按钮围绕着中间的主按钮，把中间的按钮当作父元素，这样就要求每个按钮写上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>

就会如下图所示：

https://i.loli.net/2019/04/25/5cc0a954b0568.png

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>

https://i.loli.net/2019/04/25/5cc0aa633ee10.png

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前缀一样的道理
并用不同的颜色区分不同的按钮

momo

文章作者