【Android】使用FrameLayout布局实现霓虹灯效果

FrameLayout是五大布局中最简单的一个布局。

在这个布局中，整个界面被当成一块空白备用区域，所有的子元素都不能被指定放置的位置。

它们统统放于这块区域的左上角，并且后面的子元素直接覆盖在前面的子元素之上，将前面的子元素部分和全部遮挡。

显示效果如下，第一个TextView被第二个TextView完全遮挡，第三个TextView遮挡了第二个TextView的部分位置。

我们可以利用这个FrameLayout布局的特性实现一个简单的霓虹灯效果。

Activity代码

package com.app.test01;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;

public class FrameLayoutActivity extends Activity implements Runnable{
	//定义5个颜色值
	private int[] colors = new int[]{0xFFFF0000,0xFF0000FF,0xFF00FFFF,0xFFFF00FF,0xFF00FF00};
	//每一个颜色值的索引
	private int[] nextColorPoints = new int[]{1,2,3,4,0};
	//当前值的索引
	private int currentColorPoint = 0;
	private View[] views;
	private Handler handler;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_frame);
		views = new View[]{findViewById(R.id.textView5),findViewById(R.id.textView4),
				findViewById(R.id.textView3),findViewById(R.id.textView2),findViewById(R.id.textView1)};
		handler = new Handler();
		handler.postDelayed(this, 300);
	}

	@Override
	public void run() {
		// TODO Auto-generated method stub
		int nextColorPoint = currentColorPoint;
		for (int i = views.length-1; i>=0; i--) {
			views[i].setBackgroundColor(colors[nextColorPoint]);
			nextColorPoint = nextColorPoints[nextColorPoint];
		}
		currentColorPoint++;
		if (currentColorPoint == 5) {
			currentColorPoint = 0;
		}
		handler.postDelayed(this, 300);
	}
}

布局文件

<?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/textView1"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:text="TextView" 
        android:layout_gravity="center"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:text="TextView" 
        android:layout_gravity="center"/>
    
    <TextView
        android:id="@+id/textView3"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:text="TextView" 
        android:layout_gravity="center"/>
    
    <TextView
        android:id="@+id/textView4"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:text="TextView" 
        android:layout_gravity="center"/>
    
    <TextView
        android:id="@+id/textView5"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:text="TextView" 
        android:layout_gravity="center"/>
    
</FrameLayout>

效果图