前言

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

1. 普通的viewpager页面

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

2. 视差引导页面

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

3. HTML5引导页面

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


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

普通的ViewPager引导页面

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

1. 在xml文件中添加

"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">    .support.v4.view.ViewPager        android:id="@+id/normalviewpager"        android:layout_width="match_parent"        android:layout_height="match_parent"/>

2. 编写Adapter类

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

public class NormalPagerAdapter extends PagerAdapter {    private Context mContext;    private List mDatas;    public NormalPagerAdapter(Context context,List 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稍微改了下,另一张是著名的小红书。

怎么感觉背景图被打了马赛克呢?不管他了,看另一张。

看到没,效果感觉不错吧。那么我们说下原理,原理呢其实也不难,归结为一句话:层级不同,滑动速度不同。

Ecmobile的实现

1.XML文件

由于XML代码有点多,就不贴出来了,这里给出个层级图。

层级为3层

  • 背景图层(像是被打了马赛克) back_image_one
  • layer层 内含FrameLayout,一个FrameLayout对应一个ViewPager的pager页面。我们要控制的就是FrameLayout中的元素的滑动速度。
  • ViewPager层

2.Adapter的实现

代码有点长,我贴instantiateItem函数。

@Override    public Object instantiateItem(ViewGroup container, int position) {        final ViewHolder holder;        holder = new ViewHolder();        View imageLayout = mInflater.inflate(R.layout.gallery_image_item, null);        holder.image = (LinearLayout) imageLayout.findViewById(R.id.gallery_image_item_view);        if(position == 4) {            holder.image.setEnabled(true);        } else {            holder.image.setEnabled(false);        }        if(position == 0) {            holder.image.removeAllViews();            View view0 = inflater.inflate(R.layout.lead_a, null);            holder.image.addView(view0);        } else if (position == 1) {            holder.image.removeAllViews();            View view1 = inflater.inflate(R.layout.lead_b, null);            holder.image.addView(view1);        } else if (position == 2) {            holder.image.removeAllViews();            View view2 = inflater.inflate(R.layout.lead_c, null);            holder.image.addView(view2);        } else if (position == 3) {            holder.image.removeAllViews();            View view3 = inflater.inflate(R.layout.lead_d, null);            holder.image.addView(view3);        } else if (position == 4) {            holder.image.removeAllViews();            View view4 = inflater.inflate(R.layout.lead_e, null);            holder.image.addView(view4);        }        ((ViewPager) container).addView(imageLayout, 0);        return imageLayout;    }

看看gallery_image_item.xml文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#00000000"    android:orientation="vertical" >    <FrameLayout        android:layout_width="fill_parent"        android:layout_height="fill_parent" >        <LinearLayout            android:id="@+id/gallery_image_item_view"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="vertical" >        LinearLayout>    FrameLayout>LinearLayout>

这里在结合代码我们知道了,逻辑就是根据position,向这个布局中添加对应的视图(添加之前先要移除原来添加的)。这里要注意,这个布局是透明的,是透明的,是透明的。
看看lead_a

,到这里,视图就搞清楚了,那么我们看代码是如何控制速度的。

3.设置,控制

我们在层级树中知道,第二层是一个横向滑动的Framelayout。所以我们需要设置每个FrameLayout的大小。如下代码:

FrameLayout.LayoutParams frameLayoutParams;        ImageView layer_image_one = (ImageView) findViewById(R.id.layer_image_one);        frameLayoutParams = (FrameLayout.LayoutParams) layer_image_one.getLayoutParams();        frameLayoutParams.height = dm.heightPixels;        frameLayoutParams.width = dm.widthPixels;        layer_image_one.setLayoutParams(frameLayoutParams);

其他几个一样。
当然,也需要设置下最下层的背景。

ImageView back_image_one = (ImageView) findViewById(R.id.back_image_one);        layoutParams = back_image_one.getLayoutParams();        layoutParams.height = dm.heightPixels;        layoutParams.width = dm.widthPixels;        back_image_one.setLayoutParams(layoutParams);

我觉得这里设置一个就OK,因为在这里我们的背景被没有滑动。
最最关键的一点,给viewPager设置监听器,并在onPageScrolled中监听滑动并设置layer层元素的滑动。

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                float realOffset = Cubic.easeIn(positionOffset, 0, 1, 1);                total_page = adapter.getCount();                float offset = (float) ((float) (position + realOffset) * 1.0 / total_page);                int offsetPositon = (int) (backgoundWidth * offset);                float layerRealOffset = Sine.easeIn(positionOffset, 0, 1, 1);                float layerOffset = (float) ((float) (position + layerRealOffset) * 1.0 / total_page);                int layerOffsetPositon = (int) (backgoundWidth * layerOffset);                layer_srcollview.scrollTo(layerOffsetPositon, 0);            }            @Override            public void onPageSelected(int position) {            }            @Override            public void onPageScrollStateChanged(int state) {            }        });

看下easeIn

