Android 学习笔记: 三种基本布局的使用介绍

一、概述

布局是一种可用于放置很多控件的容器，它可以按照一定的规律调整内部控件的位置，从而编写出精美的界面。

布局的内部除了放置控件外，也可以放置布局。

三种常用布局

• LinearLayout
• RelativeLayout
• FrameLayout

二、 LinearLayout

线性布局，是一种非常常见的布局。这个布局会将它所包含的控件在线性方向上依次排列。

1. 设置线性方向

在 Activity 对应的 XML 文件，在 android.widget.LinearLayout 标签内设置线性方向

水平方向

android:orientation="horizontal"

垂直方向

android:orientation="vertical"

2. 布局内控件的属性 - android:layout_gravity

android:layout_gravity 用于指定控件在布局中的对齐方式。

• 当LinearLayout 的排列方向是 horizontal 时，只有垂直方向上的对齐方式才会生效。
• 当LinearLayout 的排列方向是 vertical时，只有水平方向上的对齐方式才会生效。

3. 布局内控件的属性 - android:layout_weight

这个属性允许我们使用比例的方式来指定控件的大小，它在手机屏幕适配性方面可以起到非常重要的作用。

3.1 我们要实现的效果

两个按键在宽度上平分屏幕宽度。

3.2 实现方法

• 按键上层布局设为 线性布局 LinearLayout
• 线性布局 指定为水平排列：android:orientation="horizontal"
• 两个按键的 的 layout_weight 属性分别设置为1 ： ndroid:layout_weight="1"
• 两个按键的宽度设置 为 0dp ,android:layout_width="0dp" 。此时控件的宽度不应该再由layout_width 决定了，这里指定为 0dp 是一种比较规范的写法。

3.3 实现原理

系统会先把 LinearLayout 下所有控件指定的 layout_weight 值相加，得到一个总值，然后每个控件所占大小的比例就是用该控件的layout_weight 值除以 刚才算出的总值。

三、RelativeLayout

RelativeLayout 又称为相对布局，也是一种非常常见的布局。和LinearLayout 的排列规则不同，RelativeLayout 显得更加随意，它可通过相对定位的方式让控件出现在布局的任意位置。

1. 相当于父布局定位

1.1 我们要实现的效果

四个按键，分别显示在上层布局的四个角。

1.2 实现方法

• 按键上层布局设为相对布局：RelativeLayout

• 按键1：定位在父布局左上

  android:layout_alignParentLeft="true"
  android:layout_alignParentTop="true"
  

• 按键2：定位在父布局右上

  android:layout_alignParentRight="true"
  android:layout_alignParentTop="true"
  

• 按键3：定位在父布局左上

  android:layout_alignParentBottom="true"
  android:layout_alignParentLeft="true"
  

• 按键4：定位在父布局右下

  android:layout_alignParentBottom="true"
  android:layout_alignParentRight="true"
  

2. 相对于控件定位

相对指定控件的方向，定位新控件

2.1 要实现的效果

2.2 实现方法

• 按键上层布局设为相对布局：RelativeLayout

• 按键3：定位父布局中间

  android:layout_centerInParent="true"
  

• 按键1：定位在btn3左上

  android:layout_above="@id/button3"
  android:layout_toLeftOf="@id/button3"
  

• 按键2：定位在btn3右上

  android:layout_above="@id/button3"
  android:layout_toRightOf="@id/button3"
  

• 按键4：定位在btn3左下

  android:layout_below="@id/button3"
  android:layout_toLeftOf="@id/button3"
  

• 按键5：定位在btn3右下

  android:layout_below="@id/button3"
  android:layout_toRightOf="@id/button3"
  

三、FrameLayout

FrameLayout 又称为帧布局，它相比于前面两种布局简单很多，因此它的应用场景少了很多。这种布局没有丰富的定位方式，所有的控件都会默认摆放在布局的左上角。

1. 体验FrameLayout 默认效果

1.1 UI 定义

• 设置为 FrameLayout
• 布局内有一个 Button，一个 TextView

1.3 显示效果

2. 布局下控件使用 layout_gravity 属性

2.1 实现代码如下

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Btn1"
        android:layout_gravity="left"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello world! Hello world!"
        android:layout_gravity="right"
        />

2.3 实现效果如下