Android：帧布局实现霓虹灯的效果

关于帧布局的参考：http://blog.csdn.net/canlets/article/details/10274729

下面我们就用该布局实现霓虹灯的效果，如图：



布局文件中定义七个视图组件，最大的在最下面，先定义，最小的在最上面，最后定义

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- 横排的霓虹灯布局 -->
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="100dp" >

<TextView
android:id="@+id/View1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0000"
android:height="50dp"
android:width="210dp" />

<TextView
android:id="@+id/View2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#dd0000"
android:height="50dp"
android:width="180dp" />

<TextView
android:id="@+id/View3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#bb0000"
android:height="50dp"
android:width="150dp" />

<TextView
android:id="@+id/View4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#990000"
android:height="50dp"
android:width="120dp" />

<TextView
android:id="@+id/View5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#770000"
android:height="50dp"
android:width="90dp" />

<TextView
android:id="@+id/View6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#550000"
android:height="50dp"
android:width="60dp" />

<TextView
android:id="@+id/View7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#330000"
android:height="50dp"
android:width="30dp" />
</FrameLayout>
<!-- 同心方块的霓虹灯布局 -->
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="200dp"
android:layout_gravity="center"
android:orientation="vertical" >

<TextView
android:id="@+id/View01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#ff0000"
android:height="200px"
android:width="200px" />

<TextView
android:id="@+id/View02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#bb0000"
android:height="170px"
android:width="170px" />

<TextView
android:id="@+id/View03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#990000"
android:height="140px"
android:width="140px" />

<TextView
android:id="@+id/View04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#770000"
android:height="110px"
android:width="110px" />

<TextView
android:id="@+id/View05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#f0ff00"
android:height="50px"
android:width="50px" />

<TextView
android:id="@+id/View06"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#550000"
android:height="80px"
android:width="80px" />

<TextView
android:id="@+id/View07"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#330000"
android:height="50px"
android:width="50px" />
</FrameLayout>

</LinearLayout>在values目录下，new一个color.xml文件：

<?xml version="1.0" encoding="utf-8"?>

<resources>
<color name="color1">#330000</color>
<color name="color2">#550000</color>
<color name="color3">#770000</color>
<color name="color4">#990000</color>
<color name="color5">#bb0000</color>
<color name="color6">#dd0000</color>
<color name="color7">#ff0000</color>
</resources>

Activity中代码编写：

package com.xjtu.soft;

import java.util.Timer;
import java.util.TimerTask;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.TextView;

public class FrameLayoutTest extends Activity {
private int currentColor = 0;

final int[] colors = new int[] { R.color.color7, R.color.color6,
R.color.color5, R.color.color4, R.color.color3, R.color.color2,
R.color.color1 };
final int[] names = new int[] { R.id.View1, R.id.View2, R.id.View3,
R.id.View4, R.id.View5, R.id.View6, R.id.View7, };
final int[] names1 = new int[] { R.id.View01, R.id.View02, R.id.View03,
R.id.View04, R.id.View05, R.id.View06, R.id.View07, };

TextView[] views = new TextView[7];//第一组TextView，显示横排的效果
TextView[] views1 = new TextView[7];//第而组TextView，显示同心方块的效果

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
for (int i = 0; i < 7; i++) {
views[i] = (TextView) findViewById(names[i]);
views1[i] = (TextView) findViewById(names1[i]);
}

// 使用Handler进行消息处理
final Handler handler = new Handler() {

@Override
public void handleMessage(Message msg) {
if (msg.what == 0x1122) {// 判断消息的标识
for (int i = 0; i < 7 - currentColor; i++) {
views[i].setBackgroundResource(colors[i + currentColor]);
views1[i]
.setBackgroundResource(colors[i + currentColor]);
}
// 依次改变TextView的背景色
for (int i = 7 - currentColor, j = 0; i < 7; i++, j++) {
views[i].setBackgroundResource(colors[j]);
views1[i].setBackgroundResource(colors[j]);
}
}
super.handleMessage(msg);
}

};
// 定义一个线程，周期性的改变currentColor的值
new Timer().schedule(new TimerTask() {

@Override
public void run() {
currentColor++;
if (currentColor >= 6) {
currentColor = 0;
}

Message msg = new Message();
msg.what = 0x1122;// 0x1122为给消息定义的标识，可以自己设置
handler.sendMessage(msg);

}
}, 0, 300);
}
}

完整的工程下载：Project下载