public static float  easeIn(float t,float b , float c, float d) {        return -c * (float)Math.cos(t/d * (Math.PI/2)) + c + b;    }

说下上面的这个玩意。上面那个玩意就是余弦波的3PI/2到2PI的波形状,

float layerOffset = (float) ((float) (position + layerRealOffset) * 1.0 / total_page);

在+上position([0,1)),layerOffset就也到了0到1范围,波的形状是倒过来的cos波,开始的1/4段,这样就波斜率(对应速度)也就越来越快,直到停止,你们可以画图看下,这样就形成了我们上面图中看到的视差。

小红书的实现

先看下目录结构。

其中最关键的是parallaxContainer(自定义布局)和parallaxLayoutInflater(加载布局)

几个布局页里面都是些ImageView,发现ImageView里面有了新的属性,(这里报红没关系,还是可以编译通过切正常运行)
有哪些属性呢?看下面这个类。(ps,就不看attrs.xml文件了)

public class ParallaxViewTag {    protected int index;    protected float xIn;    protected float xOut;    protected float yIn;    protected float yOut;    protected float alphaIn;    protected float alphaOut;}

工作原理这里就不说了。上面有说到过,那么我们看看小红书是怎么实现的。

mParallaxContainer.setImage(iv_man);                mParallaxContainer.setLooping(false);                iv_man.setVisibility(View.VISIBLE);                mParallaxContainer.setupChildren(getLayoutInflater(),                        R.layout.view_intro_1, R.layout.view_intro_2,                        R.layout.view_intro_3, R.layout.view_intro_4,                        R.layout.view_intro_5, R.layout.view_login);

设置中间那个人,设置子布局。我们看看setupChildren方法。

public void setupChildren(LayoutInflater inflater, int... childIds) {        if (getChildCount() > 0) {            throw new RuntimeException("setupChildren should only be called once when ParallaxContainer is empty");        }        ParallaxLayoutInflater parallaxLayoutInflater = new ParallaxLayoutInflater(                inflater, getContext());        for (int childId : childIds) {            View view = parallaxLayoutInflater.inflate(childId, this);            viewlist.add(view);        }        pageCount = getChildCount();        for (int i = 0; i < pageCount; i++) {            View view = getChildAt(i);            addParallaxView(view, i);        }        updateAdapterCount();        viewPager = new ViewPager(getContext());        viewPager.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));        viewPager.setId(R.id.parallax_pager);        attachOnPageChangeListener();        viewPager.setAdapter(adapter);        addView(viewPager, 0);    }

代码也不难,

  • 将布局页加载进来
View view = parallaxLayoutInflater.inflate(childId, this);            viewlist.add(view);addParallaxView(view, i); 
  • 初始化ViewPager并设置监听
viewPager = new ViewPager(getContext());        viewPager.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));        viewPager.setId(R.id.parallax_pager);        attachOnPageChangeListener();        viewPager.setAdapter(adapter);        addView(viewPager, 0);

我们看下addParallaxView方法

private void addParallaxView(View view, int pageIndex) {        if (view instanceof ViewGroup) {            ViewGroup viewGroup = (ViewGroup) view;            for (int i = 0, childCount = viewGroup.getChildCount(); i < childCount; i++) {                addParallaxView(viewGroup.getChildAt(i), pageIndex);            }        }        ParallaxViewTag tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);        if (tag != null) {            tag.index = pageIndex;            parallaxViews.add(view);        }    }

这个方法中就是用添加子view的。

接着看attachOnPageChangeListener方法。
有点长,就给出关键代码把。就是初始化了ViewPager.OnPageChangeListener监听器,并在onPageScrolled方法中根据我们的tag和偏移量来移动view。

