android开发步步为营之47：使用viewflipper实现屏幕的切换

Android开发，sdk工具箱里面,Transitions类别的控件，目前有这几个：

ImageSwitcher,AdapterViewFlipper,StackView,TextSwitcher,ViewAnimator,ViewFlipper,ViewSwitcher

目前我接触到的是ViewFlipper，好，今天我们来学习下怎么使用ViewFlipper在同一个Activity里面使用屏幕的切换。

一、理论知识：

查看android的开发文档我们可以看到此类有以下属性和方法：

图片图片

二、实践：

现在我们要实现在一个activity里面多个view之间进行切换。

2.1新建一个layout页面xml文件viewflipper.xml,里面放了一个ViewFlipper，然后ViewFlipper里面包含3个RelativeLayout,每个RelativeLayout里面包含一个按钮和一个图片，每个RelativeLayout就相当于一个view

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<ViewFlipper android:layout_width="fill_parent" android:id="@+id/flipper"

android:layout_height="fill_parent" android:layout_alignParentTop="true"

android:layout_alignParentLeft="true" android:persistentDrawingCache="animation"

android:flipInterval="2000" android:inAnimation="@anim/push_left_in"

android:outAnimation="@anim/push_left_out">

<RelativeLayout android:layout_width="fill_parent"

android:id="@+id/relativeLayout1" android:layout_height="fill_parent"

android:layout_alignParentTop="true" android:layout_alignParentLeft="true">

<Button android:text="Next" android:id="@+id/Button_next1"

android:layout_width="fill_parent" android:layout_height="wrap_content">

</Button>

<ImageView android:id="@+id/image1" android:src="@drawable/dell" android:layout_below="@+id/Button_next1"

android:layout_width="fill_parent" android:layout_height="wrap_content">

</ImageView>

</RelativeLayout>

<RelativeLayout android:layout_width="fill_parent"

android:id="@+id/relativeLayout2" android:layout_height="fill_parent"

android:layout_below="@+id/relativeLayout1" android:layout_toRightOf="@+id/relativeLayout1">

<Button android:text="Next" android:id="@+id/Button_next2"

android:layout_width="fill_parent" android:layout_height="wrap_content">

</Button>

<ImageView android:id="@+id/image2" android:src="@drawable/lg" android:layout_below="@+id/Button_next2"

android:layout_width="fill_parent" android:layout_height="wrap_content">

</ImageView>

</RelativeLayout>

<RelativeLayout android:layout_width="fill_parent"

android:id="@+id/relativeLayout2" android:layout_height="fill_parent"

android:layout_below="@+id/relativeLayout1" android:layout_toRightOf="@+id/relativeLayout1">

<Button android:text="Next" android:id="@+id/Button_next3"

android:layout_width="fill_parent" android:layout_height="wrap_content">

</Button>

<ImageView android:id="@+id/image3" android:src="@drawable/lenovo"

android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@+id/Button_next3">

</ImageView>

</RelativeLayout>

</ViewFlipper>

</RelativeLayout>

切换效果xml

push_left_in.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">

<translate

android:fromXDelta="100%p"

android:toXDelta="0"

android:duration="500"/>

<alpha

android:fromAlpha="0.0"

android:toAlpha="1.0"

android:duration="500" />

</set>

push_left_out.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">

<translate

android:fromXDelta="0"

android:toXDelta="-100%p"

android:duration="500"/>

<alpha

android:fromAlpha="1.0"

android:toAlpha="0.0"

android:duration="500" />

</set>

2.2新建一个activity ViewFlipperActivity.java，这个activity我们是通过按钮点击事件来实现屏幕的切换的，通过android.view.GestureDetector类可以检测各种手势事件，该类有两个回调接口OnGestureListener，OnDoubleTapListener，所以我们继承这两个接口来实现手势事件

/**

*

*/

package Test.HelloWorld;

import android.app.Activity;

import android.os.Bundle;

import android.util.Log;

import android.view.GestureDetector;

import android.view.GestureDetector.OnDoubleTapListener;

import android.view.GestureDetector.OnGestureListener;

import android.view.MotionEvent;

import android.view.View;

import android.widget.Button;

import android.widget.ViewFlipper;

/**

* @author zhuzhifei 20110907

*/

public class ViewFlipperActivity extends Activity implements OnGestureListener,

OnDoubleTapListener

{

private GestureDetector mGestureDetector;// 手势对象

private ViewFlipper mViewFlipper; // 视图滑动对象

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.viewflipper);

