实现屏幕下方展示的TAB分页

 首先是效果图：


我把helloandroid兄的源代码整理了一下，并梳理了涉及到的知识点，总结如下：

1、TabActivity的使用

Java代码

1. public class MainActivity extends TabActivity {   
2.   
3.     private TabHost tabHost;   
4.   
5.     @Override  
6.     public void onCreate(Bundle savedInstanceState) {   
7.   
8.         super.onCreate(savedInstanceState);   
9.         setContentView(R.layout.main);   
10.         tabHost = getTabHost();   
11.         populateTab();   
12.   
13.     }   
14.   
15.     /**  
16.      * 组装tab控件  
17.      */  
18.     private void populateTab() {   
19.   
20.         Resources res = getResources();   
21.   
22.         populateTabItem(R.drawable.tab_home_selector,   
23.                 res.getString(R.string.tab_home), new Intent(this,   
24.                         HomeActivity.class));   
25.         populateTabItem(R.drawable.tab_atme_selector,   
26.                 res.getString(R.string.tab_refer), new Intent(this,   
27.                         ReferActivity.class));   
28.         populateTabItem(R.drawable.tab_message_selector,   
29.                 res.getString(R.string.tab_secret), new Intent(this,   
30.                         MessageActivity.class));   
31.         populateTabItem(R.drawable.tab_explore_selector,   
32.                 res.getString(R.string.tab_search), new Intent(this,   
33.                         SearchActivity.class));   
34.         populateTabItem(R.drawable.tab_focus_selector,   
35.                 res.getString(R.string.tab_attention), new Intent(this,   
36.                         AttentionActivity.class));   
37.   
38.     }   
39.   
40.     /**  
41.      * 生成tab_item  
42.      *   
43.      * @param imageResourceSelector  
44.      *            图片选择器  
45.      * @param text  
46.      *            文本  
47.      * @param intent  
48.      *            intent  
49.      */  
50.     private void populateTabItem(int imageResourceSelector, String text,   
51.             Intent intent) {   
52.   
53.         View view = View.inflate(this, R.layout.tab_item, null);// 拼装view   
54.         ((ImageView) view.findViewById(R.id.tab_item_imageview))   
55.                 .setImageResource(imageResourceSelector);   
56.         ((TextView) view.findViewById(R.id.tab_item_textview)).setText(text);   
57.   
58.         TabSpec spec = tabHost.newTabSpec(text).setIndicator(view)   
59.                 .setContent(intent);// 将view注入spec   
60.         tabHost.addTab(spec);   
61.   
62.     }   
63.   
64. }  

 

1. public class MainActivity extends TabActivity {  
2.   
3.     private TabHost tabHost;  
4.   
5.     @Override  
6.     public void onCreate(Bundle savedInstanceState) {  
7.   
8.         super.onCreate(savedInstanceState);  
9.         setContentView(R.layout.main);  
10.         tabHost = getTabHost();  
11.         populateTab();  
12.   
13.     }  
14.   
15.     /** 
16.      * 组装tab控件 
17.      */  
18.     private void populateTab() {  
19.   
20.         Resources res = getResources();  
21.   
22.         populateTabItem(R.drawable.tab_home_selector,  
23.                 res.getString(R.string.tab_home), new Intent(this,  
24.                         HomeActivity.class));  
25.         populateTabItem(R.drawable.tab_atme_selector,  
26.                 res.getString(R.string.tab_refer), new Intent(this,  
27.                         ReferActivity.class));  
28.         populateTabItem(R.drawable.tab_message_selector,  
29.                 res.getString(R.string.tab_secret), new Intent(this,  
30.                         MessageActivity.class));  
31.         populateTabItem(R.drawable.tab_explore_selector,  
32.                 res.getString(R.string.tab_search), new Intent(this,  
33.                         SearchActivity.class));  
34.         populateTabItem(R.drawable.tab_focus_selector,  
35.                 res.getString(R.string.tab_attention), new Intent(this,  
36.                         AttentionActivity.class));  
37.   
38.     }  
39.   
40.     /** 
41.      * 生成tab_item 
42.      *  
43.      * @param imageResourceSelector 
44.      *            图片选择器 
45.      * @param text 
46.      *            文本 
47.      * @param intent 
48.      *            intent 
49.      */  
50.     private void populateTabItem(int imageResourceSelector, String text,  
51.             Intent intent) {  
52.   
53.         View view = View.inflate(this, R.layout.tab_item, null);// 拼装view   
54.         ((ImageView) view.findViewById(R.id.tab_item_imageview))  
55.                 .setImageResource(imageResourceSelector);  
56.         ((TextView) view.findViewById(R.id.tab_item_textview)).setText(text);  
57.   
58.         TabSpec spec = tabHost.newTabSpec(text).setIndicator(view)  
59.                 .setContent(intent);// 将view注入spec   
60.         tabHost.addTab(spec);  
61.   
62.     }  
63.   
64. }  

