Android开发基本的四个布局（Android学习笔记之第三课）

Android基本的四个布局

---

前言

Android 中的几种常用布局有：绝对布局、相对布局、线性布局、表格布局、帧布局和约束布局等，本文讲述其中的线性布局、相对布局和帧布局以及百分比布四个基础布局。

View和ViewGroup的关系

从上图中可以看到，View是被包裹在ViewGroup容器中的，而ViewGroup中既可以包含View，也可以包含ViewGroup，实现嵌套。

---

一、线性布局（LinearLayout）

如名称所示，线性布局可以线性排列布局中包含的视图。换句话说，线性布局可以将其它视图水平或垂直排列为一行。在此之前，我们始终会在其中放置控件，因为此布局通常不会在控件之间重叠。

1、代码演示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="1"/>
    <Button
        android:id="@+id/button_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="2"/>
    <Button
        android:id="@+id/button_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="3"/>
</LinearLayout>

2、截图展示

3、属性说明

①特有属性：
orientation：该属性用于指定布局中的排列方式，有两种：horizontal水平布局，vertical垂直布局。默认使用水平布局方式。
layout_weight：该属性表示权重，除去被显示占据的空间以外的空间，然后根据权重的大小来分配空间，使用权重通常会把分配该权重方向的宽度设置为0dp，如果未设置0dp，则该空间会占据指定的宽度。
②常用属性：
id：为组件定义唯一指定标识符，不可重复，方便在Activity中通过id进行获取该控件；
layout_width：指定布局宽度，通常有两种选项：wrap_content表示自动包裹，控件实际宽度。match_parent：填充父容器宽度。
layout_height：指定布局高度，值选项同layout_width一样。
gravity：指定布局容器包含的子控件的对齐方式。可选值包括：left、right、center。
layout_gravity：该属性用于指定
layout_margin：外边距，布局或者控件距离外部元素的边距。通常设置一个具体的值。
layout_padding：内边距，布局或者控件距离内部子控件的边距，通常设置一个具体的值。

二、相对布局（RelativeLayout）

RelativeLayout 是一个以相对位置显示子视图的视图组。每个视图的位置可以指定为相对于同级元素的位置（例如，在另一个视图的左侧或下方）或相对于父级RelativeLayout 区域的位置（例如在底部、左侧或中心对齐）。
RelativeLayout是一个功能非常强大的界面设计实用工具，因为它可以消除嵌套视图组并使布局层次结构保持扁平化，从而提高性能。如果您发现自己使用了多个嵌套的 LinearLayout 组，只需用一个 RelativeLayout 就可以替换它们。

1、代码演示

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       android:layout_centerInParent="true"
        android:text="1"/>
    <Button
        android:id="@+id/button_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button_1"
        android:layout_toLeftOf="@+id/button_1"
        android:text="2"/>
    <Button
        android:id="@+id/button_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button_1"
        android:layout_toRightOf="@+id/button_1"
        android:text="3"/>
</RelativeLayout>

2、效果截图

3、属性说明

1、相对于容器（父布局）的属性： layout_centerVertical：设置是否相对于父布局垂直居中，属性值为true layout_centerHorizontal：设置是否相对于父布局水平居中，属性值为true
layout_centerInParent：设置是否相对于父布局居中（水平和垂直方向都均居中），属性值为true
layout_alignParentTop：设置在父布局的顶部，属性值为true
layout_alignParentBottom：设置在父布局的底部，属性值为true
layout_alignParentRight：设置在父布局的右侧，属性值为true
layout_alignParentLeft：设置在父布局的左侧，属性值为true
layout_alignParentStart：设置在父布局开始的位置，属性值为true
layout_alignParentEnd：设置在父布局结束的位置，属性值为true
2、子控件之间的相对位置属性：
layout_above：组件位于某个组件的上方，属性值为另外一个控件的唯一资源id layout_below：某个组件的下方，属性值同上
layout_toLeftOf：某个组件的左侧，属性值同上 layout_toRightOf：某个组件的右侧，属性值同上
layout_alignTop：和某个组件上方对齐，属性值为另外一个子控件的唯一资源id
layout_alignBottom：和某个组件下方对齐，属性值同上 layout_alignLeft：和某个组件左侧对齐，属性值同上
layout_alignRight：和某个组件右侧对齐，属性值同上
3、其他特殊属性
ignoreGravity：忽略容器中的某个组件，使其不受RelativeLayout的空置，属性值是某个控件的唯一资源id
gravity：设置内部子控件的显示位置。属性值可以是center_horizonta、top、bottom、left等其中的一个值或者两个值。

三、帧布局（FrameLayout）

帧布局是比较简单的布局方式，所有的控件层叠显示，默认放在屏幕的左上角，最先添加的控件放在最底层，后添加的控件在先添加的控件上面。

1、代码演示

<?xml version="1.0" encoding="utf-8"?>
<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:layout_height="wrap_content"
      android:layout_gravity="left"
      android:text="我爱CSDN"
      android:textSize="40sp"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:src="@mipmap/ic_launcher"/>
</FrameLayout>

2、效果截图

3、特别说明

1、帧布局的特点是控件层叠显示，默认从布局容器的左上角摆放。
2、子控件摆放顺序：先添加的控件放在最底层，后添加的子控件放在上层。
3、可以通过layout_gravity属性修改FrameLayout的子控件摆放位置。
4、使用场景：相较于LinearLayout和RelatvieLayout，FrameLayout适用场景较少，适合用于重叠布局显示的情景。

四、百分比布局（PercentFrameLayout）

1、添加内容

打开app/build.gradle文件，在dependencies闭包中添加以下内容：

implementation 'androidx.percentlayout:percentlayout:1.0.0'

然后点击右上方的Sync Now，然后gradle会开始进行同步，把我们新添加的百分比布局库引入到项目当中。

2、代码演示

<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentFrameLayout 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"
    >

 <Button
     android:id="@+id/button1"
     android:text="Button 1"
     android:layout_gravity="left|top"
     app:layout_widthPercent="50%"
     app:layout_heightPercent="50%"
     />

 <Button
     android:id="@+id/button2"
     android:text="Button 2"
     android:layout_gravity="right|top"
     app:layout_widthPercent="50%"
     app:layout_heightPercent="50%"
     />

 <Button
     android:id="@+id/button3"
     android:text="Button 3"
     android:layout_gravity="left|bottom"
     app:layout_widthPercent="50%"
     app:layout_heightPercent="50%"
     />

 <Button
     android:id="@+id/button4"
     android:text="Button 4"
     android:layout_gravity="right|bottom"
     app:layout_widthPercent="50%"
     app:layout_heightPercent="50%"
     />
</androidx.percentlayout.widget.PercentFrameLayout>

3、效果截图

4、属性说明

layout_widthPercent : 用百分比来表示宽度，比如：app:layout_widthPercent=“25%” layout_heightPercent : 用百分比来表示高度 layout_marginPercent : 用百分比来表示 Margin
其余的是用百分比来表示每个 margin 面 layout_marginLeftPercent,
layout_marginRightPercent,layout_marginTopPercent,
layout_marginBottomPercent,
layout_marginStartPercent,layout_marginEndPercent

总结

看完记得点赞哦，博主会继续努力的。