Fragment+FragmentTabHost实现仿QQ底部菜单栏

QQ人群里使用最多的手机APP之一,它的设计、排版都深受大众的喜爱,那么你想不想知道QQ的底部导航是如何实现的呢?其实很简单,通过Fragment+FragmentTabHost我们就可以轻松实现类似QQ底部导航的效果。
Fragment+FragmentTabHost实现仿QQ导航
第一步:看到QQ底部导航只要有三栏,第一栏是“消息”,第二栏“联系人”,第三栏“动态”,可以自由的在这三栏导航中来回的切换,然后在上面展示不同的内容。这三栏中的一个特点是:文字的上面是一张图标,所以在制作布局的时候我们可以只需要一个模板就可以了,我们将这个模板命名为qq_nav_item.xml,具体代码如下:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3. android:layout_width="match_parent"  
  4. android:layout_height="wrap_content"  
  5. android:gravity="center"  
  6. android:orientation="vertical" >  
  7.   
  8. <ImageView  
  9. android:id="@+id/qq_nav_icon_iv"  
  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_message_btn">  
  15. </ImageView>  
  16.   
  17. <TextView  
  18. android:id="@+id/qq_nav_text_tv"  
  19. android:layout_width="wrap_content"  
  20. android:layout_height="wrap_content"  
  21. android:text="消息"  
  22. android:textSize="10dp"  
  23. android:textColor="@color/change_color_text">  
  24. </TextView>  
  25.   
  26. </LinearLayout>  

第二步:我们看到QQ在切换到当前状态的时候,图标和文字颜色都发生了改变,那是在控件中添加了颜色切换器(命名为change_color_text.xml)和图标切换器(命名为one_change_icon_image.xml,two_change_icon_image.xml,three_change_icon_image.xml),因为图标有三种,颜色只有一种变化,所有需要声明三个图标切换器,代码如下:

  1. <!--颜色切换器-->  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.   
  4. <item android:color="#0033FF" android:state_selected="true"/>  
  5. <item android:color="#cccccc"/>  
  6.   
  7. </selector>  
  8. <!--one_change_icon_image.xml-->  
  9. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  10.   
  11. <item android:drawable="@drawable/message_icon_pressed" android:state_selected="true"/>  
  12. <item android:drawable="@drawable/message_icon_normal"/>  
  13.   
  14. </selector>  
  15.   
  16. <!--two_change_icon_image.xml-->  
  17. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  18.   
  19. <item android:drawable="@drawable/contact_icon_pressed" android:state_selected="true"/>  
  20. <item android:drawable="@drawable/contact_icon_normal"/>  
  21.   
  22. </selector>  
  23.   
  24. <!--three_change_icon_image.xml-->  
  25. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  26.   
  27. <item android:drawable="@drawable/dynamic_icon_pressed" android:state_selected="true"/>  
  28. <item android:drawable="@drawable/dynamic_icon_normal"/>  
  29.   
  30. </selector>  

第三步:我们可以制作QQ主页面了,命名为qq_main_layout.xml,在这个布局中使用FragmentTabHost,实现导航内容之间的切换,FlameLayout里面用于显示导航下的内容,比如消息导航中,FlameLayout里面显示当前正在聊天的窗口,代码如下:
Fragment+FragmentTabHost实现仿QQ导航

  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/qq_tabcontent"  
  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="@+id/tabhost"  
  15. android:layout_width="fill_parent"  
  16. android:layout_height="wrap_content"  
  17. android:background="#ffffff">  
  18.   
  19. <FrameLayout  
  20. android:id="@+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>  

