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


效果图：


1、首先是main.xml文件的代码

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <FrameLayout xmlns:Android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"   
  5.  >   
  6.     <TextView  
  7.         android:id="@+id/view0"  
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:layout_gravity="center"  
  11.         android:background="#ff0000"  
  12.         android:height="200dp"  
  13.         android:width="200dp" />  
  14.     <TextView  
  15.         android:id="@+id/view1"  
  16.         android:layout_width="wrap_content"  
  17.         android:layout_height="wrap_content"  
  18.         android:layout_gravity="center"  
  19.         android:background="#ff00ff"  
  20.         android:height="180dp"  
  21.         android:width="180dp" />  
  22.     <TextView   
  23.         android:layout_width="wrap_content"  
  24.         android:layout_height="wrap_content"  
  25.         android:layout_gravity="center"  
  26.         android:width="160dp"  
  27.         android:height="160dp"  
  28.         android:background="#bb0000"  
  29.         android:id="@+id/view2"/>  
  30.     <TextView   
  31.         android:layout_width="wrap_content"  
  32.         android:layout_height="wrap_content"  
  33.         android:width="140dp"  
  34.         android:height="140dp"  
  35.         android:layout_gravity="center"  
  36.         android:background="#990000"  
  37.         android:id="@+id/view3"/>  
  38.     <TextView   
  39.         android:layout_width="wrap_content"  
  40.         android:layout_height="wrap_content"  
  41.         android:width="120dp"  
  42.         android:height="120dp"  
  43.         android:layout_gravity="center"  
  44.         android:background="#770000"  
  45.         android:id="@+id/view4"/>  
  46.     <TextView   
  47.         android:layout_width="wrap_content"  
  48.         android:layout_height="wrap_content"  
  49.         android:width="100dp"  
  50.         android:height="100dp"  
  51.         android:layout_gravity="center"  
  52.         android:background="#550000"  
  53.         android:id="@+id/view5"/>  
  54.     <TextView   
  55.         android:layout_width="wrap_content"  
  56.         android:layout_height="wrap_content"  
  57.         android:width="80dp"  
  58.         android:height="80dp"  
  59.         android:layout_gravity="center"  
  60.         android:background="#330000"  
  61.         android:id="@+id/view6"/>  
  62.   
  63.   
  64.   
  65.       
  66.   
  67. </FrameLayout>  

强调：android:layout_gravity="center"   textview中的内容居中

2、创建一个colors.xml文件

view plaincopy to clipboardprint?

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <color name="color1">#330000</color>  
  4.     <color name="color2">#550000</color>  
  5.     <color name="color3">#770000</color>  
  6.     <color name="color4">#990000</color>  
  7.     <color name="color5">#bb0000</color>  
  8.     <color name="color6">#dd0000</color>  
  9.     <color name="color7">#ff0000</color>  
  10. </resources>  
3、源代码LayoutChen.java
  1. package cn.csdn.activity;  
  2.   
  3.   
  4. import android.app.Activity;  
  5. import android.os.Bundle;  
  6. import android.os.Handler;  
  7. import android.os.Message;  
  8. import android.widget.TextView;  
  9.   
  10. public class LayoutChenActivity extends Activity {  
  11.    final int[] colors=new int[]{  
  12.          R.color.color7,  
  13.          R.color.color6,  
  14.          R.color.color5,  
  15.          R.color.color4,  
  16.          R.color.color3,  
  17.          R.color.color2,  
  18.          R.color.color1,  
  19.    };  
  20.   final int[] names=new int[]{  
  21.           R.id.view0,  
  22.           R.id.view1,  
  23.           R.id.view2,  
  24.           R.id.view3,  
  25.           R.id.view4,  
  26.           R.id.view5,  
  27.           R.id.view6,  
  28.   };  
  29.   TextView view[]=new TextView[7];  
  30.   class MyHandler extends Handler{  
  31.     int i=0;  
  32.     public void handleMessage(Message msg){  
  33.         i++;  
  34.         if(i>=6){  
  35.             i=1;  
  36.         }  
  37.         for(int m=7-i,n=0;m<7;m++,n++){  
  38.             view[m].setBackgroundResource(colors[n]);  
  39.         }  
  40.         for(int m=0;m<7-i;m++){  
  41.             view[m].setBackgroundResource(colors[m+i]);  
  42.         }  
  43.           
  44.         sleep(100);  
  45.     }  
  46.     public void sleep(int j){         
  47.             sendMessageDelayed(obtainMessage(0),j);           
  48.     }  
  49.   }  
  50.     public void onCreate(Bundle savedInstanceState) {  
  51.         super.onCreate(savedInstanceState);  
  52.         setContentView(R.layout.main);  
  53.         for(int i=0;i<7;i++){  
  54.             view[i]=(TextView) findViewById(names[i]);  
  55.         }  
  56.         final MyHandler myHandler=new MyHandler();  
  57.         myHandler.sleep(100);  
  58.            
  59.     }  
使用了Android 提供的消息通讯类 Handler 。该类可以实现非主线程和负责 UI 的主线程之间的通信 ，进而间接实现非主线程更新 UI 界面。由于 sleep 方法中的
sendMessageDelayed(obtainMessage(0), delayMillis); 本身会延迟发送一个消息 ， 该消息会被框架传递给 handleMessage 事件 。 我们在 handleMessage() 方法中再次调用 sleep() 方法 ，形成一个循环调用 。 在我们对界面进行点击之前 ， 两个方法会一直循环调用 。 前景图片也会不断的切换，进而实现霓虹灯的效果。

相关内容