Android 欢迎引导页的魅力

前言

纵观android市面上的所有APP，没有一个页面不具备欢迎引导页，可以看出引导页面的魅力有多大，引导页面能迅速抓住用户的眼球，让用户很快的了解该app的主打方向。一个好的引导页让人看了就喜欢，甚至于达到卸载重装看引导页的地步。那么，市面上的app引导页都是用什么做的呢。我大致分为3类。

1. 普通的viewpager页面

这是最普通的一种了，很多app就是这个，这个在刚开始流行的时候，可能还会感到新奇，但是，这么长时间了，人们都形成审美疲劳了（不管是开发人员还是用户，还是…）

2. 视差引导页面

这种比上一种强点，但是好像用的不多，为什么呢，因为下面第三种。这个动画看起来很炫酷，很牛B，但是越炫酷越难实现（相比较html5来说）。

3. HTML5引导页面

现在越来越多的app开始使用这种方式，HTML5在动画方面是很强大的，所以能弄出来很牛的效果。

---

好了，废话不多说，开始今天的学习之旅。。。

普通的ViewPager引导页面

先来张效果图看看。
,
这里只是也演示的demo，为了省事，我就没加指示器。那么，接下来我们就说下具体的实现方法。很简单（ViewPager已经被玩烂了有木有。）

1. 在xml文件中添加

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gl.NormalViewPager">

    <android.support.v4.view.ViewPager
        android:id="@+id/normalviewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

2. 编写Adapter类

因为这里没有其他元素，我们就只是添加点ImageView进来。所以代码简单点。

public class NormalPagerAdapter extends PagerAdapter {
   

    private Context mContext;
    private List<ImageView> mDatas;

    public NormalPagerAdapter(Context context,List<ImageView> mDatas){
        this.mContext = context;
        this.mDatas = mDatas;
    }

    @Override
    public int getCount() {
        return mDatas.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view.equals(object);
    }


    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager)container).removeView((ImageView) object);
    }


    @Override
    public ImageView instantiateItem(ViewGroup container, int position) {
        container.addView(mDatas.get(position));
        return mDatas.get(position);
    }

}

viewpager都被玩烂了，上面的代码也没啥可说的，

3.初始化ViewPager，初始化视图数据、添加监听器，等等

在这一步我们能干的事就多了

private void initData() {
        ImageView imageView_1 = new ImageView(this,null);
        imageView_1.setBackgroundResource(R.drawable.hpw1);
        ImageView imageView_2 = new ImageView(this);
        imageView_2.setBackgroundResource(R.drawable.hpw2);
        ImageView imageView_3 = new ImageView(this);
        imageView_3.setBackgroundResource(R.drawable.hpw3);
        ImageView imageView_4 = new ImageView(this);
        imageView_4.setBackgroundResource(R.drawable.hpw4);
        ImageView imageView_5 = new ImageView(this);
        imageView_5.setBackgroundResource(R.drawable.hpw5);
        mDatas = new ArrayList<>();
        mDatas.add(imageView_1);
        mDatas.add(imageView_2);
        mDatas.add(imageView_3);
        mDatas.add(imageView_4);
        mDatas.add(imageView_5);

    }

    private void initAdapter() {
        adapter = new NormalPagerAdapter(this,mDatas);
        viewPager.setAdapter(adapter);
        viewPager.setPageTransformer(true, new DepthPageTransformer());
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                Log.e("tag","this is offset--->"+positionOffset);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

上面的代码就是添加个监听器，添加个切换动画什么的，相信大家还是都会的。关于ViewPager的切换动画，请移步张鸿洋

视差引导页面

在说这个之间，我先吐槽下腾讯课堂某州学院，妈的，大概今年4月份的时候，我去听免费课，他在那里将小红书，我说这个github上就有，怎么能说国内没几个人会呢？然后把链接发在了公屏上，然后。。。我TMD现在还在小黑屋。

先来2张gif图看看。其中一张是ecmobile稍微改了下，另一张是著名的小红书。
<