Android语言基础教程（45）Android布局管理器之帧布局：FrameLayout帧布局：Android的层叠魔法手册

简单却强大，层叠控件的终极武器

在Android开发的六大布局中，FrameLayout（帧布局）堪称最简单却最具特色的存在。它不像LinearLayout那样刻板地水平或垂直排列子元素，也不像RelativeLayout那样需要定义复杂的相对位置关系。

FrameLayout以一种近乎"躺平"的姿态，让所有子控件堆叠在屏幕的左上角，后加入的控件会直接覆盖在先前控件的上层，形成一种层叠效果。

这种特性使得FrameLayout虽然使用场景相对专一，但在特定情况下却无可替代。本文将带你深入探索FrameLayout的魔法世界，揭示这个被低估的布局如何成为Android界面设计中的秘密武器。

一、 什么是FrameLayout：初识帧布局

想象一下，你有一叠扑克牌，每张牌都代表一个UI控件——这就是FrameLayout的工作原理。它直接在屏幕上开辟一块空白区域，所有添加到这个布局中的视图都会以层叠的方式显示，就像扑克牌一张张叠在一起。

默认情况下，第一个被添加到布局中的视图显示在最底层，最后一个则被放在最顶层，上一层的视图会覆盖下一层的视图。这种布局机制类似于堆栈结构，后进先出（在视觉上是"后进在上"）。

与其他布局相比，FrameLayout的属性非常简单，学习成本极低。但它却是实现某些特定界面效果的终极利器，比如游戏界面中的层叠元素、底部导航栏、悬浮按钮等。

二、 FrameLayout的核心特性：不只是简单

1. 层叠顺序：后来者居上

FrameLayout最显著的特点就是其子视图的层叠行为。在XML文件中定义的顺序决定了它们的视觉层次：先定义的位于底层，后定义的位于上层。

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  
  <TextView
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:background="#FF33ffff"
    android:layout_gravity="center" />
    
  <TextView
    android:layout_width="240dp"
    android:layout_height="240dp"
    android:background="#FF33ccff" 
    android:layout_gravity="center"/>
    
  <TextView
    android:layout_width="180dp"
    android:layout_height="180dp"
    android:background="#FF3399ff"
    android:layout_gravity="center" />
    
</FrameLayout>

上述代码中，第一个TextView（300dp×300dp）位于最底层，第二个TextView（240dp×240dp）居中层，第三个TextView（180dp×180dp）位于最上层。如果它们完全不透明且大小相同，我们将只能看到最上面的第三个TextView。

2. 前景图像：永远置顶的"封面"

FrameLayout有一个独特的前景概念——通过 android:foreground属性可以设置一个始终显示在所有子视图之上的图像，就像一本书的封面，无论书页内容如何，封面始终在最上面。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:foreground="@mipmap/ic_launcher"
  android:foregroundGravity="left" >
  
  <!-- 其他子视图 -->
  
</FrameLayout>

同时，你可以使用 android:foregroundGravity属性控制前景图像的显示位置。这一特性使得FrameLayout非常适合实现水印效果、界面遮罩等需要始终置顶的UI元素。

3. 对齐方式：告别死板的左上角

虽然FrameLayout默认将所有子视图堆叠在左上角，但你可以通过 android:layout_gravity属性改变任一子视图的位置，让它们出现在帧布局的不同位置。

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  
  <TextView
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:background="#FF3366ff"
    android:layout_gravity="center" />
    
  <TextView
    android:layout_width="100dp"
    android:layout_height="100dp" 
    android:background="#FF3300ff"
    android:layout_gravity="bottom|right" />
    
</FrameLayout>

这一机制使得FrameLayout在保持层叠特性的同时，具备了基本的布局灵活性。通过结合 layout_gravity与 layout_margin系列属性，可以精确控制子视图在FrameLayout中的位置。

三、 FrameLayout的特殊属性

FrameLayout除了继承自ViewGroup的通用属性外，还有两个特殊属性：

这两个属性是FrameLayout独有的，合理使用它们可以实现许多有趣的界面效果。

四、 实战演练：FrameLayout完整示例

下面我们通过一个完整的示例，展示FrameLayout的实际应用。这个例子将创建一个颜色切换界面，演示FrameLayout的层叠特性。

1. 创建布局文件

首先，创建XML布局文件（activity_main.xml）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
 
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
 
        <TextView
            android:id="@+id/tvBottom"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:background="#ff0000"
            android:text="底层"
            android:textColor="#ffff00"
            android:textSize="30sp" />
 
        <TextView
            android:id="@+id/tvMiddle"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:background="#0000ff"
            android:text="中层"
            android:textColor="#ffff00"
            android:textSize="30sp" />
 
        <TextView
            android:id="@+id/tvTop"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:background="#00ff00"
            android:text="顶层"
            android:textColor="#ffff00"
            android:textSize="30sp" />
    </FrameLayout>
    <Button
        android:id="@+id/btnSwitchColor"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="切换颜色"
        android:textSize="20sp" />
