Android 进阶——ViewPager详解之ViewPager的应用(二)

引言

上一篇文章主要是介绍了ViewPager和PagerAdapter的功能原理，正所谓光说不练空把式，很多时候听别人说起来，感觉什么都懂了，但是真正地抛开一切自己去写，就又好像突然迷茫了，建议初学者无论是看了什么资料、教程之后都不要是拿来主义，直接copy完事，应该抛开资料自己从零开始去写，也许在写的过程中你会不自觉地去思考，那绝对是有收获的。

一、ViewPager+PagerAdapter实战

这个实例没有采用当前主流的Fragment的方式是很古老的，防古老网易新闻的主界面，效果一般般，写这个例子主要是为了给大家介绍一个新的东西PagerTabStrip，嵌套在ViewPager里使用的两个组件类——PagerTitleStrip和PagerTabStrip，PagerTitleStrip类直接继承自ViewGroup类，而PagerTabStrip类继承PagerTitleStrip类，所以这两个类也是容器类。但是有一点需要注意，在定义xml的layout的时候，这两个类必须是ViewPager标签的子标签。虽然古老但是在只有两个Tab的时候还是蛮方便的。

1、定义MainActivity的布局和Tab界面的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">
    <android.support.v4.view.ViewPager  android:id="@+id/id_main_container" android:layout_width="match_parent" android:layout_height="match_parent" >
        <android.support.v4.view.PagerTabStrip  android:id="@+id/id_main_tabstrip" android:layout_width="wrap_content" android:layout_height="48dip" />
    </android.support.v4.view.ViewPager>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
    <Button  android:id="@+id/update_home" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Update Home Tab"/>
    <ImageView  android:layout_width="match_parent" android:layout_height="match_parent" android:src="@mipmap/ic_green_launcher"/>
</LinearLayout>

2、实现MainActivity并为ViewPager设置适配器和监听

public class MainActivity extends Activity {
    private ViewPager mViewPager;
    private PagerTabStrip mPagerTabStrip;
    private List<View> mViews=new ArrayList<View>();//定义用于存放Tab对应的View，你也可以用其他的集合来存放，List用得比较多
    private List<String> mTitle=new ArrayList<String>();//用于存放Tab标题

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();//一系列初始化
    }
    //找到对应的View
    private void getViews(){
        mViewPager= (ViewPager) findViewById(R.id.id_main_container);
        mPagerTabStrip= (PagerTabStrip) findViewById(R.id.id_main_tabstrip);
    }
    private void initTab(){
        mPagerTabStrip.setDrawFullUnderline(false);
        mPagerTabStrip.setBackgroundColor(Color.parseColor("#2b2b2b"));
        //设置当前tab页签
        mPagerTabStrip.setTextColor(Color.parseColor("#236f28"));
        mPagerTabStrip.setTabIndicatorColor(Color.parseColor("#bc6e1c"));
    }
     //开始添加view到List中
    private void addViewToTab(){
        View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_home_tab, null);
        mViews.add(view);
        view = LayoutInflater.from(this).inflate(R.layout.activity_discovery_tab, null);
        mViews.add(view);
        view = LayoutInflater.from(this).inflate(R.layout.activity_me_tab, null);
        mViews.add(view);
        //页签项标题
        mTitle.add("主界面");
        mTitle.add("发现");
        mTitle.add("我");
    }
    private void init(){
        getViews();
        initTab();
        addViewToTab();
        setAdapter();
    }
    private void setAdapter(){
        mViewPager.setAdapter(new GuidePagerAdapter());
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            /** * position :当前页面，及你点击滑动的页面 offset:当前页面偏移的百分比 * offsetPixels:当前页面偏移的像素位置 */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                Log.d("TAG","position:"+position+" positionOffset:"+positionOffset+" positionOffsetPixels:"+positionOffsetPixels);
            }
            @Override
            public void onPageSelected(int position) {
                Log.d("TAG","CurrentPageIndex:" +position);
            }
            //state滑动中的状态 有三种状态（0，1，2） 1：正在滑动 2：滑动完毕 0：什么都没做。
            @Override
            public void onPageScrollStateChanged(int state) {
                Log.d("TAG","State:"+state);
            }
        });
    }
    private class GuidePagerAdapter extends PagerAdapter{
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            Log.d("TAG","Page View init");
            container.addView(mViews.get(position));
            return mViews.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            Log.d("TAG","ITEM DESTROY");
            container.removeView(mViews.get(position));
        }

        @Override
        public int getCount() {
            return mViews!=null ? mViews.size() : 0;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }
        //如果使用了PagerTabStrip作为滑块，一定要记得重写这个方法，这个方法就是返回Tab的标题的
        @Override
        public CharSequence getPageTitle(int position) {
            return mTitle.get(position);
        }
    }
}

3、运行结果及日志

3.1、初始化进入到主界面时

