FrameLayout实现霓虹灯效果

选自:疯狂Android讲义(第3版)

效果如下:

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

  帧布局容器为每个加入其中的组件创建一个空白的区域(称为一帧),每个子组件占据一帧,这些帧都会根据gravity属性执行自动对齐。帧布局的效果有点类似于AWT编程的GardLayout,都是把组件一个个地叠加在一起。与GardLayout的区别在于,GradLayout可以将下面的Card移上来,但FrameLayout则没有提供相应的方法。

  

FrameLayout的常用XML属性及相关方法

XML属性	相关方法	说明
android:foreground	setForeground(Drawable)	设置该帧布局容器的前景图像
android:foregroundGravity	setForegroundGravity(int)	定义绘制前景图像的gravity属性

 

 

 

 

 

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

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <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>

public class MainActivity extends AppCompatActivity {

    private int currentColor = 0;
    //定义一个颜色数组
    final int[] colors = new int[]{
            R.color.color1,
            R.color.color2,
            R.color.color3,
            R.color.color4,
            R.color.color5,
            R.color.color6
    };
    final 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];
    Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {

            //表明消息来自本程序锁发送的
            if (msg.what == 0x123) {
                for (int i = 0; i < names.length; i++) {
                    views[i].setBackgroundResource(colors[(i + currentColor) % names.length]);
                }
                currentColor++;
            }
            super.handleMessage(msg);
        }
    };

    @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]);
        }
        new Timer().schedule(new TimerTask() {
            @Override
            public void run() {
                //发送一条空消息通知系统改变6个TextView组件的背景色
                mHandler.sendEmptyMessage(0x123);
            }
        }, 0, 200);
    }
}