（android学习）Android 学习ViewFlipper ——界面滑动切换

ViewFlipper是一个View容器类，ViewFlipper继承至FrameLayout的，所以它是一个Layout里面可以放置多个View，一般用于实现图片、页面的切换，并可以设定时间间隔，让它自动播放。继承关系如下：

一、实现

本例通过ViewFlipper和onTouchEvent实现自动播放和手势滑屏事件，并通过倒计时来实现自动播放的动画效果。先看效果：

1、xml实现

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.myviewpager.MainActivity$PlaceholderFragment" >


<ViewFlipper
android:id="@+id/viewFlipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>


</ViewFlipper>


<FrameLayout
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_alignParentBottom="true"
android:layout_marginBottom="50dip"
>
<LinearLayout
android:id="@+id/changePic_layout"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_gravity="center"
>

</LinearLayout>


</FrameLayout>

</RelativeLayout>

2、动画效果

in_leftright.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="3000"
android:fromXDelta="-100%p"
android:toXDelta="0" />
</set>

out_leftright.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="3000"
android:fromXDelta="0"
android:toXDelta="100%p" />
</set>

in_rightleft.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="3000"
android:fromXDelta="100%p"
android:toXDelta="0" />
</set>

out_rightleft.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="3000"
android:fromXDelta="0"
android:toXDelta="-100%p" />
</set>

3、java关键代码

/********倒计时6秒***/
CountDownTimer mytimer = new CountDownTimer(6000,1000){

@Override

public void onFinish() {

viFlipper.setInAnimation(in);

viFlipper.setOutAnimation(out);

viFlipper.showNext();

changecurrent();
start();

}

@Override

public void onTick(long millisUntilFinished) {}

};

//根据手势翻页
public boolean onTouchEvent(MotionEvent event) {

// viFlipper.stopFlipping(); // 点击事件后，停止自动播放
// viFlipper.setAutoStart(false);
mytimer.cancel();// 取消倒计时
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = event.getX();
break;
case MotionEvent.ACTION_UP:

if (event.getX() > startX) { // 向右滑动
viFlipper.setInAnimation(this, R.anim.in_leftright); //新的页面
viFlipper.setOutAnimation(this, R.anim.out_leftright); //旧的页面
viFlipper.showNext();

changecurrent();


} else if (event.getX() < startX) { // 向左滑动
viFlipper.setInAnimation(this, R.anim.in_rightleft);//新的页面
viFlipper.setOutAnimation(this, R.anim.out_rightleft);//旧的页面
viFlipper.showPrevious();

changecurrent();
}
break;
}

mytimer.start();// 重启倒计时
return super.onTouchEvent(event);
}

//改变选中底部小圆点

void changecurrent()
{
View cureImageView = viFlipper.getCurrentView();//当前图片
for (int i = 0; i < pic.length; i++)
{
ImageView v = (ImageView)piclayout.getChildAt(i);

View lishiView = viFlipper.getChildAt(i);
if (cureImageView == lishiView)//是否为当前图片
{
v.setImageDrawable(getResources().getDrawable(R.drawable.choose_pic)); //默认选中
}
else {
v.setImageDrawable(getResources().getDrawable(R.drawable.unchoose_pic));
}

}
}

二、效果图

三、总结

之前只是了解过这个控件，没有深入的去了解，也没有做过什么东西，故今天学习一下，并写了这个demo，以便加强了解和记录下来以备将来能用到，也希望能帮助其他人。如果你觉得还行的话，就留个言，顶一下吧。

源码

ps:这个代码是我在最低版本4.0上完成的，低版本不知道能否使用，不行的话，改动的东西应该也不会太多，自己动手改吧。886 睡了。

推荐几个好的博客：

http://blog.csdn.net/ithomer/article/details/7420567