【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>  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值