for (View view : parallaxViews) {                    tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);                    if (tag == null) {                        continue;                    }                    if ((pageIndex == tag.index - 1 || (isLooping && (pageIndex == tag.index                            - 1 + pageCount)))                            && containerWidth != 0) {                        // make visible                        view.setVisibility(VISIBLE);                        // slide in from right                        view.setTranslationX((containerWidth - offsetPixels) * tag.xIn);                        // slide in from top                        view.setTranslationY(0 - (containerWidth - offsetPixels) * tag.yIn);                        // fade in                        view.setAlpha(1.0f - (containerWidth - offsetPixels) * tag.alphaIn / containerWidth);                    } else if (pageIndex == tag.index) {                        // make visible                        view.setVisibility(VISIBLE);                        // slide out to left                        view.setTranslationX(0 - offsetPixels * tag.xOut);                        // slide out to top                        view.setTranslationY(0 - offsetPixels * tag.yOut);                        // fade out                        view.setAlpha(1.0f - offsetPixels * tag.alphaOut / containerWidth);                    } else {                        view.setVisibility(GONE);                    }                }

那么,这里频繁出现的Tag是什么时候设置的呢。仔细想想,应该是在加载的时候设置的把?那我们去看看setupChildren方法。呀,仔细一看,发现如下代码

ParallaxLayoutInflater parallaxLayoutInflater = new ParallaxLayoutInflater(                inflater, getContext());        for (int childId : childIds) {            View view = parallaxLayoutInflater.inflate(childId, this);            viewlist.add(view);        }

每个子view都是通过ParallaxLayoutInflater来加载的。那么我们就去看看他.

public class ParallaxLayoutInflater extends LayoutInflater {    protected ParallaxLayoutInflater(LayoutInflater original, Context newContext) {        super(original, newContext);        setUpLayoutFactory();    }    private void setUpLayoutFactory() {        if (!(getFactory() instanceof ParallaxFactory)) {            setFactory(new ParallaxFactory(this, getFactory()));        }    }    @Override    public LayoutInflater cloneInContext(Context newContext) {        return new ParallaxLayoutInflater(this, newContext);    }}

返现构造方法中,通过setFactory方法,设置Factory为ParallaxFactory,到这里,就明白了。ParallaxFactory实现了LayoutInflater.Factory,这个接口是干什么用的。我们这个时候去看看这个的介绍

大概的意思是可以通过实现这个接口来获取xml文件中的tag(就像小红书中的app:x_in等等),欧,到这里就明白了,由于ImageView不是我们的自定义控件,我们没法在ImageView的构造方法中获取一些值,所以我们通过实现这个接口来获取。

protected void onViewCreated(View view, Context context, AttributeSet attrs) {    int[] attrIds =        { R.attr.a_in, R.attr.a_out, R.attr.x_in, R.attr.x_out, R.attr.y_in, R.attr.y_out,  };    TypedArray a = context.obtainStyledAttributes(attrs, attrIds);    if (a != null) {      if (a.length() > 0) {        ParallaxViewTag tag = new ParallaxViewTag();        tag.alphaIn = a.getFloat(0, 0f);        tag.alphaOut = a.getFloat(1, 0f);        tag.xIn = a.getFloat(2, 0f);        tag.xOut = a.getFloat(3, 0f);        tag.yIn = a.getFloat(4, 0f);        tag.yOut = a.getFloat(5, 0f);        view.setTag(R.id.parallax_view_tag, tag);      }      a.recycle();    }  }

在这个方法中,我们获取了属性并给view设置了tag,所以,在后面我们就可以通过tag来获取这些值了。
看下Adapter

 @Override    public Object instantiateItem(ViewGroup container, int position) {        View view;        if (!recycleBin.isEmpty()){            view = recycleBin.pop();        }else {            view = new View(context);            //这里注意,如果不想加前缀,请以静态的方式将包和属性导进来            view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,                    ViewGroup.LayoutParams.MATCH_PARENT));        }        container.addView(view);        return view;    }

恩?什么都没有的空白页?想想也没错,我们的所有逻辑都在parallaxContainer这个自定义Layout里面,图片什么的也都是,所以我们不需要ViewPager有什么东西(这里是个ecmobile那个的区别之一),我们的viewpager只负责滑动,只负责触发onPageScrolled方法,剩下的就是有view(ImageView)的setTranslationX、setTranslationY、setAlpha方法来实现。
有兴趣的去研究下或者去改造下这个吧。Github地址

HTML5实现引导页


效果确实很炫,native来实现确实难。这张gif图看起来有点卡的原因是我是加载一个微场景。实际项目中会把html5+css3+js代码放在Assest文件夹下面。有图为证

,我们来反编译下这个apk,来验证我们。MAC下反编译APK,
我们找到如下一行代码。

证明我们是对的。
关于webview就不说了。

总结

在这三种引导页中,我更倾向于第三种,必将界面更加酷炫(虽然响应速度不如native),加上现在更加流行hybrid开发(淘宝、天猫、携程、百度糯米等等),我认为在不久的以后,html5引导页将越来越流行。


如果有错误的地方,请指出。

代码地址:全世界的github

更多相关文章

  1. android中的代码布局
  2. 关于Android(安卓)7.0系统通知声音不能播放
  3. Android(安卓)6.0以上权限拒绝打开权限设置界面的解决方法
  4. Android新手入门2016(4)--Android(安卓)SDK下载代理设置
  5. Android(安卓)Studio系列教程二--基本设置与运行
  6. Android(安卓)开发解决APP在18:9,18.5:9,19:9,19:10尺寸的手机上不
  7. Android(安卓)API Guides---Settings
  8. android 4.0以上设置wifi静态IP以及DNS的方法
  9. 【Android】Android防止过快点击造成多次事件执行(防止按钮重复点

随机推荐

  1. No IDEA annotations attached to the JD
  2. android中Message机制的灵活应用
  3. android开发积累4-android使用HttpURLCon
  4. Android类库介绍
  5. Android(安卓)模拟器(emulator)无法启动A
  6. android点滴(15)--ubuntu下配置Android(
  7. Android布局容器
  8. Android系统信息与安全机制
  9. Android之EditText指定类型数据
  10. Android常用秘籍总结