引导页_视差显示

当用户下载完APP后，第一次启动时通常会有一个引导页，而这个引导页对于引导用户或介绍本产品有着很好的作用。一般三种方式实现：

1. Viewpager
   这种方式很简单，易实现，但是在观赏性上来说很差，没有任何动画
2. 视差显示
   这种方式是基于ViewPager的，通过自定义其中的类，或者调整其中的方法来达到显示的效果。
   　在ViewPager中，有一个接口叫做PageTransformer，其中有一个方法transformPage,我们通过在这个方法中编写逻辑就可以实现视差显示。而之所以叫做视差显示，是因为实现这种方式是对不同的控件设置不同的速度来达到的。例如，ViewPager移动了10dp,　图片A移动了15dp, 图片B移动了7.5dp，这就产生了一个视差。
3. Html5
   这种方式也是最近使用得越来越多的方式，通过加载h5来实现引导页的炫目效果。

方式一

ViewPager + PageAdapter -> finish

方式二

创建一个类 LevelScrollingPageTransformer实现ViewPager.PageTransformer

parallaxCoefficient视差系数：几个控件之间的视差系数
distanceCoefficient距离系数：几个控件之间的距离系数
view.setTranslationX()：设置view相对于X轴移动多少位置

package com.mylibs.libs_levelscroll.classoflevelscroll;

import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

public class LevelScrollingPageTransformer implements ViewPager.PageTransformer{

    private float parallaxCoefficient = 0;
    private float distanceCoefficient = 0;
    private List<Integer> ids;

    public LevelScrollingPageTransformer(float parallaxCoefficient, float distanceCoefficient) {
        this.parallaxCoefficient = parallaxCoefficient;
        this.distanceCoefficient = distanceCoefficient;
    }

    @Override
    public void transformPage(View page, float position) {
        float scrollxOffset = page.getWidth() * parallaxCoefficient;

        ids = new ArrayList<>();

        final int childCount = ((ViewGroup) page).getChildCount();

        for (int i = 0; i < childCount; i++) {
            ids.add(((ViewGroup) page).getChildAt(i).getId());
        }

        for (int id : ids) {
            View view = page.findViewById(id);

            if (view != null) {
                view.setTranslationX(scrollxOffset * position);
            }
            scrollxOffset *= distanceCoefficient;
        }
    }
}

在MainActivity中：

viewPager.setPageTransformer(true, new LevelScrollingPageTransformer(1.2f, 0.1f));

这样就大致完成了，如果需要根据需要就自行在LevelScrollingPageTransformer中进行更改与配置
​

---

  把上面的方式自己实现了之后，又在github上看到了一个介绍小红书的引导界面，也就是视差引导界面，看了它的源码之后又不得不吐槽一下。最开始查看它源码的时候觉得都是它自己实现的，后来才发现是一个github上的，它只是把它的源码拷贝进了项目。
这里贴出github上的第三方库：[ParallaxPager](https://github.com/prolificinteractive/ParallaxPager), 这库倒是很好，比上面写的那个要完善很多

方式三

调用HTML5，这个就没有什么说的了