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);
                }
            }

 

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

 

posted on 2019-04-24 16:21  vonzc  阅读(135)  评论(0编辑  收藏  举报