Android的ViewPager的学习

      这篇博客是对慕课网上看到的视频里学习到的知识的一些记录，让自己能够加深理解。视频地址：http://www.imooc.com/learn/1116

 

在这个视频中，目标是实现类似微信的主界面之间的切换，示例图如下：

ViewPager可以实现一个能够左右滑动切换的控件。

 

首先在布局中使用ViewPager控件，定义一些基本属性即可。

<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:id="@+id/vp_main">
</android.support.v4.view.ViewPager>

然后先创建一个自定义的Fragment，然后再在MainActivity中使用FragmentPagerAdapter来填充ViewPager中的内容，

FragmentPagerAdapter与其他的Adapter的使用类似。

顺带一提这里也可以使用：FragmentStatePagerAdapter

FragmentStatePagerAdapter与FragmentPagerAdapter的区别：
 在每个界面之间来回滑动时，当超出缓存区时
 FragmentPagerAdapter会调用onDestroyView（Fragment没有被销毁）
 而FragmentStatePagerAdapter会调用onDestroyView和onDestroy（Fragment被销毁）
 可能会出现的问题有：当使用的Fragment特别多时，使用FragmentPagerAdapter会让内存变得很大，
 所以具体的使用根据项目的不同来选择。

private void initViewPagerAdapter() {
        //解除缓存的界面数量限制
        mVpMain.setOffscreenPageLimit(mTitles.size());
        mVpMain.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int i) {
                TabFragment fragment = TabFragment.newInstance(mTitles.get(i));


                return fragment;
            }

            @Override
            public int getCount() {
                return mTitles.size();
            }
            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                TabFragment fragment = (TabFragment) super.instantiateItem(container, position);
                mFragment.put(position, fragment);
                return fragment;
            }

            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                mFragment.remove(position);
                super.destroyItem(container, position, object);
            }
        });

其中newInstance方法是TabFragment中的方法，将当前的页面对应的标题传给TabFragment，之后TabFragment类得到这个标题再显示在页面上

这样写的好处是：当Activity被停掉之后再次启动时，显示的内容能够还原。

public static TabFragment newInstance(String title){
        Bundle bundle = new Bundle();
        bundle.putString(BUNDLE_KEY_TITLE, title);
        TabFragment tabFragment = new TabFragment();
        tabFragment.setArguments(bundle);
        return tabFragment;
    }

屏幕下方的四个按钮使用4个自己定义的TabView来实现，难点在于，如何实现这个TabView在切换到当前页面与没有切换时改变颜色

先在TabView中创建一个方法，使得这个View在收到传入的值是0的时候，显示成未被选中的样子，而在传入的值是1时，显示成

被选中的样子。

public void setProgress(float progress) {
        //progress传入0的时候全黑（mIvIcon显示中）
        //progress传入1的时候全绿（mIvIconSelect显示中）
        //mIvIcon和mIvIconSelect代表选中与未选中的图片样式

        mIvIcon.setAlpha(1 - progress);
        mIvIconSelect.setAlpha(progress);
    }

 

下面这个自动生成的方法中有一个参数，positionOffset，当从左往右滑动时，这个参数会逐渐由0变1，从右往左滑时，会从1变0

于是在这个方法中写入以下代码，使得从第一个转到第二个时，第一个的参数由1变0，第二个的参数由0变1，第二个转到第一个时

第一个的参数由0变1，第二个的参数由1变0，这样就能实现颜色的转换

  @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixel) {

                if(positionOffset > 0) {
                    TabView left = mTabs.get(position);
                    TabView right = mTabs.get(position + 1);
                    left.setProgress(1 - positionOffset);
                    right.setProgress(positionOffset);
                }
            }

 

这样，切换的操作就能完成了。