今天开始一个新专题：创新源于模仿。
第一篇从TabActivity着手，一直以为Android中的TabActivity只能放在上面，只能如此丑陋，直到有一天看到“米聊”。
咋一看，软件下面的那个菜单栏，觉得像是用LinearLayout+Button来实现的，但事实上，它却是一个Tab！
怎么看出来的？我就不多说了，你懂的。
下面我们来抽丝剥茧，一步步分析它的实现过程。
1.TabActivity的布局
+ expand sourceview plaincopy to clipboardprint?
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:gravity="center"
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0" >
<LinearLayout android:id="@+id/first"
android:orientation="vertical"
android:background="#ffffff"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="first tab" />
</LinearLayout>
<LinearLayout android:id="@+id/second"
android:orientation="vertical"
android:background="#ffffff"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="second tab" />
</LinearLayout>
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:background="@drawable/tab_bottom_bg"
android:padding="3.0dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.0" />
</LinearLayout>
</TabHost>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:gravity="center"
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0" >
<LinearLayout android:id="@+id/first"
android:orientation="vertical"
android:background="#ffffff"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="first tab" />
</LinearLayout>
<LinearLayout android:id="@+id/second"
android:orientation="vertical"
android:background="#ffffff"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="second tab" />
</LinearLayout>
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:background="@drawable/tab_bottom_bg"
android:padding="3.0dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.0" />
</LinearLayout>
</TabHost>
我们看到，要自定义一个位于屏幕下方的TAB标签，首先我们不能使用缺省的TabActivity实现了，啥事都要自己亲力亲为。
很好理解，把tabs放在tabcontent下面就可以了。其它不多说了。
2.MainActivity的实现代码
先看看缺省的实现代码，不复杂，省略一些无关的东西：
+ expand sourceview plaincopy to clipboardprint?
private void setIndicator(int icon, int title, int view) {
String str = getResources().getString(title);
TabHost.TabSpec localTabSpec=tabhost.newTabSpec(str).setIndicator(str,getResources().getDrawable(icon)).setContent(view);
tabhost.addTab(localTabSpec);
}
private void setIndicator(int icon, int title, int view) {
String str = getResources().getString(title);
TabHost.TabSpec localTabSpec=tabhost.newTabSpec(str).setIndicator(str,getResources().getDrawable(icon)).setContent(view);
tabhost.addTab(localTabSpec);
}
可以测试一下，效果出来了吧，虽然有点丑，但它真的在屏幕下方了。
3.美化TAB标签
现在我们来定制这个TAB的标签。先看代码：
+ expand sourceview plaincopy to clipboardprint?
private void setIndicator(int icon, int title, int view) {
View localView = LayoutInflater.from(this.tabhost.getContext()).inflate(R.layout.main_activity_tab, null);
((ImageView)localView.findViewById(R.id.main_activity_tab_image)).setBackgroundResource(icon);
((TextView)localView.findViewById(R.id.main_activity_tab_text)).setText(title);
String str = getResources().getString(title);
TabHost.TabSpec localTabSpec = tabhost.newTabSpec(str).setIndicator(localView).setContent(view);
tabhost.addTab(localTabSpec);
}
private void setIndicator(int icon, int title, int view) {
View localView = LayoutInflater.from(this.tabhost.getContext()).inflate(R.layout.main_activity_tab, null);
((ImageView)localView.findViewById(R.id.main_activity_tab_image)).setBackgroundResource(icon);
((TextView)localView.findViewById(R.id.main_activity_tab_text)).setText(title);
String str = getResources().getString(title);
TabHost.TabSpec localTabSpec = tabhost.newTabSpec(str).setIndicator(localView).setContent(view);
tabhost.addTab(localTabSpec);
}
注意到这个main_activity_tab的layout了吧，看看它的内容：
view plaincopy to clipboardprint?
01.<?xml version="1.0" encoding="UTF-8"?>
02.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03. android:gravity="center"
04. android:orientation="vertical"
05. android:id="@id/tabsLayout"
06. android:background="@drawable/tab_item_bkg"
07. android:padding="3.0dip"
08. android:layout_width="wrap_content"
09. android:layout_height="wrap_content"
10. android:layout_marginTop="3.0dip"
11. android:layout_marginBottom="3.0dip"
12. >
13.
14. <FrameLayout
15. android:layout_width="fill_parent"
16. android:layout_height="fill_parent"
17. android:layout_weight="0.6">
18.
19. <ImageView
20. android:layout_gravity="center"
21. android:id="@id/main_activity_tab_image"
22. android:layout_width="wrap_content"
23. android:layout_height="wrap_content"
24. android:layout_marginTop="2.0dip"
25. android:scaleType="center" />
26.
27. </FrameLayout>
28.
29. <TextView
30. android:textSize="12.0dip"
31. android:textColor="@drawable/tab_text_selector"
32. android:id="@id/main_activity_tab_text"
33. android:layout_width="wrap_content"
34. android:layout_height="wrap_content"
35. android:text="Title" />
36.</LinearLayout
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center"
android:orientation="vertical"
android:id="@id/tabsLayout"
android:background="@drawable/tab_item_bkg"
android:padding="3.0dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3.0dip"
android:layout_marginBottom="3.0dip"
>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.6">
<ImageView
android:layout_gravity="center"
android:id="@id/main_activity_tab_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2.0dip"
android:scaleType="center" />
</FrameLayout>
<TextView
android:textSize="12.0dip"
android:textColor="@drawable/tab_text_selector"
android:id="@id/main_activity_tab_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title" />
</LinearLayout
这个文件定义了每个TAB标签的样式，tab_item_bkg定义每个item的背景（包括focused/selected/pressed），每个item上面的图标和下面的文字都在代码中动态定义即可。其中tab_text_selector则定义文字的颜色。
剩下的事情就越发明显了，不用多说了。
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/sharetop/archive/2011/02/18/6194438.aspx#