怎样抽取一个“滑动标题栏+ViewPager”？

怎样抽取一个“滑动标题栏+ViewPager”？

前段时间遇到一个需求：滑动标题栏+可滑动的viewpager展示页面数据，然后到github上找了一圈，发现这个作者写的工程还是蛮好用的LuckyJayce/ViewPagerIndicator,效果如图：

• 为什么要抽取这个东西呢？
  因为想要下次遇到的时候直接使用，不要到git上去查找，然后添加，提高开发效率。
• 如何抽取"滑动标题栏+ViewPager"?
  • 第一步，我们需要下载这个作者的Example，然后运行跑起来，下载地址：demo
  • 第二步，抽取我们依赖的java代码到我们的Lib库里，将ColorBar、ScrollBar、OnTransitionTextListener、FixIndicatorView、FragmentListPagerAdapter、Indicator、IndicatorViewPager、ScrollIndicaotorView、ColorGradient、RecycleBin、RecyclingPagerAdapter、SViewPager抽取到我们的Lib库
  • 第三步，现绘制界面，fragment_scroll_viewpager.xml如：

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <lib.view.indicator.ScrollIndicatorView
            android:id="@+id/moretab_indicator"
            android:layout_width="match_parent"
            android:layout_height="45dp" />
        <android.support.v4.view.ViewPager
            android:id="@+id/moretab_viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
    

  • 第四步，定义一个ScrollViewpagerBaseFragment继承自BaseFragment，先初始化界面的所有控件,如：

    @Bind(B.id.moretab_indicator)
    ScrollIndicatorView scrollIndicatorView;
    @Bind(B.id.moretab_viewPager)
    ViewPager viewPager;
    @Override
    public int getLayoutId() {
        return R.layout.fragment_scroll_viewpager;
    }
    

  • 第五步，因为这个界面的展示需要的数据有标题和子Fragment，所以有两个方法特别重要，如：

    public abstract BaseFragment[] getChildFragments();
    public abstract String[] getChildTitles();
    

    因为是抽象的，所以我们定义的这个ScrollViewpagerBaseFramgnt也是一个抽象类，这样你自定义一个fragment继承自ScrollViewPagerBaseFragment,就必须重写这两个方法。
  • 第六步，在onCreaview中调用getChildFragments()和getChildTitles(),赋值给这个类中的fragmentList和titles。

    @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       View rootView=super.onCreateView(inflater, container, savedInstanceState);
       fragmentList=getChildFragments();
       titles=getChildTitles();
       Log.i(TAG,titles.toString());
       Log.i(TAG,fragmentList.toString());
       initScrollViewPager(titles,fragmentList);
       return rootView;
   }
    ```
  * 第七步，初始化标题栏和Viewpager的适配器
    ```java
    //fragment的适配器
    private class MyAdapter extends IndicatorViewPager.IndicatorFragmentPagerAdapter {

        public MyAdapter(FragmentManager fragmentManager) {
            super(fragmentManager);
        }

        @Override
        public int getCount() {
            return fragmentList.length;
        }

        @Override
        public View getViewForTab(int position, View convertView, ViewGroup container) {
            if (convertView == null) {
                convertView = getActivity().getLayoutInflater().inflate(R.layout.tab_top, container, false);
            }
            TextView textView = (TextView) convertView;
            textView.setText(titles[position]);

            int witdh = getTextWidth(textView);
//            int padding = DisplayUtil.dipToPix(getContext(), 8);
            //因为wrap的布局 字体大小变化会导致textView大小变化产生抖动，这里通过设置textView宽度就避免抖动现象
            //1.3f是根据上面字体大小变化的倍数1.3f设置
            textView.setWidth((int) (witdh * 1.13f) + 0);
            return convertView;
        }

        @Override
        public Fragment getFragmentForPage(int position) {
            return fragmentList[position];
        }

        private int getTextWidth(TextView textView) {
            if (textView == null) {
                return 0;
            }
            Rect bounds = new Rect();
            String text = textView.getText().toString();
            Paint paint = textView.getPaint();
            paint.getTextBounds(text, 0, text.length(), bounds);
            int width = bounds.left + bounds.width();
            return width;
        }

    }
    //设置数据源
    public void initScrollViewPager(String[] titles,BaseFragment[] fragmentList){
          scrollIndicatorView.setOnTransitionListener(new OnTransitionTextListener().setColor(0xFF2196F3, Color.GRAY).setSize(selectSize, unSelectSize));
  
          scrollIndicatorView.setScrollBar(new ColorBar(getContext(), 0xFF2196F3, 4));
  
          viewPager.setOffscreenPageLimit(2);
          indicatorViewPager = new IndicatorViewPager(scrollIndicatorView, viewPager);
          indicatorViewPager.setAdapter(new MyAdapter(getActivity().getSupportFragmentManager()));
          indicatorViewPager.setCurrentItem(0, true);
      }
    ```

* 如何使用抽取的“滑动标题栏+ViewPager”？  
  直接自定义一个TestFragment继承自ScrollViewpagerBaseFragment，然后系统会提示你去重写ScrollViewpagerBaseFragment的抽象方法，然后初始化数据，并将初始化的数据赋值给这两个方法，就可以使用"滑动标题栏+ViewPager"了。
```java
  public class TestFragment extends ScrollViewpagerBaseFragment{
    private BaseFragment[] childsFragment = {new DeviceInfoFragment(), new DeviceInfoFragment(), new DeviceInfoFragment(), new DeviceInfoFragment(), new DeviceInfoFragment()};
    private String[] childTitle = {"title1","title2","title3","title4","title5"};
    @Override
    public BaseFragment[] getChildFragments() {
        return childsFragment;
    }

    @Override
    public String[] getChildTitles() {
        return childTitle;
    }
}

希望能帮到你！