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

 

效果图