android导航动画的两种实现方式

我们第一次进入一款应用的时候经常会出现一个导航动画，一般都是四张或者五张图片，大体就是介绍这个应用的功能，那么这个导航动画该如何实现呢。其实实现的方式有很多种，最简单也是最暴力的一种就是新建四个或者五个activity，然后捕捉滑动事件来回跳转就行了。这个方法是我刚学android的时候看黑马android视频的时候学的。虽然可以实现，但是感觉太过麻烦。今天我介绍的这两种呢，一个是用ViewFlipper实现的，另一个使用ViewPager实现的。

首先来说第一种方式ViewFlipper，ViewFlipper是继承自FrameLayout的，所以它的使用方式，就是把n张图片都堆叠在ViewFlipper中，通过滑动就可以看到下一层的图片。下面是布局文件代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <ViewFlipper        android:id="@+id/flipper"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:persistentDrawingCache="animation" >        <LinearLayout            android:id="@+id/first"            android:layout_width="fill_parent"            android:layout_height="fill_parent" >            <ImageView                android:id="@+id/firstIV"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:scaleType="fitXY"                android:src="@drawable/view1" />        </LinearLayout>        <LinearLayout            android:id="@+id/second"            android:layout_width="fill_parent"            android:layout_height="fill_parent" >            <ImageView                android:id="@+id/secondIV"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:scaleType="fitXY"                android:src="@drawable/view2" />        </LinearLayout>        <LinearLayout            android:id="@+id/third"            android:layout_width="fill_parent"            android:layout_height="fill_parent" >            <ImageView                android:id="@+id/thirdIV"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:scaleType="fitXY"                android:src="@drawable/view3" />        </LinearLayout>        <RelativeLayout            android:id="@+id/fourth"            android:layout_width="fill_parent"            android:layout_height="fill_parent" >            <ImageView                android:id="@+id/fourthIV"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:scaleType="fitXY"                android:src="@drawable/view4" />            <ImageView                android:id="@+id/endIV"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_alignParentBottom="true"                android:layout_centerHorizontal="true"                android:layout_marginBottom="100dp"                android:src="@drawable/enter" />        </RelativeLayout>    </ViewFlipper></LinearLayout>

我在上述布局文件中放了四张图片和一个图片按钮。

下面说一下java文件中应该如何写

首先在oncrete中获取控件，由于前四张图片不需要做任何处理，所以不获取前四张图片了。只获取了最后一个图片按钮用来跳转的。

@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.view_flipper);initView();endIV.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubIntent intent = new Intent(ViewFlipperActivity.this,HomePageActivity.class);startActivity(intent);finish();}});}private void initView() {// TODO Auto-generated method stubflipper = (ViewFlipper) findViewById(R.id.flipper);endIV = (ImageView) findViewById(R.id.endIV);detector = new GestureDetector(this);}

剩下的就是关于滑动事件的处理了，滑动事件处理用到了GestureDetector。所以要写一个OnGestureListener的监听器，用一个类实现这个接口后，会有好几个未实现的方法。我们只需要关注onFling方法就够了

@Overridepublic boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {// TODO Auto-generated method stubif (e1.getX() - e2.getX() > 120) {this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.push_left_in));this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.push_left_out));if (flipper.getCurrentView().getId() != R.id.fourth)this.flipper.showNext();return true;} else if (e1.getX() - e2.getX() < -120) {this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.push_right_in));this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.push_right_out));if (flipper.getCurrentView().getId() != R.id.first)this.flipper.showPrevious();return true;}return false;}

滑动的时候用到了四个动画进行切换，动画这部分很简单，就不再粘贴代码。

最后记得重写onTouch事件

@Overridepublic boolean onTouchEvent(MotionEvent event) {// TODO Auto-generated method stubreturn detector.onTouchEvent(event);}

这样就结束了。下面是效果图。

第二种方法是用ViewPager和fragment搭配来实现导航动画，这种方式也是我最满意的一直方式。它比ViewFlipper的优势在于不用自己写动画效果，而且图片间的切换效果要比ViewFlipper好很多。

布局文件很简单

<?xml version="1.0" encoding="utf-8"?><android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/view_pager" />

java文件

@Overrideprotected void onCreate(Bundle arg0) {// TODO Auto-generated method stubsuper.onCreate(arg0);getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.first_page);mViewPager = (ViewPager) findViewById(R.id.view_pager);mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {@Overridepublic void onPageSelected(int position) {// TODO Auto-generated method stubsuper.onPageSelected(position);}});mAdapter = new PagerAdapter(this);ImageViewFragment imageViewFragment1 = new ImageViewFragment(R.drawable.view1, NO_BTN);ImageViewFragment imageViewFragment2 = new ImageViewFragment(R.drawable.view2, NO_BTN);ImageViewFragment imageViewFragment3 = new ImageViewFragment(R.drawable.view3, NO_BTN);ImageViewFragment imageViewFragment4 = new ImageViewFragment(R.drawable.view4, R.drawable.enter);mAdapter.addTabs(imageViewFragment1, null);mAdapter.addTabs(imageViewFragment2, null);mAdapter.addTabs(imageViewFragment3, null);mAdapter.addTabs(imageViewFragment4, null);mViewPager.setAdapter(mAdapter);}

其中PagerAdapter是自己重写的，要注意和系统的区分。ImageViewFragment也是自己重写的，ImageViewFragment通过接受不同的drawable参数来改变背景图片。

ImageViewFragment代码

public static class ImageViewFragment extends Fragment {private final int mbg;private final int mbtn;public ImageViewFragment(int bgID, int btnID) {mbg = bgID;mbtn = btnID;}@Overridepublic View onCreateView(LayoutInflater inflater,@Nullable ViewGroup container,@Nullable Bundle savedInstanceState) {// TODO Auto-generated method stubView view = inflater.inflate(R.layout.imagelayout, null);ImageView bgIV = (ImageView) view.findViewById(R.id.bgIV);bgIV.setImageResource(mbg);if(mbtn!=NO_BTN){ImageView btnIV=(ImageView) view.findViewById(R.id.endIV);btnIV.setImageResource(mbtn);btnIV.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubIntent intent=new Intent(getActivity(),HomePage.class);startActivity(intent);getActivity().finish();}});}return view;}

PagerAdapter代码

public static class PagerAdapter extends FragmentPagerAdapter {private final Context mContext;private final ArrayList<TabInfo> mTabs = new ArrayList<TabInfo>();public PagerAdapter(FragmentActivity activity) {super(activity.getSupportFragmentManager());mContext = activity;}static final class TabInfo {private final ImageViewFragment mIVF;private final Bundle mArgs;public TabInfo(ImageViewFragment aIVF, Bundle args) {// TODO Auto-generated constructor stubmIVF = aIVF;mArgs = args;}}@Overridepublic Fragment getItem(int position) {// TODO Auto-generated method stubTabInfo info = mTabs.get(position);return info.mIVF;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn mTabs.size();}public void addTabs(ImageViewFragment IVF, Bundle args) {TabInfo info = new TabInfo(IVF, args);mTabs.add(info);notifyDataSetChanged();}}

第二种也完成了，下面看看效果图吧，注意和第一种的效果图进行对比