Xml代码

1. <?xml version="1.0" encoding="UTF-8"?>  
2.   
3. <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">  
5.   
6.     <RelativeLayout android:orientation="vertical"  
7.         android:layout_width="fill_parent" android:layout_height="fill_parent">  
8.   
9.         <include android:id="@+id/head_line" layout="@layout/head_line"  
10.             android:layout_width="fill_parent" android:layout_height="wrap_content" />  
11.   
12.         <FrameLayout android:id="@android:id/tabcontent"  
13.             android:layout_below="@id/head_line" android:layout_width="fill_parent"  
14.             android:layout_height="fill_parent" android:layout_weight="1.0" />  
15.   
16.         <TabWidget android:id="@android:id/tabs" android:background="@drawable/tab_bkg"  
17.             android:layout_gravity="bottom" android:layout_height="60.0dip"  
18.             android:layout_width="fill_parent" android:fadingEdge="none"  
19.             android:fadingEdgeLength="0.0px" android:paddingLeft="0.0dip"  
20.             android:paddingTop="2.0dip" android:paddingRight="0.0dip"  
21.             android:paddingBottom="0.0dip" android:layout_alignParentBottom="true"  
22.             android:layout_alignParentTop="false" />  
23.   
24.     </RelativeLayout>  
25.   
26. </TabHost>  

 

1. <?xml version="1.0" encoding="UTF-8"?>  
2.   
3. <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">  
5.   
6.     <RelativeLayout android:orientation="vertical"  
7.         android:layout_width="fill_parent" android:layout_height="fill_parent">  
8.   
9.         <include android:id="@+id/head_line" layout="@layout/head_line"  
10.             android:layout_width="fill_parent" android:layout_height="wrap_content" />  
11.   
12.         <FrameLayout android:id="@android:id/tabcontent"  
13.             android:layout_below="@id/head_line" android:layout_width="fill_parent"  
14.             android:layout_height="fill_parent" android:layout_weight="1.0" />  
15.   
16.         <TabWidget android:id="@android:id/tabs" android:background="@drawable/tab_bkg"  
17.             android:layout_gravity="bottom" android:layout_height="60.0dip"  
18.             android:layout_width="fill_parent" android:fadingEdge="none"  
19.             android:fadingEdgeLength="0.0px" android:paddingLeft="0.0dip"  
20.             android:paddingTop="2.0dip" android:paddingRight="0.0dip"  
21.             android:paddingBottom="0.0dip" android:layout_alignParentBottom="true"  
22.             android:layout_alignParentTop="false" />  
23.   
24.     </RelativeLayout>  
25.   
26. </TabHost>  

可以看到，TabActivity是继承自Activity，包含了一个TabHost组件。TabHost组件则是继承自FrameLayout的ViewGroup。

TabHost组件本身的id必须是@android:id/tabhost，它必须包含一个FrameLayout，并且该FrameLayout的id必须是@android:id/tabcontent，此外还要包含一个TabWidget，id是@android:id/tabs。

FrameLayout可以放置每个单独的Activity，而TabWidget则是每个Tab页签。默认第一个页签对应的Activity，会首先显示在FrameLayout里。然后每次点击其他的Tab页签，对应的Activity就会切换显示到FrameLayout里。这个有点类似html中的frameset的概念

2、在main.xml中有一行

Xml代码

1. <include android:id="@+id/head_line" layout="@layout/head_line"  
2.             android:layout_width="fill_parent" android:layout_height="wrap_content" />  

view plain copy to clipboard print ?

1. <include android:id="@+id/head_line" layout="@layout/head_line"  
2.             android:layout_width="fill_parent" android:layout_height="wrap_content" />  

作用是引入另一个View文件，head_line.xml

Xml代码

