引导页_视差显示

当用户下载完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,这个就没有什么说的了

你可能感兴趣的:(引导页_视差显示)