Android使用ViewFlipper实现左右滑动效果面

在我的博客中，上次是使用ViewPager实现左右滑动的效果的，请看文章：Android使用ViewPager实现左右滑动效果。

这次我来使用ViewFlipper实现这种效果，好了，先看看效果吧：

效果看完了就来实现这个效果。

1.布局文件

主界面使用下面的布局：

[html] view plaincopy

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/ViewFlipper1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</ViewFlipper>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/da"
android:id="@+id/imageview1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/xiao"
android:id="@+id/imageview2"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/xiao"
android:id="@+id/imageview3"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/xiao"
android:id="@+id/imageview4"
/>
</LinearLayout>
</FrameLayout>

简单的介绍一下布局文件：最外层是一个FrameLayout，使用FrameLayout就是为了是的下面的四个点在ViewFlipper上面。LayoutLayout在FrameLayout的下面和水平居中。

2.ViewFlipper的使用

[java] view plaincopy

flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper1);
flipper.addView(addImageView(R.drawable.png1o));
flipper.addView(addImageView(R.drawable.png2o));
flipper.addView(addImageView(R.drawable.png3o));
flipper.addView(addView());

在Activity中声明一个ViewFlipper的对象，在布局中找到。将三张图片加到ViewFlipper中，另外再加一个View，这个View是从XML布局文件中得到的。布局文件如下：

[html] view plaincopy

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="45dp"
android:text="进入程序"
android:textColor="#3E3E3E"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>

在这个布局文件中有一个Button，用于跳转Activity用。

在Activity中声明一个GestureDetector对象，在onCreate方法中分配内存。

detector = new GestureDetector(this);

使用this为参数，那么就要使得activity类impllements OnGestureListener接口。重写几个方法。覆盖父类的onTouchEvent方法，在这个方法中如下写：

[java] view plaincopy

@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
return this.detector.onTouchEvent(event);
}

这样就使得detector能接受消息响应了。

在实现OnGestureListener的方法中判断用户的滑动来切换界面：

[java] view plaincopy

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
System.out.println("in------------>>>>>>>");
if (e1.getX() - e2.getX() > 120) {
if (i < 3) {
i++;
setImage(i);
this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.animation_right_in));
this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.animation_left_out));
this.flipper.showNext();
}
return true;
}
else if (e1.getX() - e2.getX() < -120) {
if (i > 0) {
i--;
setImage(i);
this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.animation_left_in));
this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.animation_right_out));
this.flipper.showPrevious();
}
return true;
}
return false;
}
void setImage(int i)
{
for(int j=0;j<4;j++)
{
if(j!=i)
iamges[j].setImageResource(R.drawable.xiao);
else
iamges[j].setImageResource(R.drawable.da);
}
}

界面切换的时候改变下面的四个小ImageView的图片。切换的动画在res/anim文件夹中，这里就不多说了。

整个工程的下载：Android使用ViewFlipper实现左右滑动效果面。。