使用TabHost实现类网易新闻

先贴图看效果



Activity代码：

1. package com.jay.test;
   
2. 
   
3. 
   
4. import android.app.Activity;
   
5. import android.os.Bundle;
   
6. import android.widget.ImageButton;
   
7. import android.widget.TabHost;
   
8. import android.widget.TabHost.OnTabChangeListener;
   
9. import android.widget.TabHost.TabSpec;
   
10. 
    
11. public class BottmoMenuBarActivity extends Activity {
    
12.     private TabHost tabs;
    
13.         private ImageButton footer_tab_btn1;
    
14.         private ImageButton footer_tab_btn2;
    
15.         private ImageButton footer_tab_btn3;
    
16.         private ImageButton footer_tab_btn4;
    
17.         private ImageButton footer_tab_btn5;
    
18.         private ImageButton footer_tab_btn6;
    
19.         private ImageButton footer_tab_btn7;
    
20. 
    
21.         /** Called when the activity is first created. */
    
22.     @Override
    
23.     public void onCreate(Bundle savedInstanceState) {
    
24.         super.onCreate(savedInstanceState);
    
25.         setContentView(R.layout.main);
    
26.         
    
27.         tabs = null;
    
28.                 tabs = (TabHost)findViewById(R.id.tabhost);
    
29.                 tabs.setup();
    
30.         tabs.setOnTabChangedListener(TabChangeListener);
    
31.         //设置Tab1
    
32.         footer_tab_btn1 = new ImageButton(this);
    
33.         footer_tab_btn1.setBackgroundResource(R.drawable.bottom_home_button);
    
34.         TabSpec tab1 = tabs.newTabSpec("home");  
    
35.         tab1.setIndicator(footer_tab_btn1);      // 设置tab1的名称
    
36.         tab1.setContent(R.id.text1);    // 关联控件  
    
37.         tabs.addTab(tab1);                // 添加tab1  
    
38.         
    
39.          
    
40.         //设置Tab2
    
41.         footer_tab_btn2 = new ImageButton(this);
    
42.         footer_tab_btn2.setBackgroundResource(R.drawable.bottom_book_button);
    
43.         TabSpec tab2 = tabs.newTabSpec("book");  
    
44.         tab2.setIndicator(footer_tab_btn2);  
    
45.         tab2.setContent(R.id.text2);   
    
46.         tabs.addTab(tab2);               
    
47.         
    
48.         //设置Tab3  
    
49.         footer_tab_btn3 = new ImageButton(this);
    
50.         footer_tab_btn3.setBackgroundResource(R.drawable.bottom_video_button);
    
51.         TabSpec tab3 = tabs.newTabSpec("video");  
    
52.         tab3.setIndicator(footer_tab_btn3);        
    
53.         tab3.setContent(R.id.text3);   
    
54.         tabs.addTab(tab3);               
    
55. 
    
56.         //设置Tab4  
    
57.         footer_tab_btn4 = new ImageButton(this);
    
58.         footer_tab_btn4.setBackgroundResource(R.drawable.bottom_magazine_button);
    
59.         TabSpec tab4 = tabs.newTabSpec("magazine");  
    
60.         tab4.setIndicator(footer_tab_btn4);        
    
61.         tab4.setContent(R.id.text4);     
    
62.         tabs.addTab(tab4);   
    
63.         
    
64.         // 设置Tab5
    
65.         footer_tab_btn5 = new ImageButton(this);
    
66.         footer_tab_btn5.setBackgroundResource(R.drawable.bottom_paper_button);
    
67.         TabSpec tab5 = tabs.newTabSpec("paper");  
    
68.         tab5.setIndicator(footer_tab_btn5);        
    
69.         tab5.setContent(R.id.text5);     
    
70.         tabs.addTab(tab5);   
    
71.         
    
72.         // 设置Tab6
    
73.         footer_tab_btn6 = new ImageButton(this);
    
74.         footer_tab_btn6.setBackgroundResource(R.drawable.bottom_thesis_button);
    
75.         TabSpec tab6 = tabs.newTabSpec("thesis");  
    
76.         tab6.setIndicator(footer_tab_btn6);        
    
77.         tab6.setContent(R.id.text6);     
    
78.         tabs.addTab(tab6);   
    
79.         
    
80.         // 设置Tab7
    
81.         footer_tab_btn7 = new ImageButton(this);
    
82.         footer_tab_btn7.setBackgroundResource(R.drawable.bottom_library_button);
    
83.         TabSpec tab7 = tabs.newTabSpec("library");  
    
84.         tab7.setIndicator(footer_tab_btn7);        
    
85.         tab7.setContent(R.id.text7);      
    
86.         tabs.addTab(tab7);   
    
87.     }
    
88.     private OnTabChangeListener TabChangeListener  = new OnTabChangeListener() {
    
89.                
    
90.                 @Override
    
91.                 public void onTabChanged(String tabId) {
    
92.                         int j = tabs.getTabWidget().getTabCount();
    
93.                         ImageButton currentView =(ImageButton) tabs.getCurrentTabView();
    
94.                         for (int i = 0; i < j ; i++){
    
95.                                 if(tabs.getCurrentTab() == i){
    
96.                                         currentView.setEnabled(false);
    
97.                                 }else{
    
98.                                         if(tabs.getTabWidget().getChildTabViewAt(i) != null){
    
99.                                                 ((ImageButton)tabs.getTabWidget().getChildTabViewAt(i)).setEnabled(true);
    
100.                                         }
     
101.                                 }
     
102.                         }
     
103.                 }
     
104.         };;
     
105. }

