【Android UI设计与开发】第08期：底部菜单栏（三）Fragment+FragmentTabHost实现仿新浪微博底部菜单栏

转载请注明出处：http://blog.csdn.net/yangyu20121224/article/details/9016223      

    

      在上一篇文章中，我们花了大量的篇幅来讲解Fragment这个新引进类的使用，目的就是为了让大家能够牢牢的掌握它的使用方法，以便读者在今后的开发中能够熟练的使用它。

 

一、实现效果图

二、项目工程结构

 

三、详细代码编写

 

1、主tab布局界面，main_tab_layout：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <FrameLayout  
8.         android:id="@+id/realtabcontent"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="0dip"  
11.         android:layout_weight="1" />  
12.   
13.     <android.support.v4.app.FragmentTabHost  
14.         android:id="@android:id/tabhost"  
15.         android:layout_width="fill_parent"  
16.         android:layout_height="wrap_content"   
17.         android:background="@drawable/maintab_toolbar_bg">  
18.   
19.         <FrameLayout  
20.             android:id="@android:id/tabcontent"  
21.             android:layout_width="0dp"  
22.             android:layout_height="0dp"  
23.             android:layout_weight="0" />              
24.     </android.support.v4.app.FragmentTabHost>  
25.   
26. </LinearLayout>  

2、Tab按钮选项布局，tab_item_view.xml：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="wrap_content"  
4.     android:layout_height="wrap_content"  
5.     android:gravity="center"  
6.     android:orientation="vertical" >  
7.   
8.     <ImageView  
9.         android:id="@+id/imageview"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:focusable="false"  
13.         android:padding="3dp"   
14.         android:src="@drawable/tab_home_btn">  
15.     </ImageView>  
16.   
17.     <TextView  
18.         android:id="@+id/textview"         
19.         android:layout_width="wrap_content"  
20.         android:layout_height="wrap_content"   
21.         android:text="首页"  
22.         android:textSize="10sp"  
23.         android:textColor="#ffffff">  
24.     </TextView>  
25.   
26. </LinearLayout>  

3、fragment布局界面，这里只列出一个，fragment_1.xml：

[html]  view plain copy

1. <span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent" >  
5.   
6.     <ImageView  
7.         android:id="@+id/imageview"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent"  
10.         android:scaleType="fitCenter"  
11.         android:src="@drawable/xianjian01" >  
12.     </ImageView>  
13.   
14. </LinearLayout></span>  

4、Tab选项的自定义按钮资源文件，列出其中一个按钮，tab_home_btn：

[html]  view plain copy

1. <span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <item android:drawable="@drawable/icon_home_sel" android:state_selected="true"/>  
5.     <item android:drawable="@drawable/icon_home_nor"/>  
6.   
7. </selector></span>  

5、Tab选项按钮背景资源文件，selector_tab_background.xml：

[html]  view plain copy

1. <span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <item android:drawable="@drawable/home_btn_bg" android:state_pressed="true"/>  
5.     <item android:drawable="@drawable/home_btn_bg" android:state_selected="true"/>  
6.   
7. </selector></span>  

6、主Activity类，MainTabActivity.java：

[java]  view plain copy

1. <span style="font-size:12px;">package com.yangyu.mycustomtab02;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.FragmentActivity;  
5. import android.support.v4.app.FragmentTabHost;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.widget.ImageView;  
9. import android.widget.TabHost.TabSpec;  
10. import android.widget.TextView;  
11.   
12. /** 
13.  * @author yangyu 
14.  *  功能描述：自定义TabHost 
15.  */  
16. public class MainTabActivity extends FragmentActivity{    
17.     //定义FragmentTabHost对象  
18.     private FragmentTabHost mTabHost;  
19.       
20.     //定义一个布局  
21.     private LayoutInflater layoutInflater;  
22.           
23.     //定义数组来存放Fragment界面  
24.     private Class fragmentArray[] = {FragmentPage1.class,FragmentPage2.class,FragmentPage3.class,FragmentPage4.class,FragmentPage5.class};  
25.       
26.     //定义数组来存放按钮图片  
27.     private int mImageViewArray[] = {R.drawable.tab_home_btn,R.drawable.tab_message_btn,R.drawable.tab_selfinfo_btn,  
28.                                      R.drawable.tab_square_btn,R.drawable.tab_more_btn};  
29.       
30.     //Tab选项卡的文字  
31.     private String mTextviewArray[] = {"首页", "消息", "好友", "广场", "更多"};  
32.       
33.     public void onCreate(Bundle savedInstanceState) {  
34.         super.onCreate(savedInstanceState);  
35.         setContentView(R.layout.main_tab_layout);  
36.           
37.         initView();  
38.     }  
39.        
40.     /** 
41.      * 初始化组件 
42.      */  
43.     private void initView(){  
44.         //实例化布局对象  
45.         layoutInflater = LayoutInflater.from(this);  
46.                   
47.         //实例化TabHost对象，得到TabHost  
48.         mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);  
49.         mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);   
50.           
51.         //得到fragment的个数  
52.         int count = fragmentArray.length;     
53.                   
54.         for(int i = 0; i < count; i++){    
55.             //为每一个Tab按钮设置图标、文字和内容  
56.             TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i]).setIndicator(getTabItemView(i));  
57.             //将Tab按钮添加进Tab选项卡中  
58.             mTabHost.addTab(tabSpec, fragmentArray[i], null);  
59.             //设置Tab按钮的背景  
60.             mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.selector_tab_background);  
61.         }  
62.     }  
63.                   
64.     /** 
65.      * 给Tab按钮设置图标和文字 
66.      */  
67.     private View getTabItemView(int index){  
68.         View view = layoutInflater.inflate(R.layout.tab_item_view, null);  
69.       
70.         ImageView imageView = (ImageView) view.findViewById(R.id.imageview);  
71.         imageView.setImageResource(mImageViewArray[index]);  
72.           
73.         TextView textView = (TextView) view.findViewById(R.id.textview);          
74.         textView.setText(mTextviewArray[index]);  
75.       
76.         return view;  
77.     }  
78. }</span>  

7、Fragment页面，FragmentPage1.java：

[java]  view plain copy

1. <span style="font-size:12px;">package com.yangyu.mycustomtab02;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8.   
9. public class FragmentPage1 extends Fragment{  
10.   
11.     @Override  
12.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {        
13.         return inflater.inflate(R.layout.fragment_1, null);       
14.     }     
15. }  
16. </span>  

代码下载地址