mGestureDetector = new GestureDetector(this);

// 第一个页面按钮，同时添加按钮事件

Button buttonNext1 = (Button) findViewById(R.id.Button_next1);

mViewFlipper = (ViewFlipper) findViewById(R.id.flipper);

buttonNext1.setOnClickListener(new View.OnClickListener() {

public void onClick(View view) {

// 在layout中定义的属性，也可以在代码中指定

// mViewFlipper.setInAnimation(getApplicationContext(),

// R.anim.push_left_in);

// mViewFlipper.setOutAnimation(getApplicationContext(),

// R.anim.push_left_out);

// mViewFlipper.setPersistentDrawingCache(ViewGroup.PERSISTENT_ALL_CACHES);

// mViewFlipper.setFlipInterval(1000);

mViewFlipper.showNext();

// 设置自动翻页

setFlip();

}

});

// 第二个页面按钮，同时添加按钮事件

Button buttonNext2 = (Button) findViewById(R.id.Button_next2);

buttonNext2.setOnClickListener(new View.OnClickListener() {

public void onClick(View view) {

mViewFlipper.showNext();

// 设置自动翻页

setFlip();

}

});

// 第三个页面按钮，同时添加按钮事件

Button buttonNext3 = (Button) findViewById(R.id.Button_next3);

buttonNext3.setOnClickListener(new View.OnClickListener() {

public void onClick(View view) {

mViewFlipper.showNext();

// 设置自动翻页

setFlip();

}

});

}

// 设置是否自动翻页

private void setFlip() {

// 当前正在自动翻页点击按钮则停止

if (mViewFlipper.isFlipping()) {

mViewFlipper.stopFlipping();

} else// 否则开始翻页

{

mViewFlipper.startFlipping();

}

}

//设置手触事件

@Override

public boolean onTouchEvent(MotionEvent event) {

// TODO Auto-generated method stub

return this.mGestureDetector.onTouchEvent(event);

}

// 双击事件

@Override

public boolean onDoubleTap(MotionEvent e) {

// TODO Auto-generated method stub

Log.d("ondouble", "...onDoubleTap...");

if (mViewFlipper.isFlipping()) {

mViewFlipper.stopFlipping();

} else {

mViewFlipper.startFlipping();

}

return true;

}

@Override

public boolean onDoubleTapEvent(MotionEvent e) {

// TODO Auto-generated method stub

return false;

}

@Override

public boolean onSingleTapConfirmed(MotionEvent e) {

// TODO Auto-generated method stub

return false;

}

@Override

public boolean onDown(MotionEvent e) {

// TODO Auto-generated method stub

return false;

}

@Override

public void onLongPress(MotionEvent e) {

// TODO Auto-generated method stub

}

@Override

public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,

float distanceY) {

// TODO Auto-generated method stub

return false;

}

@Override

public void onShowPress(MotionEvent e) {

// TODO Auto-generated method stub

}

@Override

public boolean onSingleTapUp(MotionEvent e) {

// TODO Auto-generated method stub

return false;

}

// 手指划过事件

@Override

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,

float velocityY) {

// TODO Auto-generated method stub

Log.d("fling", "...onFling...");

if (e1.getX() > e2.getX()) {// move to left

mViewFlipper.showNext();

} else if (e1.getX() < e2.getX()) {

mViewFlipper.showPrevious();

mViewFlipper.setInAnimation(getApplicationContext(),

R.anim.push_left_in);

mViewFlipper.setOutAnimation(getApplicationContext(),

R.anim.push_left_out);

} else {

return false;

}

return true;

}

}

2.3 在AndroidManifest.xml里面添加我们的activity

<activity android:name=".ViewFlipperActivity">

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

运行效果图：



2.4小插曲

开发过程中遇到一个问题：资源文件R.java在clean的时候突然消失，当时也着急怎么办？难道要新建一个项目，那多浪费事件啊，仔细检查后发现，只要xml文件有问题，系统是绝对不会给你自动生成这个R.java文件，因为他要参照你的每张xml里的数据来生成R.java，所以自然就生成不了了。虽然知道了原因但是问题头疼，假如项目的layout xml文件有几十个，这个时候怎么办，难道要一个一个xml的看吗，呵呵，其实也不是，把console中的信息clear一下，然后再clear项目一下，这个时候，console中会有很多红色的信息，参照这个肯定能准确的找到哪个文件报错了。我这里出错的原因是因为页面上的图片没有添加进去，/res/drawable里面添加后就OK了