复制代码

一些注意点：
1.没有使用TabActivity，这是在3.0中不建议使用的。
2.setContent()函数除了直接添加视图ID，还可以添加intent直接在Tab的内容部分打开一个activity。如需要了解详细实现过程可自行搜索，也可以发邮件至我的邮箱[e-mail]
3.重载onTabChanged(String tabId) 函数的目的是实现按下面按钮时变蓝的效果，具体请查看源码
4.之所以菜单栏会在底部显示是在TabHost和TabWidget之间加了一层RelativeLayout，将TabWidget设置为alignParentBottom即可。
main.xml源码：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <RelativeLayout
   
3.     xmlns:android="http://schemas./apk/res/android"
   
4.     xmlns:tools="http://schemas./tools"
   
5.         android:layout_width="fill_parent"
   
6.         android:layout_height="fill_parent"
   
7.         >
   
8.         <TabHost
   
9.                 android:layout_width="fill_parent"
   
10.                 android:layout_height="fill_parent"
    
11.                 android:id="@+id/tabhost"
    
12.             tools:ignore="UselessParent" >
    
13.             <RelativeLayout
    
14.                         android:layout_width="fill_parent"
    
15.                         android:layout_height="match_parent"
    
16.                         >
    
17.                     <TabWidget
    
18.                         android:id="@android:id/tabs"
    
19.                         android:layout_width="fill_parent"
    
20.                         android:layout_height="50dp"
    
21.                         android:layout_alignParentBottom="true"
    
22.                         >
    
23.                     </TabWidget>
    
24.                
    
25.                     <FrameLayout
    
26.                         android:id="@android:id/tabcontent"
    
27.                         android:layout_width="fill_parent"
    
28.                         android:layout_height="fill_parent"
    
29.                                 android:layout_above="@android:id/tabs"
    
30.                         >
    
31.                         <TextView
    
32.                                 android:layout_width="fill_parent"
    
33.                                 android:layout_height="fill_parent"
    
34.                                 android:text="@string/text1"
    
35.                                 android:id="@+id/text1"
    
36.                             />
    
37.                         <TextView
    
38.                                 android:layout_width="fill_parent"
    
39.                                 android:layout_height="fill_parent"
    
40.                                 android:text="@string/text2"
    
41.                                 android:id="@+id/text2"
    
42.                             />
    
43.                         <TextView
    
44.                                 android:layout_width="fill_parent"
    
45.                                 android:layout_height="fill_parent"
    
46.                                 android:text="@string/text3"
    
47.                                 android:id="@+id/text3"
    
48.                             />
    
49.                         <TextView
    
50.                                 android:layout_width="fill_parent"
    
51.                                 android:layout_height="fill_parent"
    
52.                                 android:text="@string/text4"
    
53.                                 android:id="@+id/text4"
    
54.                             />
    
55.                         <TextView
    
56.                                 android:layout_width="fill_parent"
    
57.                                 android:layout_height="fill_parent"
    
58.                                 android:text="@string/text5"
    
59.                                 android:id="@+id/text5"
    
60.                             />
    
61.                         <TextView
    
62.                                 android:layout_width="fill_parent"
    
63.                                 android:layout_height="fill_parent"
    
64.                                 android:text="@string/text6"
    
65.                                 android:id="@+id/text6"
    
66.                             />
    
67.                         <TextView
    
68.                                 android:layout_width="fill_parent"
    
69.                                 android:layout_height="fill_parent"
    
70.                                 android:text="@string/text7"
    
71.                                 android:id="@+id/text7"
    
72.                             />
    
73.                     </FrameLayout>
    
74.                 </RelativeLayout>
    
75.         </TabHost>
    
76. </RelativeLayout>

复制代码

游客，如果您要查看本帖隐藏内容请回复