android ViewFlipper 左右滑动效果

先看下效果：

 左右滑动实现的方式比较多，本例子是用ViewFlipper + GestureDetector + 动画实现的。

功能也比较简单 左右滑动更换图片。

几个主要的步骤：

1.  在main.xml添加ViewFlipper

<?xml version="1.0" encoding="utf-8"?>
<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" />

</LinearLayout>

2.  在drawable中添加图片

可以在网络上搜点android壁纸类的

3.  在anim中定义动画

push_left_in.xml        

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 画面转换位置移动动画效果
     开始向左动画
     fromXDelta ： 动画开始时 X坐标位置
     toXDelta ：动画结束时 X坐标位置
     duration ：动画持续时间-->
    <translate android:fromXDelta="100%p" android:toXDelta="0"
        android:duration="500" />
    <!-- 渐变透明的动画效果 -->
    <alpha android:fromAlpha="0.1" 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.1"
        android:duration="500"/>
</set>

 

push_right_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.1" android:toAlpha="1.0"
        android:duration="500"/>
</set>

push_right_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.1"
        android:duration="500"/>
</set>

4. Activity中的实现

package com.test.activity;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class TestActivity extends Activity implements OnGestureListener{
 GestureDetector detector;
 private ViewFlipper flipper;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  
  detector = new GestureDetector(this);
  
  flipper = (ViewFlipper) findViewById(R.id.flipper);
  flipper.addView(getImageView(R.drawable.one));
  flipper.addView(getImageView(R.drawable.two));
  flipper.addView(getImageView(R.drawable.three));
  flipper.addView(getImageView(R.drawable.four));
 }

    private View getImageView(int id){
     ImageView imgView = new ImageView(this);
     imgView.setImageResource(id);
     return imgView;
    }
 
    @Override
    public boolean onTouchEvent(MotionEvent event) {
     return detector.onTouchEvent(event);
    }
   
 @Override
 public boolean onDown(MotionEvent e) {
  return false;
 }

 @Override
 public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
  if(e1.getX() - e2.getX() > 120){//向右滑动
   flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
   flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
   flipper.showNext();
  }else if(e2.getX() - e1.getX() > 120){//向左滑动
   flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
   flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
   flipper.showPrevious();
  }
  return false;
 }

 @Override
 public void onLongPress(MotionEvent e) {}

 @Override
 public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
  return false;
 }

 @Override
 public void onShowPress(MotionEvent e) {}

 @Override
 public boolean onSingleTapUp(MotionEvent e) {
  return false;
 }

}

很简单的一个左右滑动效果，一起进步，额也是边看别写。