模仿 微信8.0下拉出现小程序 - 二楼页面

2021年8月1日

先放上今天思路的实现效果图（ViewPager2）： 

     

仅测试 二楼效果，头部三个圆点的动画我之前实现过，今天这个还没加入。

       之前也试过其他方法，比如用帧布局放两个待加载的 Fragment ，如果有某个 Fragment 被覆盖，就直接隐藏布局。然后通过 scrollTo() 或者 layout() 方法重摆 Fragment 的位置，产生拖动的效果。但是实现效果并不理想。今天偶然得到灵感：我能不能用 ViewPager2 去实现呢？

       这个效果做的也比较匆忙，ViewPager2 中的两个 Fragment 我就用两张背景图代替了……如果要加上消息列表和小程序列表，还要额外处理列表和 ViewPager2 的滑动冲突问题，重写列表控件然后对其用内部拦截法应该就可以解决滑动冲突问题了。

       这个效果主要就是利用 ViewPager2 垂直滑动的特性，因为 ViewPager2 是一个继承了控件  RecyclerView 的 final 类，这点比 ViewPager 要好。然后页面切换的动画效果，主要就是利用了 PageTransformer 来实现的，这就比我以前用 Animation 实现的方法要方便很多。

下面放上自己研究的代码，或许有不成熟之处，还要继续改进： 

1、ViewPager2 需要添加依赖才能用：

dependencies {
    implementation "androidx.viewpager2:viewpager2:1.0.0"
}

2、XML布局（activity_twolevel.xml ）

      没有什么内容，仅有一个ViewPager2

 3、PageTransformer 的实现（TwoLevelTransformer.java）

public class TwoLevelTransformer implements ViewPager2.PageTransformer {
    private ViewPager2 mViewPager;
    private static int sCurrentPage = 1;
    private static boolean sFirstLoad = true;

    TwoLevelTransformer(ViewPager2 viewPager) {
        this.mViewPager = viewPager;
    }

    @Override
    public void transformPage(@NonNull View page, float position) {
        float offscreenPageLimit = mViewPager.getOffscreenPageLimit();

        if (position < 0.005 && position >= 0.0) {
            sCurrentPage = 1;
        } else if (position > 0.995 && position <= 1.0) {
            sCurrentPage = 0;
        }

        if (sFirstLoad) {
            sCurrentPage = 0;
            sFirstLoad = false;
        }

        //当下拉在一定范围内会自动回弹，否则自动下拉到底（暂时不用）
        /*if (sCurrentPage == 0) {
            if (position >= 0.65 && position <= 1.0) {
                mViewPager.setCurrentItem(0);
            } else if (position < 0.65 && position >= 0.0) {
                mViewPager.setCurrentItem(1);
            }
        }*/

        if (sCurrentPage == 0) {
            if (position >= 0) {
                float translationY = page.getHeight() * position;
                page.setTranslationY(-translationY);
                float scaleFactor = Math.min(1f - position * 0.2f, 1f);
                page.setScaleX(scaleFactor);
                page.setScaleY(scaleFactor);
            }
        } else {
            page.setTranslationY(0);
            page.setScaleX(1f);
            page.setScaleY(1f);
        }

        if (position > -1 && position < 0) {
            page.setAlpha(position * position * position + 1);
        } else if (position > offscreenPageLimit - 1) {
            page.setAlpha((float) (1 - position + Math.floor(position)));
        } else {
            page.setAlpha(1);
        }

        ViewCompat.setElevation(page, (offscreenPageLimit - position) * 2);
    }
}

4、ViewPager2 的适配器类（VerticalViewPagerAdapter.java）

public class VerticalViewPagerAdapter extends RecyclerView
        .Adapter {
    private List backgrounds;
    private Context mContext;

    VerticalViewPagerAdapter(Context context) {
        mContext = context;
        if (backgrounds == null) {
            backgrounds = new ArrayList<>();
            backgrounds.a