本文共 4828 字，大约阅读时间需要 16 分钟。

一、导入新课

• 有时候我们在设计安卓用户面时，有种需求，一个控件会层叠在另一个控件上，此时用线性布局就无法实现，就得使用一个新的布局——帧式布局。

二、新课概述

（一）帧式布局概述

1、布局特点

• 帧式布局是一种层叠式的布局，后添加的控件会层叠在先添加的控件上。

2、继承关系图

• FrameLayout类是ViewGroup的子类
  

3、常用属性

（二）案例演示：切换颜色

1、创建安卓应用

• 基于Empty Activity创建安卓应用 - SwitchColor
  

• 单击【Finish】按钮
  

2、主布局资源文件

• 主布局资源文件 - activity_main.xml
  

   
   
    xmlns:tools="http://schemas.android.com/tools"
    
android:layout_width="match_parent"
    
android:layout_height="match_parent"
    
android:gravity="center"
    
android:orientation="vertical"
    
tools:context=".MainActivity">
    

    
     
android:layout_width="wrap_content"
     
android:layout_height="wrap_content"
     
android:layout_marginBottom="20dp">
     

     
      
android:id="@+id/tv_bottom"
      
android:layout_width="300dp"
      
android:layout_height="300dp"
      
android:layout_gravity="center"
      
android:background="#ff0000"
      
android:text="@string/bottom"
      
android:textColor="#ffff00"
      
android:textSize="30sp" />
      

      
       
android:id="@+id/tv_middle"
       
android:layout_width="200dp"
       
android:layout_height="200dp"
       
android:layout_gravity="center"
       
android:background="#00ff00"
       
android:text="@string/middle"
       
android:textColor="#ffff00"
       
android:textSize="30sp" />
       

       
        
android:id="@+id/tv_top"
        
android:layout_width="100dp"
        
android:layout_height="100dp"
        
android:layout_gravity="center"
        
android:background="#0000ff"
        
android:text="@string/top"
        
android:textColor="#ffff00"
        
android:textSize="30sp" />
        

       
      
     
    
    

    
android:id="@+id/btn_switch_color"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:onClick="doSwitchColor"
android:text="@string/switch_color"
android:textSize="20sp" />
   

3、字符串资源文件

• 字符串资源文件 - strings.xml
  

   
    

    
     帧式布局：切换颜色
     

     
      顶层
      

      
       中层
       

       
        底层
        

        
         切换颜色
        
       
      
     
    
   

• 此时，查看界面预览效果
  

4、主界面实现功能

• 主界面类 - MainActivity
  

• 定义变量
  

• 通过资源标识符获取控件实例
  

• 编写切换颜色单击事件处理方法
  

• 查看完整代码

package net.hw.switch_color;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 tvTop;
private TextView tvMiddle;
private TextView tvBottom;
private int clickCount; // 按钮单击次数
private int[] colors; // 颜色数组
@Override
protected void onCreate(Bundle savedInstanceState) {

   super.onCreate(savedInstanceState);
// 利用布局资源文件设置用户界面
setContentView(R.layout.activity_main);
// 通过资源标识符获取控件实例
tvTop = findViewById(R.id.tv_top);
tvMiddle = findViewById(R.id.tv_middle);
tvBottom = findViewById(R.id.tv_bottom);
}
/**
 * 切换颜色单击事件处理方法
 *
 * @param view
 */
public void doSwitchColor(View view) {

   // 累加按钮单击次数
clickCount++;
// 只有三种颜色切换，因此单击次数对3求余
clickCount = clickCount % 3;
// 根据单击次数确定颜色方案[底层，中层，顶层]
switch (clickCount) {

   case 0: // 颜色方案：[红，绿，蓝]
colors = new int[] {
   Color.RED, Color.GREEN, Color.BLUE};
break;
case 1: // 颜色方案：[绿，蓝，红]
colors = new int[] {
   Color.GREEN, Color.BLUE, Color.RED};
break;
case 2: // 颜色方案；[蓝，红，绿]
colors = new int[] {
   Color.BLUE, Color.RED, Color.GREEN};
break;
}
// 根据颜色方案来设置三层标签背景色
tvBottom.setBackgroundColor(colors[0]);
tvMiddle.setBackgroundColor(colors[1]);
tvTop.setBackgroundColor(colors[2]);
}}

5、启动应用，查看效果

• 单击【切换颜色】按钮
  

6、优化切换颜色算法

• 采用左移算法切换颜色
  

• 启动应用，查看效果
  

• 当切换颜色比较多，这个算法还得优化，采用循环结构来切换颜色
  

• 查看优化后的代码

package net.hw.switch_color;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 tvTop;
private TextView tvMiddle;
private TextView tvBottom;
private int[] colors; // 颜色数组
@Override
protected void onCreate(Bundle savedInstanceState) {

   super.onCreate(savedInstanceState);
// 利用布局资源文件设置用户界面
setContentView(R.layout.activity_main);
// 通过资源标识符获取控件实例
tvTop = findViewById(R.id.tv_top);
tvMiddle = findViewById(R.id.tv_middle);
tvBottom = findViewById(R.id.tv_bottom);
// 初始化颜色数组
colors = new int[] {
   Color.RED, Color.GREEN, Color.BLUE};
}
/**
 * 切换颜色单击事件处理方法
 *
 * @param view
 */
public void doSwitchColor(View view) {

   // 通过颜色数组切换颜色 [采用左移算法]
int temp = colors[0];
for (int i = 0; i < colors.length - 1; i++) {

   colors[i] = colors[i + 1];
}
colors[colors.length - 1] = temp;
// 根据颜色方案来设置三层标签背景色
tvBottom.setBackgroundColor(colors[0]);
tvMiddle.setBackgroundColor(colors[1]);
tvTop.setBackgroundColor(colors[2]);
}}

• 完成！

转载地址：http://bbpowy.baihongyu.com/