怎樣抽取一個“滑動標題欄+ViewPager”？

前段時間遇到一個需求：滑動標題欄+可滑動的viewpager展示頁面數據，然后到github上找了一圈，發現這個作者寫的工程還是蠻好用的LuckyJayce/ViewPagerIndicator,效果如圖：

pic1

• 為什么要抽取這個東西呢？
  因為想要下次遇到的時候直接使用，不要到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;
    }
}

希望能幫到你！