视差动画引导界面



视差动画引导界面。视差动画的核心是控制视图的动画的方向和速度。

效果图

录屏的效果不是很好，真实手机上运行效果很不错。
视差动画

思路：

• ViewPager每一页都包含视图(Fragment)
• 翻页过程中，控制视图的滑动

  数据准备

  新建ParallaxContainer继承自FrameLayout,在该文件中指定引导页的所有页面布局文件。

  package me.chenfuduo.parallaxsplash;import android.content.Context;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.view.ViewGroup;import android.view.ViewParent;import android.widget.FrameLayout;import java.util.ArrayList;import java.util.List;/** * Created by Administrator on 2015/5/27. * 引导页的最外层布局 */public class ParallaxContainer extends FrameLayout {    private List<ParallaxFragment> fragments;    public ParallaxContainer(Context context) {        this(context, null);    }    public ParallaxContainer(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public ParallaxContainer(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    /**     * 指定引导页的所有页面布局文件     *     * @param childIds     */    public void setUp(int... childIds) {        //根据布局文件数组，初始化所有的Fragment        fragments = new ArrayList<>();        for (int i = 0; i < childIds.length; i++) {            ParallaxFragment f = new ParallaxFragment();            Bundle args = new Bundle();            //页面索引            args.putInt("index", i);            //Fragment中需要加载的布局文件id            args.putInt("layoutId", childIds[i]);            f.setArguments(args);            fragments.add(f);        }        //实例化适配器        MainActivity activity = (MainActivity) getContext();        ParallaxPagerAdapter adapter = new ParallaxPagerAdapter(activity.getSupportFragmentManager(),fragments);        //实例化ViewPager        ViewPager vp = new ViewPager(getContext());        vp.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));        vp.setId(R.id.parallax_pager);        //绑定        vp.setAdapter(adapter);        addView(vp,0);    }}

上面的代码中，需要留意的是ViewPager的setId(int)方法，详情见源代码。
在MainActivity中调用：

package me.chenfuduo.parallaxsplash;import android.os.Bundle;import android.support.v4.app.FragmentActivity;/** * */public class MainActivity extends FragmentActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ParallaxContainer container = (ParallaxContainer) findViewById(R.id.parallax_container);        container.setUp(new int[]{                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,        });    }}

初始化Fragment和适配器：

package me.chenfuduo.parallaxsplash;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;/** * Created by Administrator on 2015/5/27. */public class ParallaxFragment extends Fragment {    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        Bundle args = getArguments();        int layoutId = args.getInt("layoutId");        int index = args.getInt("index");        View view = inflater.inflate(layoutId,container,false);        return view;    }}

package me.chenfuduo.parallaxsplash;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import java.util.List;/** * Created by Administrator on 2015/5/27. */public class ParallaxPagerAdapter extends FragmentPagerAdapter {    private final List<ParallaxFragment> fragments;    public ParallaxPagerAdapter(FragmentManager fm,List<ParallaxFragment> fragments) {        super(fm);        this.fragments = fragments;    }    @Override    public Fragment getItem(int position) {        return fragments.get(position);    }    @Override    public int getCount() {        return fragments.size();    }}

此时运行，OK，可以滑动了。效果图如下：
1.gif

自定义属性

ok，以上实现了最基本的引导界面。
分析下每个Fragment的布局，这里只举一个，看下代码：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="fill_parent"    android:layout_height="fill_parent" >    <ImageView        android:id="@+id/iv_0"        android:layout_width="103dp"        android:layout_height="19dp"        android:layout_centerInParent="true"        android:src="@drawable/intro1_item_0"        app:x_in="1.2"        app:x_out="1.2" />    <ImageView        android:id="@+id/iv_1"        android:layout_width="181dp"        android:layout_height="84dp"        android:layout_alignParentLeft="true"        android:layout_alignParentTop="true"        android:layout_marginLeft="13dp"        android:layout_marginTop="60dp"        android:src="@drawable/intro1_item_1"        app:x_in="0.8"        app:x_out="0.8" />    <ImageView        android:id="@+id/iv_2"        android:layout_width="143dp"        android:layout_height="58dp"        android:layout_alignParentRight="true"        android:layout_alignParentTop="true"        android:layout_marginTop="109dp"        android:src="@drawable/intro1_item_2"        app:x_in="1.1"        app:x_out="1.1" />    <ImageView        android:id="@+id/iv_3"        android:layout_width="48dp"        android:layout_height="48dp"        android:layout_alignParentRight="true"        android:layout_alignParentBottom="true"        android:layout_marginRight="40dp"        android:layout_marginBottom="185dp"        android:src="@drawable/intro1_item_3"        app:x_in="0.8"        app:x_out="0.8"        app:a_in="0.8"        app:a_out="0.8" />    <ImageView        android:id="@+id/iv_4"        android:layout_width="fill_parent"        android:layout_height="128dp"        android:layout_alignParentBottom="true"        android:layout_marginBottom="29dp"        android:background="@drawable/intro1_item_4"        app:a_in="0.8"        app:a_out="0.8"        app:x_in="0.8"        app:x_out="0.8" />    <ImageView        android:id="@+id/iv_5"        android:layout_width="260dp"        android:layout_height="18dp"        android:layout_alignParentBottom="true"        android:layout_alignParentLeft="true"        android:layout_marginBottom="16dp"        android:layout_marginLeft="15dp"        android:src="@drawable/intro1_item_5"        app:a_in="0.9"        app:a_out="0.9"        app:x_in="0.9"        app:x_out="0.9" />    <ImageView        android:id="@+id/iv_6"        android:layout_width="24dp"        android:layout_height="116dp"        android:layout_alignParentBottom="true"        android:layout_alignParentLeft="true"        android:layout_marginBottom="35dp"        android:layout_marginLeft="46dp"        android:src="@drawable/intro1_item_6"        app:x_in="0.6"        app:x_out="0.6" />    <ImageView        android:id="@+id/iv_7"        android:layout_width="45dp"        android:layout_height="40dp"        android:layout_alignParentBottom="true"        android:layout_alignParentLeft="true"        android:layout_marginBottom="23dp"        android:layout_marginLeft="76dp"        android:src="@drawable/intro1_item_7"        app:a_in="0.3"        app:a_out="0.3"        app:x_in="0.5"        app:x_out="0.5" /></RelativeLayout>

我们看到了很多自定义的属性，这些属性是控制在x轴和y轴的速度还有透明度的大小变化，其中自定义的属性的代码为：

<?xml version="1.0" encoding="utf-8"?><resources>    <attr name="a_in" format="float" />    <attr name="a_out" format="float" />    <attr name="x_in" format="float" />    <attr name="x_out" format="float" />    <attr name="y_in" format="float" />    <attr name="y_out" format="float" /></resources>

获取自定义的属性

那么现在问题来了，如何在Fragment中获取这些自定义的属性？回忆我们平时怎么获取自定义属性的，那时候我们都是在自定义View的构造器中去获取，但是我们现在缺失要在Fragment中获取，怎么做到呢？可以通过下面的三步。

• 布局加载器将布局加载进来
• 解析创建布局上所有的视图
• 我们自己搞定创建视图的过程
• 获取视图相关的自定义属性的值
  我们首先自定义一个类，让他继承自LayoutInflater,如下：

  package me.chenfuduo.parallaxsplash;import android.content.Context;import android.view.LayoutInflater;/** * Created by Administrator on 2015/5/27. */public class ParallaxLayoutInflater extends LayoutInflater {    protected ParallaxLayoutInflater(Context context) {        this(null,context);    }    protected ParallaxLayoutInflater(LayoutInflater original, Context newContext) {        super(original, newContext);    }    @Override    public LayoutInflater cloneInContext(Context newContext) {        return null;    }}

接下来我们在ParallaxFragment去使用我们自己定义的LayoutInflater。如下：

package me.chenfuduo.parallaxsplash;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;/** * Created by Administrator on 2015/5/27. */public class ParallaxFragment extends Fragment {    @Override    public View onCreateView(LayoutInflater original, ViewGroup container, Bundle savedInstanceState) {        Bundle args = getArguments();        int layoutId = args.getInt("layoutId");        int index = args.getInt("index");        //1.布局加载器将布局加载进来了        //2.解析创建布局上所有的视图        //3.我们自己搞定创建视图的过程        //4.获取视图相关的自定义属性的值        ParallaxLayoutInflater inflater = new ParallaxLayoutInflater(original,getActivity());        View view = inflater.inflate(layoutId,container,false);        return view;    }}

下面的这句话很重要：如果你想为你自己的View创建另一个LayoutInflater，可以使用LayoutInflater.Factory.首先调用cloneInContext(Context)函数赋值一个已经存在的ViewFactory，然后再调用setFactory(LayoutInflater.Factory)方法。

package me.chenfuduo.parallaxsplash;import android.content.Context;import android.content.res.TypedArray;import android.util.AttributeSet;import android.view.ContextThemeWrapper;import android.view.LayoutInflater;import android.view.View;/** * Created by Administrator on 2015/5/27. */public class ParallaxLayoutInflater extends LayoutInflater {    private ParallaxFragment fragment;    protected ParallaxLayoutInflater(LayoutInflater original, Context newContext,ParallaxFragment fragment) {        super(original, newContext);        this.fragment = fragment;        //重新设置布局加载器的工厂        //工厂用于创建文件中所有的视图        setFactory(new ParallaxFactory(this));    }    /**     * Create a copy of the existing LayoutInflater object, with the copy     * pointing to a different Context than the original.  This is used by     * {@link ContextThemeWrapper} to create a new LayoutInflater to go along     * with the new Context theme.     *     * @param newContext The new Context to associate with the new LayoutInflater.     *                   May be the same as the original Context if desired.     * @return Returns a brand spanking new LayoutInflater object associated with     * the given Context.     */    @Override    public LayoutInflater cloneInContext(Context newContext) {        return new ParallaxLayoutInflater(this, newContext,fragment);    }    class ParallaxFactory implements LayoutInflater.Factory {        private LayoutInflater inflater;        private final String[] sClassPrefix = {                "android.widget.",                "android.view."        };        public ParallaxFactory(LayoutInflater layoutInflater) {            this.inflater = layoutInflater;        }        /**         * 自定义视图创建的过程         *         * @param name         * @param context         * @param attrs         * @return         */        @Override        public View onCreateView(String name, Context context, AttributeSet attrs) {            //android.widget.TextView;  TextView的prefix就是android.widget            //当然在xml文件譬如ImageView和TextView等等有prefix，而其他的可能没有            //没有的情况：比如我们自定义View，然后我们拷贝全路径到xml文件中            //这种情况下没有prefix            //==============================            //总结            //1.自定义控件不需要前缀            //2.系统视图需要加上前缀(主要是两个，一个是android.view一个是android.widget)            View view = null;            if (view == null) {                view = createViewOrFailQuitely(name, context, attrs);            }            //实例化完成            if (view != null) {                //获取自定义属性，通过标签关联到视图上                setViewTag(view, context, attrs);                fragment.getParallaxViews().add(view);            }            return view;        }        private void setViewTag(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 array = context.obtainStyledAttributes(attrs, attrIds);            if (array != null && array.length() > 0) {                //获取自定义属性的值                ParallaxViewTag tag = new ParallaxViewTag();                tag.alphaIn = array.getFloat(0, 0f);                tag.alphaOut = array.getFloat(1, 0f);                tag.xIn = array.getFloat(2, 0f);                tag.xOut = array.getFloat(3, 0f);                tag.yIn = array.getFloat(4, 0f);                tag.yOut = array.getFloat(5, 0f);               // tag.index                view.setTag(R.id.parallax_view_tag,tag);            }            array.recycle();        }        private View createViewOrFailQuitely(String name, String prefix, Context context, AttributeSet attrs) {            try {                return inflater.createView(name, prefix, attrs);            } catch (Exception e) {                e.printStackTrace();                return null;            }        }        private View createViewOrFailQuitely(String name, Context context, AttributeSet attrs) {            //自定义控件不需要前缀            if (name.contains(".")) {                createViewOrFailQuitely(name, null, context, attrs);            }            //系统视图需要加上前缀            for (String prefix : sClassPrefix) {                View view = createViewOrFailQuitely(name, prefix, context, attrs);                if (view != null) {                    return view;                }            }            return null;        }    }}

ParallaxFragment的代码：

package me.chenfuduo.parallaxsplash;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import java.util.ArrayList;import java.util.List;/** * Created by Administrator on 2015/5/27. */public class ParallaxFragment extends Fragment {    //此Fragment上所有需要实现视差动画的视图    private List<View> parallaxViews = new ArrayList<>();    @Override    public View onCreateView(LayoutInflater original, ViewGroup container, Bundle savedInstanceState) {        Bundle args = getArguments();        int layoutId = args.getInt("layoutId");        int index = args.getInt("index");        //1.布局加载器将布局加载进来了        //2.解析创建布局上所有的视图        //3.我们自己搞定创建视图的过程        //4.获取视图相关的自定义属性的值        ParallaxLayoutInflater inflater = new ParallaxLayoutInflater(original,getActivity(),this);        View view = inflater.inflate(layoutId,container,false);        return view;    }    public List<View> getParallaxViews() {        return parallaxViews;    }}

这里需要注意的是ParallaxLayoutInflater这个类，这个实现了很多之前没有见过的。

添加动画

添加动画主要在ViewPager的监听器中完成。

@Override  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {      containerWidth = getWidth();      //在翻页的过程中，不断根据视图的标签中对应的动画参数，改变视图的位置或者透明度      //获取到进入的页面      ParallaxFragment inFragment = null;      try {          inFragment = fragments.get(position - 1);      } catch (Exception e) {          e.printStackTrace();      }      //获取到退出的页面      ParallaxFragment outFragment = null;      try {          outFragment = fragments.get(position);      } catch (Exception e) {          e.printStackTrace();      }      if (inFragment != null) {          //获取Fragment上所有的视图，实现动画效果          List<View> inViews = inFragment.getParallaxViews();          if (inViews != null) {              for (View view : inViews) {                  //获取标签，从标签上获取所有的动画参数                  ParallaxViewTag tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);                  if (tag == null) {                      continue;                  }                  //left                  ViewHelper.setTranslationX(view, (containerWidth - positionOffsetPixels) * tag.xIn);                  //top                  ViewHelper.setTranslationY(view, (containerWidth - positionOffsetPixels) * tag.yIn);              }          }      }      if (outFragment != null) {          //获取Fragment上所有的视图，实现动画效果          List<View> outViews = outFragment.getParallaxViews();          if (outViews != null) {              for (View view : outViews) {                  //获取标签，从标签上获取所有的动画参数                  ParallaxViewTag tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);                  if (tag == null) {                      continue;                  }                  ViewHelper.setTranslationX(view, 0 - positionOffsetPixels * tag.xOut);                  ViewHelper.setTranslationY(view, 0 - positionOffsetPixels * tag.yOut);              }          }      }  }  @Override  public void onPageSelected(int position) {      if (position == adapter.getCount() - 1){          iv.setVisibility(INVISIBLE);      }else{          iv.setVisibility(VISIBLE);      }  }  @Override  public void onPageScrollStateChanged(int state) {      final AnimationDrawable animationDrawable = (AnimationDrawable) iv.getBackground();      switch (state) {          case ViewPager.SCROLL_STATE_IDLE:              animationDrawable.stop();              break;          case ViewPager.SCROLL_STATE_DRAGGING:              animationDrawable.start();              break;          case 2:              animationDrawable.stop();              break;      }  }