Android学习笔记第2章 Android应用的界面编程 2.2 第1组UI组件：布局管理器 2.2.3 帧布局

墨蓝 2024-03-22 13:34 37阅读 0赞

#### Android学习笔记 ####

#### 文章目录 ####

*   *   *  Android学习笔记
         *  第2章 Android应用的界面编程
         *   *  2.2 第1组UI组件：布局管理器
             *   *  2.2.3 帧布局

> 疯狂Android讲义

#### 第2章 Android应用的界面编程 ####

##### 2.2 第1组UI组件：布局管理器 #####

###### 2.2.3 帧布局 ######

帧布局由FrameLayout所代表，FrameLayout直接继承了ViewGroup组件。

帧布局容器为每个加入其中的组件都创建一个空白的区域（称为一帧），每个子组件占据一帧，这些帧都会根据gravity属性执行自动对齐，把组件一个个叠加在一起。

下面是帧布局支持的常用的XML 属性及相关方法：

![在这里插入图片描述][6c13c42f574845e582c77deb55a43eb0.png_pic_center]

FrameLayout包含的子元素也受FrameLayout.LayoutParams控制，因此它所包含的子元素也可指android:layout gravity属性，该属性控制该子元素在FrameLayout中的对齐方式。

下面示范了帧布局的用法，可以看到6个TextView叠加在一起，上面的TextView遮住下面的TextView。

举个栗子，新建模块

![在这里插入图片描述][b1a0b0eb9fcc4ed2842192c722f0d933.png_pic_center]

布局文件

<?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:id="@+id/view01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:width="320dp"
            android:height="320dp"
            android:background="#f00" />
    
        <TextView
            android:id="@+id/view02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:width="280dp"
            android:height="280dp"
            android:background="#0f0" />
    
        <TextView
            android:id="@+id/view03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:width="240dp"
            android:height="240dp"
            android:background="#00f" />
    
        <TextView
            android:id="@+id/view04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:width="200dp"
            android:height="200dp"
            android:background="#ff0" />
    
        <TextView
            android:id="@+id/view05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:width="160dp"
            android:height="160dp"
            android:background="#f0f" />
    
        <TextView
            android:id="@+id/view06"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:width="120dp"
            android:height="120dp"
            android:background="#0ff" />
    </FrameLayout>

颜色资源

运行效果

![在这里插入图片描述][c20a387a6e0f459c8a27de1ef6ba76df.png_pic_center]

可以看到这6个TextView的高度、宽度逐渐减小，这样可以保证最先添加的TextView 不会被完全遮挡。

【扩展】霓虹灯效果

在上面完成的帧布局效果上，我们可以轮换他们的颜色，主程序代码：

package com.dingjiaxiong.framelayout;
    
    import androidx.annotation.NonNull;
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.icu.text.PluralRules;
    import android.os.Bundle;
    import android.os.Handler;
    import android.os.Message;
    import android.widget.TextView;
    
    import java.lang.ref.WeakReference;
    import java.util.Timer;
    import java.util.TimerTask;
    
    public class MainActivity extends AppCompatActivity {
        
    
        int[] names = new int[]{
        R.id.view01, R.id.view02, R.id.view03, R.id.view04, R.id.view05, R.id.view06};
        TextView[] views = new TextView[names.length];
    
        class MyHandler extends Handler {
        
            private WeakReference<MainActivity> activity;
    
            public MyHandler(WeakReference<MainActivity> activity) {
        
                this.activity = activity;
            }
    
            private int currentColor = 0;
            // 定义一个颜色数组
            int[] colors = new int[]{
        R.color.color1, R.color.color2, R.color.color3, R.color.color4, R.color.color5, R.color.color6};
    
            @Override
            public void handleMessage(Message msg) {
        
                // 表明消息来自本程序所发送的
                if (msg.what == 0x123) {
        
                    for (int i = 0, len = activity.get().names.length; i < len; i++) {
        
                        activity.get().views[i].setBackgroundResource(colors[(i + currentColor) % colors.length]);
                    }
                    currentColor++;
                }
                super.handleMessage(msg);
            }
        }
    
        private Handler handler = new MyHandler(new WeakReference<>(this));
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            for (int i = 0; i < names.length; i++) {
        
                views[i] = findViewById(names[i]);
            }
    
            // 定义一个编程周期性改变currentColor 变量值
            new Timer().schedule(new TimerTask() {
        
                @Override
                public void run() {
        
                    // 发送一条空消息通知系统改变6个TextView 组件的背景色
                    handler.sendEmptyMessage(0x123);
                }
            }, 0, 200);
        }
    }

运行效果

![在这里插入图片描述][a8cfd605b70d447496ba1bff35959f04.gif_pic_center]

OK，就这样。

之所以要在程序里面额外定义一个Handler 来处理TextView 的背景色更新，而不直接在run() 方法里面直接更新，是因为Android 的View 和 UI组件不是线程安全的，Android 不允许开发者启动线程直接访问用户界面的UI 组件。

为Handler 派生一个子类，并让该子类实例拥有它所在Activity 的弱引用(WeakReference) ，这样可以更好的避免内存泄露。

[6c13c42f574845e582c77deb55a43eb0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/450c6aac698041019005fe06caa4cd80.png
[b1a0b0eb9fcc4ed2842192c722f0d933.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bc538517079346b8a37bf928f14737ce.png
[c20a387a6e0f459c8a27de1ef6ba76df.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/aecd3ee18f944e8c829cffae345d4af3.png
[a8cfd605b70d447496ba1bff35959f04.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4af3beee93e54452a86c47c659cf227c.png