会初始化当前Page以及其左边、右边的Page（如果存在的话）

01-03 11:53:47.825 30907-30907/com.crazymo.viewpager D/TAG: Page View init
01-03 11:53:47.826 30907-30907/com.crazymo.viewpager D/TAG: Page View init
01-03 11:53:47.946 30907-30907/com.crazymo.viewpager D/TAG: position:0  positionOffset:0.0  positionOffsetPixels:0

3.2、从主界面滑到发现界面时

首先State置为1表示主界面正在滑动，position代表当前的Page的index，随着滑动的进行页面偏移量positionOffset由0——>1变化，像素偏移量offsetPixels则会逐渐增大，当滑动到发现界面时候，主界面的State置为2表示主界面滑动完毕，当前位置置为1（因为发现页面的index为1），然后页面偏移量又从0——>1变化（只要是左移），注意此时并未触发destroyItem，因为前面说过会保持当前、及其左边、右边的Page，假如我们继续往右滑到”我“，则会在滑动到“我”之后，触发destroyItem移除掉”主界面”。

01-03 12:17:21.688 15869-15869/com.crazymo.viewpager D/TAG: State:1
01-03 12:17:21.691 15869-15869/com.crazymo.viewpager D/TAG: position:0  positionOffset:0.015277778  positionOffsetPixels:11
01-03 12:17:21.727 15869-15869/com.crazymo.viewpager D/TAG: position:0  positionOffset:0.05  positionOffsetPixels:36
01-03 12:17:21.766 15869-15869/com.crazymo.viewpager D/TAG: position:0  positionOffset:0.09166667  positionOffsetPixels:66
01-03 12:17:21.798 15869-15869/com.crazymo.viewpager D/TAG: position:0  positionOffset:0.11666667  positionOffsetPixels:84
01-03 12:17:21.857 15869-15869/com.crazymo.viewpager D/TAG: position:0  positionOffset:0.25694445  positionOffsetPixels:185
01-03 12:17:21.869 15869-15869/com.crazymo.viewpager D/TAG: position:0  positionOffset:0.2875  positionOffsetPixels:207
01-03 12:17:21.883 15869-15869/com.crazymo.viewpager D/TAG: State:2
01-03 12:17:21.883 15869-15869/com.crazymo.viewpager D/TAG: CurrentPageIndex:1
01-03 12:17:21.890 15869-15869/com.crazymo.viewpager D/TAG: position:0  positionOffset:0.32222223  positionOffsetPixels:232
01-03 12:17:22.300 15869-15869/com.crazymo.viewpager D/TAG: position:0  positionOffset:0.9986111  positionOffsetPixels:719
01-03 12:17:22.335 15869-15869/com.crazymo.viewpager D/TAG: position:1  positionOffset:0.0  positionOffsetPixels:0
01-03 12:17:22.522 15869-15869/com.crazymo.viewpager D/TAG: State:0
01-03 12:17:22.523 15869-15869/com.crazymo.viewpager D/TAG: Page View init

3.3、从我滑回到发现界面时

即从右往左滑动的时候，随着滑动的进行页面偏移量positionOffset由1——>0变化，像素偏移量offsetPixels则会逐渐减小

01-03 12:10:52.485 30907-30907/com.crazymo.viewpager D/TAG: State:1
01-03 12:10:52.488 30907-30907/com.crazymo.viewpager D/TAG: position:1  positionOffset:0.98749995  positionOffsetPixels:710
01-03 12:10:52.514 30907-30907/com.crazymo.viewpager D/TAG: position:1  positionOffset:0.95555556  positionOffsetPixels:688
01-03 12:10:52.528 30907-30907/com.crazymo.viewpager D/TAG: State:2
01-03 12:10:52.528 30907-30907/com.crazymo.viewpager D/TAG: CurrentPageIndex:1
01-03 12:10:52.533 30907-30907/com.crazymo.viewpager D/TAG: position:1  positionOffset:0.8958334  positionOffsetPixels:645
01-03 12:10:52.545 30907-30907/com.crazymo.viewpager D/TAG: position:1  positionOffset:0.8444444  positionOffsetPixels:607
.....
01-03 12:10:52.948 30907-30907/com.crazymo.viewpager D/TAG: position:1  positionOffset:0.0027778149  positionOffsetPixels:2
01-03 12:10:52.965 30907-30907/com.crazymo.viewpager D/TAG: position:1  positionOffset:0.0013889074  positionOffsetPixels:1
01-03 12:10:53.001 30907-30907/com.crazymo.viewpager D/TAG: position:1  positionOffset:0.0  positionOffsetPixels:0
01-03 12:10:53.168 30907-30907/com.crazymo.viewpager D/TAG: State:0
01-03 12:10:53.168 30907-30907/com.crazymo.viewpager D/TAG: Page View init

二、ViewPager+FragmentPagerAdapter实战