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

最新推荐文章于 2025-06-02 15:27:18 发布

原创最新推荐文章于 2025-06-02 15:27:18 发布 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #FrameLayout #color #textview

5.Android 专栏收录该内容

36 篇文章

订阅专栏

本文通过帧布局(FrameLayout)实现Android应用中的霓虹灯效果。借助布局文件和代码，设置多个视图组件，从大到小堆叠，以达到视觉上的霓虹灯动画效果。参考链接及完整项目代码可供下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于帧布局的参考：http://blog.youkuaiyun.com/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下载