1. <RelativeLayout android:background="@drawable/header"  
2.     android:layout_width="fill_parent" android:layout_height="wrap_content"  
3.     xmlns:android="http://schemas.android.com/apk/res/android">  
4.   
5.     <Button android:id="@+id/top_btn_left" android:textColor="@color/button_text_selector"  
6.         android:background="@drawable/top_refresh_selector"  
7.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
8.         android:layout_marginLeft="12.0dip" android:layout_alignParentLeft="true"  
9.         android:layout_centerVertical="true" />  
10.   
11.     <Button android:id="@+id/top_btn_right" android:textColor="@color/button_text_selector"  
12.         android:background="@drawable/top_edit_selector" android:layout_width="wrap_content"  
13.         android:layout_height="wrap_content" android:layout_marginRight="12.0dip"  
14.         android:layout_alignParentRight="true" android:layout_centerVertical="true" />  
15.   
16.     <TextView android:id="@+id/top_title" android:textSize="22.0sp"  
17.         android:textColor="@color/head_line_text" android:ellipsize="middle"  
18.         android:gravity="center_horizontal" android:layout_width="wrap_content"  
19.         android:layout_height="wrap_content" android:text="@string/user_name"  
20.         android:singleLine="true" android:layout_toLeftOf="@id/top_btn_right"  
21.         android:layout_toRightOf="@id/top_btn_left"  
22.         android:layout_centerInParent="true"  
23.         android:layout_alignWithParentIfMissing="true" />  
24.   
25. </RelativeLayout>  

 

1. <RelativeLayout android:background="@drawable/header"  
2.     android:layout_width="fill_parent" android:layout_height="wrap_content"  
3.     xmlns:android="http://schemas.android.com/apk/res/android">  
4.   
5.     <Button android:id="@+id/top_btn_left" android:textColor="@color/button_text_selector"  
6.         android:background="@drawable/top_refresh_selector"  
7.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
8.         android:layout_marginLeft="12.0dip" android:layout_alignParentLeft="true"  
9.         android:layout_centerVertical="true" />  
10.   
11.     <Button android:id="@+id/top_btn_right" android:textColor="@color/button_text_selector"  
12.         android:background="@drawable/top_edit_selector" android:layout_width="wrap_content"  
13.         android:layout_height="wrap_content" android:layout_marginRight="12.0dip"  
14.         android:layout_alignParentRight="true" android:layout_centerVertical="true" />  
15.   
16.     <TextView android:id="@+id/top_title" android:textSize="22.0sp"  
17.         android:textColor="@color/head_line_text" android:ellipsize="middle"  
18.         android:gravity="center_horizontal" android:layout_width="wrap_content"  
19.         android:layout_height="wrap_content" android:text="@string/user_name"  
20.         android:singleLine="true" android:layout_toLeftOf="@id/top_btn_right"  
21.         android:layout_toRightOf="@id/top_btn_left"  
22.         android:layout_centerInParent="true"  
23.         android:layout_alignWithParentIfMissing="true" />  
24.   
25. </RelativeLayout>  

用这种方式可以实现View组件的复用，是很方便的，可以学习一下这种方式。把要复用的View写在单独的xml文件里，然后在其他需要的地方，只要直接include就可以了

3、每个Tab页签对应的View是tab_item.xml

Xml代码

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <LinearLayout android:orientation="vertical"  
3.     android:layout_width="fill_parent" android:layout_height="wrap_content"  
4.     xmlns:android="http://schemas.android.com/apk/res/android">  
5.   
6.     <ImageView android:id="@+id/tab_item_imageview"  
7.         android:layout_width="fill_parent" android:layout_height="32.0dip"  
8.         android:scaleType="fitCenter" />  
9.   
10.     <TextView android:id="@+id/tab_item_textview"  
11.         android:layout_width="fill_parent" android:layout_height="wrap_content"  
12.         android:gravity="center" android:singleLine="true"  
13.         android:marqueeRepeatLimit="1" android:textSize="11.0sp"  
14.         android:ellipsize="marquee" />  
15.   
16. </LinearLayout>  

 

            <?xml version="1.0" encoding="UTF-8"?>  

1. <LinearLayout android:orientation="vertical"  
2.     android:layout_width="fill_parent" android:layout_height="wrap_content"  
3.     xmlns:android="http://schemas.android.com/apk/res/android">  
4.   
5.     <ImageView android:id="@+id/tab_item_imageview"  
6.         android:layout_width="fill_parent" android:layout_height="32.0dip"  
7.         android:scaleType="fitCenter" />  
8.   
9.     <TextView android:id="@+id/tab_item_textview"  
10.         android:layout_width="fill_parent" android:layout_height="wrap_content"  
11.         android:gravity="center" android:singleLine="true"  
12.         android:marqueeRepeatLimit="1" android:textSize="11.0sp"  
13.         android:ellipsize="marquee" />  
14.   
15. </LinearLayout>  

