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

2023-01-17 07:20:48

http://www.cnblogs.com/aademeng/articles/6119737.html

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

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

特别注明：本篇所使用的PagerSlidingTabStrip代码来自郭林。

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

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

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

重写 FragmentMessage

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

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

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

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

Demo下载地址：http://download.csdn.net/detail/yalinfendou/8543965

上一篇：jQuery-二级导航


下一篇：防刷新jq左侧滚动条导航展示