MOMO173
人可能在奔溃的边缘
MOMO
android布局

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

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

所有的布局方式都可以归类为ViewGroup的5个类别,即ViewGroup的5个直接子类。其它的一些布局都扩展自这5个类。

  1. 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同理

  1. 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

  1. 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

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

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

https://secure.gravatar.com/avatar/5967493088983a79f7ef15e91c8e0598?s=256&d=mm&r=g

momo

文章作者

MOMO

android布局
在开发android的过程中,绘制Ui往往会用到各种布局 LinearLayout、RelativeLayout、FrameLayout、AbsoluteLayout、百分比布局 因为写这个文章的时候我也只是学了一点皮毛,外加上我也是学…
扫描二维码继续阅读
2019-04-25
其他操作
关注我