viewPager与Fragment结合写一个例子

我们来看效果图:

顶上有三个Tab可以切换，每切换一个Tab可以打开一个网页，不少应用的helper都是这样的，下面我们来实现

xml文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_bar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/white">

        <ImageButton
            android:id="@+id/ib_back"
            style="@style/ActionBarItem"
            android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@drawable/mt_actionbar_back" />


        <com.pic.optimize.helper.view.PagerSlidingTabStrip
            android:id="@+id/indicator"
            android:layout_width="match_parent"
            android:layout_toRightOf="@id/ib_back"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="40dp"
            android:layout_height="50dp"
            android:layout_centerInParent="true" />

    </RelativeLayout>


    <View
        android:id="@+id/match_parent"
        android:layout_width="fill_parent"
        android:layout_height="1px"
        android:background="@color/mt_dividing_line" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

我们的Tab是用PagerSlidingTabStrip来实现的，这个控件继承于HorizontalScrollView

我们先封装一个基类activity代码:

public abstract class ViewPagerActivity extends FragmentActivity implements View.OnClickListener {
    public ViewPager mViewpager;
    String[] mTitles;
    MyAdapter adapter;
    protected FragmentManager mFragmentManager;
    protected PagerSlidingTabStrip indicator;


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tp_paper_helper);
        mTitles = getTabText();
        mViewpager = (ViewPager) findViewById(R.id.pager);
        mFragmentManager = getSupportFragmentManager();
        adapter = new MyAdapter(mFragmentManager);
        mViewpager.setAdapter(adapter);

        indicator = (PagerSlidingTabStrip)findViewById(R.id.indicator);
        findViewById(R.id.ib_back).setOnClickListener(this);
        setIndicatorArr();
        indicator.setViewPager(mViewpager);
    }

    private void setIndicatorArr() {
        indicator.setDividerColorResource(android.R.color.transparent);
        indicator.setIndicatorColorResource(R.color.mt_h_text_blue);
        indicator.setIndicatorHeight(4);
        indicator.setUnderlineColorResource(android.R.color.transparent);
        indicator.setShouldExpand(true);
        indicator.setDividerPadding(24);
        indicator.setTextColorResource(R.color.mt_h_text_black);
        indicator.setIndicatorSelectTextColorResource(R.color.mt_h_text_blue);
        indicator.setTextSize(14);
        indicator.setTabPaddingLeftRight(12);
    }

    public void setCurrentItem(int index) {
        indicator.setCurrentItem(index);
    }

    public abstract ArrayList<Fragment> getFragmentList();

    public abstract String[] getTabText();


    class MyAdapter extends FragmentPagerAdapter {
        ArrayList<Fragment> fragment = null;

        public MyAdapter(FragmentManager fm) {
            super(fm);
            fragment = getFragmentList();
        }

        @Override
        public Fragment getItem(int arg0) {
            return fragment.get(arg0);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTitles[position];
        }

        @Override
        public int getCount() {
            return fragment.size();
        }
    }

    @Override
    public void onClick(View v) {
        int id = v.getId();
        if (id == R.id.ib_back) {
            finish();
        }
    }
}

实现的activity:

public class PaperHelpActivity extends ViewPagerActivity {

    private boolean mShouldRecordTracker;

    private String[] mUrls = new String[]{
            "https://www.baidu.com/"
            ,"https://3w.huanqiu.com/a/de583b/7InhuI8vP4Q?agt=8/"
            ,"https://www.hao123.com/"};
    private int mIndex;

    public static void startActivity(Context context,int index) {
        Intent intent = new Intent();
        intent.putExtra("index",index);
        intent.setClass(context,PaperHelpActivity.class);
        context.startActivity(intent);
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if(getIntent() != null) {
            mIndex = getIntent().getIntExtra("index",0);
            setCurrentItem(mIndex);
        }

        indicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                if(mShouldRecordTracker) {
                    if(i == 0) {
                    }else if(i == 1) {
                    }else if(i == 2) {
                    }
                }
                mShouldRecordTracker = true;
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }

    @Override
    public ArrayList<Fragment> getFragmentList(){
        return getWebViewFragmentList();
    }

    private ArrayList<Fragment> getWebViewFragmentList() {
        ArrayList<Fragment> list = new ArrayList<>();
        for (int i=0;i<mUrls.length;i++) {
            String url = mUrls[i];
            WebViewFragment webViewFragment =  new WebViewFragment();
            Bundle bundle = new Bundle();
            bundle.putString("url",url);
            webViewFragment.setArguments(bundle);
            list.add(webViewFragment);
        }
        return list;
    }

    @Override
    public String[] getTabText() {
        return new String[]{"百度","新闻","hao123"};
    }

}

我把代码上传到了github:https://github.com/nickgao1986/StepSport