自定义TabHost实现背景图片随选项卡切换滑动效果

android layout animation imagelist delay string

[html]  view plain copy

1. <strong>先上效果图</strong>  

本例子是对TabHost组件的自定义，实现标签居底显示；每个标签包含图片和文字。

布局文件

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@android:id/tabhost"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent" >  
6.     <RelativeLayout  
7.         android:layout_width="fill_parent"  
8.         android:layout_height="wrap_content"  
9.         android:background="#F8FFEE" >  
10.         <!-- 内容显示 -->  
11.         <FrameLayout  
12.             android:id="@android:id/tabcontent"  
13.             android:layout_width="fill_parent"  
14.             android:layout_height="wrap_content" >  
15.             <TextView  
16.                 android:id="@+id/text1"  
17.                 android:layout_width="fill_parent"  
18.                 android:layout_height="fill_parent"  
19.                 android:text="@string/text1"  
20.                 android:textSize="32dp" />  
21.             <TextView  
22.                 android:id="@+id/text2"  
23.                 android:layout_width="fill_parent"  
24.                 android:layout_height="fill_parent"  
25.                 android:text="@string/text2"  
26.                 android:textSize="32dp" />  
27.             <TextView  
28.                 android:id="@+id/text3"  
29.                 android:layout_width="fill_parent"  
30.                 android:layout_height="fill_parent"  
31.                 android:text="@string/text3"  
32.                 android:textSize="32dp" />  
33.         </FrameLayout>  
34.         <TabWidget  
35.             android:id="@android:id/tabs"  
36.             android:layout_width="fill_parent"  
37.             android:layout_height="wrap_content"  
38.             android:layout_alignParentBottom="true"  
39.             android:background="@drawable/bottom_tab_bg" >  
40.         </TabWidget>  
41.         <!-- 选项卡背景图片 -->  
42.         <ImageView  
43.             android:id="@+id/tab_top_select"  
44.             android:layout_width="45dp"  
45.             android:layout_height="45dp"  
46.             android:layout_alignParentBottom="true"  
47.             android:src="@drawable/topbar_select" />  
48.     </RelativeLayout>  
49. </TabHost>  

MainActivity.java

[java]  view plain copy