</LinearLayout>

在这个布局中，我们使用了一个FrameLayout包含三个不同大小和颜色的TextView，以及一个用于触发颜色切换的按钮。

2. 实现MainActivity逻辑

接下来，在MainActivity.java中实现颜色切换的逻辑：

package net.hw.switchcolor;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
 
public class MainActivity extends AppCompatActivity {
    private TextView tvBottom;
    private TextView tvMiddle;
    private TextView tvTop;
    private int clickCount;
    private int[] colors;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);
        // 通过资源标识获得控件实例
        tvBottom = findViewById(R.id.tvBottom);
        tvMiddle = findViewById(R.id.tvMiddle);
        tvTop = findViewById(R.id.tvTop);
        
        // 设置按钮点击监听器
        findViewById(R.id.btnSwitchColor).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                doSwitchColor(v);
            }
        });
    }
 
    /**
     * 切换颜色单击事件处理方法
     *
     * @param view
     */
    public void doSwitchColor(View view) {
        // 累加按钮单击次数 
        clickCount++;
        // 单击次数对3求余 
        clickCount = clickCount % 3;
        // 判断次数是0、1、2 
        switch (clickCount) {
            case 0:
                // 红——蓝——绿 
                colors = new int[]{Color.RED, Color.BLUE, Color.GREEN};
                break;
            case 1:
                // 蓝——绿——红 
                colors = new int[]{Color.BLUE, Color.GREEN, Color.RED};
                break;
            case 2:
                // 绿——红——蓝 
                colors = new int[]{Color.GREEN, Color.RED, Color.BLUE};
                break;
        }
        
        // 重新设置颜色
        tvBottom.setBackgroundColor(colors[0]);
        tvMiddle.setBackgroundColor(colors[1]);
        tvTop.setBackgroundColor(colors[2]);
    }
}

这段代码实现了点击按钮时循环切换三个TextView背景颜色的功能，直观地展示了FrameLayout中各层次的视觉变化。

五、 FrameLayout的应用场景

1. 游戏开发

FrameLayout的层叠特性使其在游戏开发中大放异彩。游戏界面中的背景、角色、道具、特效等元素通常需要分层显示，FrameLayout天然适合这种需求。

2. 悬浮元素

实现悬浮按钮、提示框、加载遮罩等需要覆盖在其他内容之上的UI元素时，FrameLayout是不二之选。

3. 界面遮罩与水印

利用FrameLayout的前景特性，可以轻松为界面添加全局水印或遮罩效果，这些元素将始终显示在所有内容之上。

4. 底部导航栏

常见的底部导航栏通常使用FrameLayout作为容器，内部层叠不同的页面片段，通过控制显示与隐藏实现页面切换。

六、 FrameLayout与其他布局的对比

为了更好地理解FrameLayout的定位，让我们简单比较一下Android中几种常见布局：

与其他布局相比，FrameLayout的优势在于简单高效和层叠特性，但在复杂布局能力上明显不足。在实际项目中，我们通常会根据需求组合使用多种布局，发挥各自优势。

七、 FrameLayout的使用技巧与注意事项

1. 控制子视图大小

FrameLayout的大小由子控件中最大的子控件决定。如果所有组件都一样大，同一时刻就只能看到最上面的那个组件。因此，在设计时需要合理规划各层视图的尺寸，确保下层内容能够按预期部分显露。

2. 善用layout_gravity

通过 android:layout_gravity属性可以精确控制子视图在FrameLayout中的对齐方式，这是打破默认左上角对齐的关键。

3. 避免过度层叠

虽然FrameLayout支持无限层叠，但出于性能和可维护性考虑，应避免过多层次的叠加。通常3-5层已经能够满足大多数需求。

4. 与其它布局组合使用

FrameLayout常作为更复杂布局的一部分，与其他布局组合使用。例如，在RelativeLayout内部使用FrameLayout承载层叠内容，结合两种布局的优势。

八、 结语

FrameLayout作为Android六大布局中最简单的一种，以其独特的层叠特性在开发工具箱中占据一席之地。它可能不像ConstraintLayout那样功能全面，也不像LinearLayout那样使用广泛，但它在特定场景下的简洁与高效是其他布局无法替代的。

掌握FrameLayout，意味着你多了一种解决界面层叠问题的利器。无论是简单的悬浮按钮，还是复杂的游戏界面，FrameLayout都能以最直接的方式满足你的需求。

正如Android开发中的许多技术选择一样，没有最好的布局，只有最合适的布局。理解每种布局的特性及适用场景，根据实际需求灵活选用，才是成为优秀Android开发者的正道。

FrameLayout就像是你布局工具箱中的透明胶带——简单、不显眼，但在需要将东西"粘"在一起时，它总是最顺手的选择。