Android两级导航菜单栏的实现–FragmentTabHost结合ViewPager与Android 开源项目PagerSlidingTabStrip

简单总结一下，外层Tab用TabHost，类层Tab用Viepager+FramentStatePagerAdapter解决方案。

本篇将使用PagerSlidingTabStrip 和ViewPager实现子Tab导航菜单栏的页面滑动。当然，你也可以直接把PagerSlidingTabStrip 和ViewPager放到项目中当做主Tab导航菜单栏使用，只要思路掌握了，就可以随心所欲的灵活运用了。

 

先看一下效果图（二级Tab导航菜单栏可以实现滑动）：

%title插图%num %title插图%num

重写fragment_message.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=“match_parent”  
  5.     android:orientation=“vertical” >  
  7.     <com.example.testbase.customer.PagerSlidingTabStrip  
  8.         android:id=“@+id/tabs”  
  9.         android:layout_width=“match_parent”  
  10.         android:layout_height=“40dp” />  
  12.     <android.support.v4.view.ViewPager  
  13.         android:id=“@+id/pager”  
  14.         android:layout_width=“match_parent”  
  15.         android:layout_height=“wrap_content”  
  16.         android:layout_below=“@+id/tabs” />  
  18. </LinearLayout>  

 

 

重写 FragmentMessage

 

 

  1. public class FragmentMessage extends Fragment {  
  3.     private SubFragment1 subFragment1;  
  4.     private SubFragment2 subFragment2;  
  5.     private SubFragment3 subFragment3;  
  6.     /** 
  7.      * PagerSlidingTabStrip的实例 
  8.      */  
  9.     private PagerSlidingTabStrip tabs;  
  11.     /** 
  12.      * 获取当前屏幕的密度 
  13.      */  
  14.     private DisplayMetrics dm;  
  16.     @Override  
  17.     public void onCreate(Bundle savedInstanceState) {// 在前面执行  
  19.         super.onCreate(savedInstanceState);  
  20.         // 获取参数  
  21.         Bundle bundle = getArguments();
  22.         if (null != bundle) {  
  23.             //  
  24.         }
  25.     }
  27.     @Override  
  28.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  29.             Bundle savedInstanceState) {
  30.         T.showShort(getActivity(), “FragmentMessage==onCreateView”);  
  31.         View view = inflater.inflate(R.layout.fragment_message, null);  
  33.         initView(view);
  35.         return view;  
  36.     }
  38.     private void initView(View view) {  
  40.         dm = getResources().getDisplayMetrics();
  41.         ViewPager pager = (ViewPager) view.findViewById(R.id.pager);
  42.         tabs = (PagerSlidingTabStrip) view.findViewById(R.id.tabs);
  43.         pager.setAdapter(new MyPagerAdapter(getChildFragmentManager()));  
  44.         tabs.setViewPager(pager);
  45.         setTabsValue();
  47.     }
  49.     /** 
  50.      * 对PagerSlidingTabStrip的各项属性进行赋值。 
  51.      */  
  52.     private void setTabsValue() {  
  53.         // 设置Tab是自动填充满屏幕的  
  54.         tabs.setShouldExpand(true);  
  55.         // 设置Tab的分割线是透明的  
  56.         tabs.setDividerColor(Color.TRANSPARENT);
  57.         // tabs.setDividerColor(Color.BLACK);  
  58.         // 设置Tab底部线的高度  
  59.         tabs.setUnderlineHeight((int) TypedValue.applyDimension(  
  60.                 TypedValue.COMPLEX_UNIT_DIP, 1, dm));  
  61.         // 设置Tab Indicator的高度  
  62.         tabs.setIndicatorHeight((int) TypedValue.applyDimension(  
  63.                 TypedValue.COMPLEX_UNIT_DIP, 4, dm));// 4  
  64.         // 设置Tab标题文字的大小  
  65.         tabs.setTextSize((int) TypedValue.applyDimension(  
  66.                 TypedValue.COMPLEX_UNIT_SP, 16, dm)); // 16  
  67.         // 设置Tab Indicator的颜色  
  68.         tabs.setIndicatorColor(Color.parseColor(“#45c01a”));// #45c01a  
  69.         // 设置选中Tab文字的颜色 (这是我自定义的一个方法)  
  70.         tabs.setSelectedTextColor(Color.parseColor(“#45c01a”));// #45c01a  
  71.         // 取消点击Tab时的背景色  
  72.         tabs.setTabBackground(0);  
  73.     }
  75.     // FragmentPagerAdapter FragmentStatePagerAdapter //不能用FragmentPagerAdapter  
  78.     public class MyPagerAdapter extends FragmentStatePagerAdapter {  
  80.         public MyPagerAdapter(FragmentManager fm) {  
  81.             super(fm);  
  82.             // TODO Auto-generated constructor stub  
  83.         }
  85.         private final String[] titles = { “SubOne”, “SubTwo”, “SubThree” };  
  87.         @Override  
  88.         public CharSequence getPageTitle(int position) {  
  89.             return titles[position];  
  90.         }
  92.         @Override  
  93.         public int getCount() {  
  94.             return titles.length;  
  95.         }
  97.         @Override  
  98.         public Fragment getItem(int position) {  
  99.             switch (position) {  
  100.             case 0:  
  102.                 if (null == subFragment1) {  
  103.                     subFragment1 = new SubFragment1();  
  104.                 }
  106.                 return subFragment1;  
  108.             case 1:  
  110.                 if (null == subFragment2) {  
  111.                     subFragment2 = new SubFragment2();  
  112.                 }
  114.                 return subFragment2;  
  115.             case 2:  
  117.                 if (null == subFragment3) {  
  118.                     subFragment3 = new SubFragment3();  
  119.                 }
  120.                 subFragment1 = new SubFragment1();  
  121.                 return subFragment3;  
  122.             default:  
  123.                 return null;  
  124.             }
  125.         }
  127.     }
  128. }

 

 

再添加 SubFragment1（这里只给出一个，其它类似）

 

  1. public class SubFragment1 extends Fragment {  
  3.     @Override  
  4.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  5.             Bundle savedInstanceState) {
  6.         T.showShort(getActivity(), “SubFragment1==onCreateView”);  
  7.         TextView tv = new TextView(getActivity());  
  8.         tv.setTextSize(25);  
  9.         tv.setBackgroundColor(Color.parseColor(“#FFA07A”));  
  10.         tv.setText(“SubFragment1”);  
  11.         tv.setGravity(Gravity.CENTER);
  12.         return tv;  
  13.     }
  14. }

感觉没什么可写了……当然，你会发现切换ViewPager的时候，它所管理的Fragment生命周期很有意思，具体需求具体解决，方案很多……