1. package com.suxh;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.app.TabActivity;  
7. import android.graphics.Color;  
8. import android.os.Bundle;  
9. import android.os.Handler;  
10. import android.os.Message;  
11. import android.util.Log;  
12. import android.view.Gravity;  
13. import android.view.View;  
14. import android.view.animation.TranslateAnimation;  
15. import android.widget.ImageView;  
16. import android.widget.LinearLayout;  
17. import android.widget.TabHost;  
18. import android.widget.TabHost.OnTabChangeListener;  
19. import android.widget.TextView;  
20.   
21. public class MainActivity extends TabActivity implements OnTabChangeListener {  
22.     // 当前选中的Tab标号  
23.     private int mCurSelectTabIndex = 0;  
24.     // 默认选中第一个tab页 移动标志操作  
25.     private final int INIT_SELECT = 0;  
26.     // 滑动动画执行时间  
27.     private final int DELAY_TIME = 500;  
28.     private TabHost mTabHost;  
29.     // 存放Tab页中ImageView信息  
30.     public List<ImageView> imageList = new ArrayList<ImageView>();  
31.   
32.     @Override  
33.     public void onCreate(Bundle savedInstanceState) {  
34.         super.onCreate(savedInstanceState);  
35.         setContentView(R.layout.main);  
36.         // 取得TabHost对象  
37.         mTabHost = getTabHost();  
38.         /* 为TabHost添加标签 */  
39.         mTabHost.addTab(mTabHost.newTabSpec("tab_1").setIndicator(composeLayout("优惠信息", R.drawable.pic1_s)).setContent(R.id.text1));  
40.         mTabHost.addTab(mTabHost.newTabSpec("tab_2").setIndicator(composeLayout("银行公告", R.drawable.pic2_n)).setContent(R.id.text2));  
41.         mTabHost.addTab(mTabHost.newTabSpec("tab_3").setIndicator(composeLayout("金融产品", R.drawable.pic3_n)).setContent(R.id.text3));  
42.         // 设置TabHost的背景颜色  
43.         mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));  
44.         // 设置当前选中的Tab页  
45.         mTabHost.setCurrentTab(0);  
46.         // TabHost添加事件  
47.         mTabHost.setOnTabChangedListener(this);  
48.         // 初始化移动标识这里移到第一个tab页  
49.         initCurSelectTab();  
50.     }  
51.     /** 
52.      * 初始化选中Tab覆盖图片的Handler 
53.      */  
54.     private Handler initSelectTabHandle = new Handler () {  
55.         public void handleMessage (Message msg) {  
56.             switch (msg.what) {  
57.                 case INIT_SELECT:  
58.                     moveTopSelect(INIT_SELECT);  
59.                     break;  
60.                 default:  
61.                     break;  
62.             }  
63.             super.handleMessage(msg);  
64.         }  
65.     };  
66.       
67.     /** 
68.      * 初始化选中Tab覆盖图片 
69.      */  
70.     public void initCurSelectTab(){  
71.         // 默认选中移动图片位置  
72.         Message msg = new Message();  
73.         msg.what = INIT_SELECT;  
74.         initSelectTabHandle.sendMessageDelayed(msg, DELAY_TIME);  
75.     }  
76.       
77.   
78.     /** 
79.      * Tab页改变 
80.      */  
81.     public void onTabChanged(String tabId) {  
82.         // 设置所有选项卡的图片为未选中图片  
83.         imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.pic1_n));  
84.         imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.pic2_n));  
85.         imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.pic3_n));  
86.           
87.         if (tabId.equalsIgnoreCase("tab_1")) {  
88.             imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.pic1_s));  
89.             // 移动底部背景图片  
90.             moveTopSelect(0);  
91.         } else if (tabId.equalsIgnoreCase("tab_2")) {  
92.             imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.pic2_s));  
93.             // 移动底部背景图片  
94.             moveTopSelect(1);  
95.         } else if (tabId.equalsIgnoreCase("tab_3")) {  
96.             imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.pic3_s));  
97.             // 移动底部背景图片  
98.             moveTopSelect(2);  
99.         }  
100.     }  
101.   
102.     /** 
103.      * 移动tab选中标识图片 
104.      * @param selectIndex 
105.      * @param curIndex 
106.      */  
107.     public void moveTopSelect(int selectIndex) {  
108.         View topSelect = (View) findViewById(R.id.tab_top_select);  
109.   
110.         // 起始位置中心点  
111.         int startMid = ((View) getTabWidget().getChildAt(mCurSelectTabIndex)).getLeft() + ((View) getTabWidget().getChildAt(mCurSelectTabIndex)).getWidth() / 2;  
112.         // 起始位置左边位置坐标  
113.         int startLeft = startMid - topSelect.getWidth() / 2;  
114.   
115.         // 目标位置中心点  
116.         int endMid = ((View) getTabWidget().getChildAt(selectIndex)).getLeft() + ((View) getTabWidget().getChildAt(selectIndex)).getWidth() / 2;  
117.         // 目标位置左边位置坐标  
118.         int endLeft = endMid - topSelect.getWidth() / 2;  
119.   
120.         TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - topSelect.getLeft(), 0, 0);  
121.         animation.setDuration(200);  
122.         animation.setFillAfter(true);  
123.         topSelect.bringToFront();  
124.         topSelect.startAnimation(animation);  
125.   
126.         // 改变当前选中按钮索引  
127.         mCurSelectTabIndex = selectIndex;  
128.   
129.         Log.i("fs", "endMid  " + endMid + "  startLeft  " + startLeft + "  endLeft" + (endLeft - topSelect.getLeft()));  
130.     }  
131.   
132.     /** 
133.      * 这个设置Tab标签本身的布局，需要TextView和ImageView不能重合 s:是文本显示的内容 i:是ImageView的图片位置 
134.      */  
135.     public View composeLayout(String s, int i) {  
136.         // 定义一个LinearLayout布局  
137.         LinearLayout layout = new LinearLayout(this);  
138.         // 设置布局垂直显示  
139.         layout.setOrientation(LinearLayout.VERTICAL);  
140.         ImageView iv = new ImageView(this);  
141.         imageList.add(iv);  
142.         iv.setImageResource(i);  
143.         LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);  
144.         lp.setMargins(0, 5, 0, 0);  
145.         layout.addView(iv, lp);  
146.         // 定义TextView  
147.         TextView tv = new TextView(this);  
148.         tv.setGravity(Gravity.CENTER);  
149.         tv.setSingleLine(true);  
150.         tv.setText(s);  
151.         tv.setTextColor(Color.WHITE);  
152.         tv.setTextSize(10);  
153.         layout.addView(tv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));  
154.         return layout;  
155.     }  
156. }