第四步:创建三个Fragment页面,分别在导航切换到“消息”、“联系人”、“动态”时展示对应的内容,分别命名MessageFragment.java,ContactFragment.java和DynamicFragment.java,在这里我们主要显示QQ导航制作,关于内容页面我将在下一篇文章中介绍。这里我们就简单在内容中的Fragment输出有些提示文字,使用统一的布局:fragment_content.xml,代码如下:

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2. android:layout_width="fill_parent"  
  3. android:layout_height="fill_parent" >  
  4.   
  5. <TextView  
  6. android:id="@+id/fragment_content_tv"  
  7. android:layout_width="fill_parent"  
  8. android:layout_height="fill_parent"  
  9. android:gravity="center"  
  10. android:textSize="20dp"  
  11. android:text="QQ内容显示页面" />  
  12.   
  13. </RelativeLayout>  
  1. /* 
  2. MessageFragment.java 
  3. */  
  4.   
  5. import android.os.Bundle;  
  6. import android.support.v4.app.Fragment;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.view.ViewGroup;  
  10.   
  11. public class MessageFragment extends Fragment{  
  12. @Override  
  13. public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  
  14.   
  15.                    return inflater.inflate(R.layout.fragment_content, null);  
  16.   
  17.     }  
  18. }  
  1. /* 
  2. ContactFragment.java 
  3. */  
  4.   
  5. import android.os.Bundle;  
  6. import android.support.v4.app.Fragment;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.view.ViewGroup;  
  10.   
  11. public class ContactFragment extends Fragment{  
  12.   
  13. @Override  
  14. public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  
  15. return inflater.inflate(R.layout.fragment_content, null);  
  16. }  
  17. }  
  1. /* 
  2. DynamicFragment.java 
  3. */  
  4.   
  5. import android.os.Bundle;  
  6. import android.support.v4.app.Fragment;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.view.ViewGroup;  
  10.   
  11. public class DynamicFragment extends Fragment{  
  12.   
  13. @Override  
  14. public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  
  15. return inflater.inflate(R.layout.fragment_content, null);  
  16. }  
  17. }  

第五步:创建Activity类,命名为QQMainActivity.java解析布局文件,同时将MessageFragment,ContactFragment和DynamicFragment嵌入到导航中,展示指定QQ导航下的内容,代码如下:

  1. import android.os.Bundle;  
  2. import android.support.v4.app.FragmentActivity;  
  3. import android.support.v4.app.FragmentTabHost;  
  4. import android.view.LayoutInflater;  
  5. import android.view.View;  
  6. import android.widget.ImageView;  
  7. import android.widget.TabHost.TabSpec;  
  8. import android.widget.TextView;  
  9.   
  10. public class QQMainActivity extends FragmentActivity{  
  11. //定义FragmentTabHost对象  
  12. private FragmentTabHost mTabHost;  
  13.   
  14. //定义一个布局  
  15. private LayoutInflater layoutInflater;  
  16.   
  17. //定义数组来存放Fragment界面  
  18. private Class fragmentArray[] = {MessageFragment.class,ContactFragment.class,DynamicFragment.class};  
  19.   
  20. //定义数组来存放导航图标  
  21. private int mImageViewArray[] = {R.drawable.one_change_icon_image,R.drawable.two_change_icon_image,R.drawable.three_change_icon_image};  
  22.   
  23. //Tab选项卡的文字  
  24. private String mTextviewArray[] = {"消息""联系人""动态"};  
  25.   
  26. public void onCreate(Bundle savedInstanceState) {  
  27. super.onCreate(savedInstanceState);  
  28. setContentView(R.layout.qq_main_layout);  
  29.   
  30. initView();  
  31. }  
  32.   
  33. /** 
  34. * 初始化组件 
  35. */  
  36. private void initView(){  
  37. //实例化布局对象  
  38. layoutInflater = LayoutInflater.from(this);  
  39.   
  40. //实例化TabHost对象,得到TabHost  
  41. mTabHost = (FragmentTabHost)findViewById(R.id.tabhost);  
  42. mTabHost.setup(this, getSupportFragmentManager(), R.id.qq_tabcontent);  
  43.   
  44. //得到fragment的个数  
  45. int count = fragmentArray.length;  
  46.   
  47. for(int i = 0; i < count; i++){  
  48. //为每一个Tab按钮设置图标、文字和内容  
  49. TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i]).setIndicator(getTabItemView(i));  
  50. //将Tab按钮添加进Tab选项卡中  
  51. mTabHost.addTab(tabSpec, fragmentArray[i], null);  
  52. }  
  53. }  
  54.   
  55. /** 
  56. * 给Tab按钮设置图标和文字 
  57. */  
  58. private View getTabItemView(int index){  
  59. View view = layoutInflater.inflate(R.layout.tab_item_view, null);  
  60.   
  61. ImageView imageView = (ImageView) view.findViewById(R.id.qq_nav_icon_iv);  
  62. imageView.setImageResource(mImageViewArray[index]);  
  63.   
  64. TextView textView = (TextView) view.findViewById(R.id.qq_nav_text_tv);  
  65. textView.setText(mTextviewArray[index]);  
  66.   
  67. return view;  
  68. }  
  69. }  

总结:按照步骤下来,仿QQ导航我们算是完成了,不懂做的博友们可以收藏,留着备用,那个我们每天都再用的QQ导航原来制作起来也就那样,还算简单吧?后期整理源码后,提供下载,尽请期待!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值