【Android基础知识】使用ViewFlipper实现页面左右滑动

说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果，不管是微博，还是QQ等。实现左右滑动的方式很多，有ViewPaer(不过这个和需要android-support-v4.jar的支持)，自定义实现Viewgroup，gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。

以下会会用到的技术有：
1、ViewFlipper
2、GestureDetector
3、Animation
主要是这三个类再起作用。

原理：向左向右滑动主要是依赖手势来控制，手势向右滑动就调用 viewFlipper.showNext();方法，同理，向左滑动就会去调用viewFlipper.showPrevious();方法。
接下来直接上代码：

首先在布局文件中添加ViewFlipper的标签：

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.viewflipperdemo.MainActivity" >
   <ViewFlipper 
       android:id="@+id/viewflipper"
       android:layout_width="match_parent"
       android:layout_height="match_parent"> 
   </ViewFlipper>
</RelativeLayout>

MainActivity.java

public class MainActivity extends Activity implements OnGestureListener{
<span style="white-space:pre">	</span> private ViewFlipper viewFlipper;
     private GestureDetector detector; //手势检测


     Animation leftInAnimation;
     Animation leftOutAnimation;
     Animation rightInAnimation;
     Animation rightOutAnimation;
    private int[] res = {R.drawable.pic1,R.drawable.pic2,R.drawable.pic3,R.drawable.pic4};
    float startX;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewFlipper = (ViewFlipper)findViewById(R.id.viewflipper);
        detector = new GestureDetector(this);
        //动态加载子view
        for(int i = 0;i<res.length;i++){
        <span style="white-space:pre">	</span>viewFlipper.addView(getImageView(res[i]));
        }
        leftInAnimation = AnimationUtils.loadAnimation(this, R.anim.left_in);
        leftOutAnimation = AnimationUtils.loadAnimation(this, R.anim.left_out);
        rightInAnimation = AnimationUtils.loadAnimation(this, R.anim.right_in);
        rightOutAnimation = AnimationUtils.loadAnimation(this, R.anim.right_out);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
       return this.detector.onTouchEvent(event); //touch事件交给手势处理。
    }
    private ImageView getImageView(int resId){
      ImageView image = new ImageView(this);
      //image.setImageResource(resId);
      image.setBackgroundResource(resId);
      return image;
    }
@Override
public boolean onDown(MotionEvent e) {

return false;
}
@Override
public void onShowPress(MotionEvent e) {
}
@Override
public boolean onSingleTapUp(MotionEvent e) {
<span style="white-space:pre">	</span>return false;
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,float distanceY) {
<span style="white-space:pre">	</span>return false;
}
@Override
public void onLongPress(MotionEvent e) {
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {
if (e1.getX() - e2.getX() > 120) {
<span style="white-space:pre">	</span>//避免循环滑动
<span style="white-space:pre">	</span>if (viewFlipper.getDisplayedChild() == res.length - 1) {
<span style="white-space:pre">		</span>viewFlipper.stopFlipping();
<span style="white-space:pre">		</span>return false;
<span style="white-space:pre">	</span>} else {
<span style="white-space:pre">		</span>viewFlipper.setInAnimation(leftInAnimation);
<span style="white-space:pre">		</span>viewFlipper.setOutAnimation(leftOutAnimation);
<span style="white-space:pre">		</span>viewFlipper.showNext();// 向右滑动
<span style="white-space:pre">		</span>return true;
<span style="white-space:pre">	</span>}
} else if (e1.getX() - e2.getY() < -120) {
<span style="white-space:pre">	</span>if (viewFlipper.getDisplayedChild() == 0) {
<span style="white-space:pre">		</span>viewFlipper.stopFlipping();
<span style="white-space:pre">		</span>return false;
<span style="white-space:pre">	</span>} else {
<span style="white-space:pre">		</span>viewFlipper.setInAnimation(rightInAnimation);
<span style="white-space:pre">		</span>viewFlipper.setOutAnimation(rightOutAnimation);
<span style="white-space:pre">		</span>viewFlipper.showPrevious();// 向左滑动
<span style="white-space:pre">		</span>return true;
        }
    }
    return false;
}
}

动画文件

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="600"
        />
    <alpha 
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="600"
        />
</set>

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="600"
        />
    <alpha 
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:duration="600"
        />
</set>

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="600"
        />
    <alpha 
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="600"
        />
</set>

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="600"
        />
    <alpha 
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:duration="600"
        />
</set>

本文转自： http://bbs.51cto.com/thread-970178-1.html