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"/>
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;
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;
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. }
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);
59. }

使用了Android 提供的消息通訊類 Handler 。該類可以實現非主線程和負責 UI 的主線程之間的通信 ，進而間接實現非主線程更新 UI 界面。由於 sleep 方法中的
sendMessageDelayed(obtainMessage(0), delayMillis); 本身會延遲發送一個消息 ， 該消息會被框架傳遞給 handleMessage 事件 。 我們在 handleMessage() 方法中再次調用 sleep() 方法 ，形成一個循環調用 。 在我們對界面進行點擊之前 ， 兩個方法會一直循環調用 。 前景圖片也會不斷的切換，進而實現霓虹燈的效果。