怎樣抽取一個“滑動標題欄+ViewPager”允睹？
前段時間遇到一個需求：滑動標題欄+可滑動的viewpager展示頁面數(shù)據(jù)运准，然后到github上找了一圈，發(fā)現(xiàn)這個作者寫的工程還是蠻好用的LuckyJayce/ViewPagerIndicator,效果如圖：
pic1
- 為什么要抽取這個東西呢缭受？
因為想要下次遇到的時候直接使用胁澳，不要到git上去查找，然后添加米者，提高開發(fā)效率韭畸。 - 如何抽取"滑動標題欄+ViewPager"?
- 第一步，我們需要下載這個作者的Example蔓搞，然后運行跑起來胰丁，下載地址：demo
- 第二步，抽取我們依賴的java代碼到我們的Lib庫里喂分，將ColorBar锦庸、ScrollBar、OnTransitionTextListener蒲祈、FixIndicatorView甘萧、FragmentListPagerAdapter、Indicator梆掸、IndicatorViewPager扬卷、ScrollIndicaotorView、ColorGradient沥潭、RecycleBin邀泉、RecyclingPagerAdapter、SViewPager抽取到我們的Lib庫
- 第三步钝鸽，現(xiàn)繪制界面汇恤，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; } - 第五步因谎，因為這個界面的展示需要的數(shù)據(jù)有標題和子Fragment，所以有兩個方法特別重要颜懊，如：
因為是抽象的财岔，所以我們定義的這個ScrollViewpagerBaseFramgnt也是一個抽象類，這樣你自定義一個fragment繼承自ScrollViewPagerBaseFragment,就必須重寫這兩個方法河爹。public abstract BaseFragment[] getChildFragments(); public abstract String[] getChildTitles(); - 第六步匠璧，在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寬度就避免抖動現(xiàn)象
//1.3f是根據(jù)上面字體大小變化的倍數(shù)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;
}
}
//設置數(shù)據(jù)源
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媳维，然后系統(tǒng)會提示你去重寫ScrollViewpagerBaseFragment的抽象方法酿雪，然后初始化數(shù)據(jù)遏暴，并將初始化的數(shù)據(jù)賦值給這兩個方法，就可以使用"滑動標題欄+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;
}
}
希望能幫到你朋凉！
