Android开发学习之ViewFilpper

               今天几乎用半天折腾Fragment，总算做出来了，打算稍后与大家一起分享。今天想和大家分享的是ViewFilpper。ViewFilpper是一个在项目中实现多个View滑动效果的控件，通过ViewFlipper我们可以实现很漂亮的手势滑动效果，在很多应用的设计中都会有所体现。今天想实现的一个简单示例是引导页。何谓引导页？引导页就是当我们第一次使用一个应用程序时，通常可以通过前面的引导页来了解这个应用程序的重要更新、设计理念、全新功能等等。例如下面是腾讯微博的引导页。

            好，现在就让我们来开始制作引导页效果。首先是页面布局代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    <ViewFlipper
        android:id="@+id/ViewFlipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <ImageView
                android:id="@+id/ImageView1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/screen0" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <ImageView 
                android:id="@+id/ImageView2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/screen1"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <ImageView 
                android:id="@+id/ImageView3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/screen2"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <ImageView 
                android:id="@+id/ImageView4"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/screen3"/>
        </LinearLayout>
    </ViewFlipper>

</LinearLayout>

                  在这个布局中，我们使用四个ImageView来做为我们要切换的View。下面来看主要的逻辑代码：

package com.Android.ViewFilpper;

import com.Android.ViewFliper.R;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.Window;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {

	private ViewFlipper mViewFilpper;
	private float StartX;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE); 
		setContentView(R.layout.activity_main);
		mViewFilpper=(ViewFlipper)findViewById(R.id.ViewFlipper);
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) 
	{
		switch(event.getAction())
		{
		    case MotionEvent.ACTION_DOWN:
			StartX=event.getX();
			break;
		    case MotionEvent.ACTION_UP:
		    	if(event.getX()>StartX)
		    	{
		    		mViewFilpper.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));
		    		mViewFilpper.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));
		    		mViewFilpper.showNext();
		    	}else if(event.getX()<StartX)
		    	{
		    		mViewFilpper.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));
		    		mViewFilpper.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));
		    		mViewFilpper.showPrevious();
		    	}
		    	break;
		}
		return super.onTouchEvent(event);
	}
	
	
	
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

              最终的运行效果如下图所示：

 

            这种方法实现的滑动切换虽然简单，但是缺点是滑动地时候阻尼感太强，滑动感较为僵硬，画面切换不自然。在后面的文章中，我会为大家分享较为完美的解决方案，感谢大家的关注，以后我的博客每天会更新一篇，希望大家多多支持！