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

效果图