然后在java代码中进行组装

Java代码  

1. View view = View.inflate(this, R.layout.tab_item, null);// 拼装view   
2.         ((ImageView) view.findViewById(R.id.tab_item_imageview))   
3.                 .setImageResource(imageResourceSelector);   
4.         ((TextView) view.findViewById(R.id.tab_item_textview)).setText(text);   
5.   
6.         TabSpec spec = tabHost.newTabSpec(text).setIndicator(view)   
7.                 .setContent(intent);// 将view注入spec   
8.         tabHost.addTab(spec);  

 

1. View view = View.inflate(this, R.layout.tab_item, null);// 拼装view   
2.         ((ImageView) view.findViewById(R.id.tab_item_imageview))  
3.                 .setImageResource(imageResourceSelector);  
4.         ((TextView) view.findViewById(R.id.tab_item_textview)).setText(text);  
5.   
6.         TabSpec spec = tabHost.newTabSpec(text).setIndicator(view)  
7.                 .setContent(intent);// 将view注入spec   
8.         tabHost.addTab(spec);  

这部分的详细说明，可以看google提供的API

4、然后这个页面中用到了selector的概念，即当要动态改变某些组件的属性，如颜色，字体大小等，可以用selector来进行动态选择，这里有点类似CSS中的伪类的概念

Xml代码

1. android:textColor="@color/button_text_selector"  

 

1. android:textColor="@color/button_text_selector"  

Xml代码

1. <?xml version="1.0" encoding="UTF-8"?>  
2.   
3. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
4.   
5.     <item android:state_pressed="true" android:color="@color/button_text_pressed" />  
6.   
7.     <item android:state_selected="true" android:color="@color/button_text_pressed" />  
8.   
9.     <item android:color="@color/button_text_normal" />  
10.   
11. </selector>  

 

1. <?xml version="1.0" encoding="UTF-8"?>  
2.   
3. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
4.   
5.     <item android:state_pressed="true" android:color="@color/button_text_pressed" />  
6.   
7.     <item android:state_selected="true" android:color="@color/button_text_pressed" />  
8.   
9.     <item android:color="@color/button_text_normal" />  
10.   
11. </selector>  

上面代码的意思是，根据按钮控件是否按下，是否选择，在运行时动态决定颜色。通过同样的方式，还可以动态决定一个按钮的图片

Xml代码

1. <selector  
2.   xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/top_edit_normal" />  
4.     <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/top_edit_press" />  
5.     <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/top_edit_normal" />  
6.     <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/top_edit_press" />  
7.     <item android:state_pressed="true" android:drawable="@drawable/top_edit_press" />  
8. </selector>  

 

1. <selector  
2.   xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/top_edit_normal" />  
4.     <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/top_edit_press" />  
5.     <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/top_edit_normal" />  
6.     <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/top_edit_press" />  
7.     <item android:state_pressed="true" android:drawable="@drawable/top_edit_press" />  
8. </selector>  

5、这个页面还用到了一个比较特殊的技巧，就是通过xml，而不是静态图片来绘制背景

Xml代码

1. <RelativeLayout android:background="@drawable/header"  
2.     android:layout_width="fill_parent" android:layout_height="wrap_content"  
3.     xmlns:android="http://schemas.android.com/apk/res/android">  

 

1. <RelativeLayout android:background="@drawable/header"  
2.     android:layout_width="fill_parent" android:layout_height="wrap_content"  
3.     xmlns:android="http://schemas.android.com/apk/res/android">  

上面代码中的android:background="@drawable/header"，指向drawable文件夹中的header.xml

Xml代码

1. <?xml version="1.0" encoding="UTF-8"?>  
2.   
3. <shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">  
4.   
5.     <gradient android:startColor="#ff6c7078" android:endColor="#ffa6abb5"  
6.         android:angle="270.0" android:type="linear" />  
7.   
8. </shape>  

 

1. <?xml version="1.0" encoding="UTF-8"?>  
2.   
3. <shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">  
4.   
5.     <gradient android:startColor="#ff6c7078" android:endColor="#ffa6abb5"  
6.         android:angle="270.0" android:type="linear" />  
7.   
8. </shape>