今天给大家介绍一下如何实现Android主页面的左右拖动效果。实现起来很简单,就是使用ViewFlipper来将您要来回拖动的View装在一起,然后与GestureDetector手势识别类来联动,确定要显示哪个View,加上一点点动画效果即可。比如当手指向左快速滑动时跳转到上一个View,手指向右快速滑动时跳转到下一个View,本例中使用图片作为各个View的页面,实现左右快速滑动显示不同的图片。
Java代码:
在ViewFlipper中放置多个layout(接下来会在不同的layout中来回滑动),ViewFlipper在同一个页面就显示其中一个layout。
Java代码:
接下来我们来看看 Activity,我们的 Activity需要实现两个接口 OnGestureListener,OnTouchListener。
Java代码:
Java代码:
- <linearlayout android android:layout_height="fill_parent"
- android:layout_width="fill_parent"
- android:orientation="vertical"
- xmlns:android="http://schemas.android.com/apk/res/android">
- <viewflipper
- androidandroid:id="@+id/flipper"
- android:layout_below="@+id/CockpitLayout"
- android:layout_height="fill_parent"
- android:layout_width="fill_parent">
- <include android:id="@+id/firstlayout" layout="@layout/first">
- <include android:id="@+id/secondlayout" layout="@layout/second">
- <include android:id="@+id/thirdlayout" layout="@layout/third">
- <include android:id="@+id/fourthlayout" layout="@layout/fourth">
- </include>
- </include>
- </include>
- </include>
- </viewflipper>
- </linearlayout>
在ViewFlipper中放置多个layout(接下来会在不同的layout中来回滑动),ViewFlipper在同一个页面就显示其中一个layout。
Java代码:
- <linearlayout
- androidandroid:gravity="center_vertical"
- android:layout_height="fill_parent"
- android:layout_width="fill_parent"
- xmlns:android="http://schemas.android.com/apk/res/android">
- <imageview
- androidandroid:layout_height="wrap_content"
- android:layout_width="wrap_content"
- android:src="@drawable/v1">
- </imageview>
- </linearlayout>
接下来我们来看看 Activity,我们的 Activity需要实现两个接口 OnGestureListener,OnTouchListener。
Java代码:
- import android.app.Activity;
- import android.os.Bundle;
- import android.view.GestureDetector;
- import android.view.MotionEvent;
- import android.view.View;
- import android.view.GestureDetector.OnGestureListener;
- import android.view.View.OnTouchListener;
- import android.view.animation.AccelerateInterpolator;
- import android.view.animation.Animation;
- import android.view.animation.TranslateAnimation;
- import android.widget.ViewFlipper;
- public class ViewFlipperDemo extends Activity implementsOnGestureListener,OnTouchListener{
- private ViewFlipper mFlipper;
- GestureDetector mGestureDetector;
- private int mCurrentLayoutState;
- private static final int FLING_MIN_DISTANCE = 100;
- private static final int FLING_MIN_VELOCITY = 200;
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);
- mFlipper = (ViewFlipper) findViewById(R.id.flipper);
- //注册一个用于手势识别的类
- mGestureDetector = new GestureDetector(this);
- //给mFlipper设置一个listener
- mFlipper.setOnTouchListener(this);
- mCurrentLayoutState = 0; //允许长按住ViewFlipper,这样才能识别拖动等手势
- mFlipper.setLongClickable(true);
- }
- /** * 此方法在本例中未用到,可以指定跳转到某个页面 * @param switchTo */
- public void switchLayoutStateTo(int switchTo) {
- while (mCurrentLayoutState != switchTo) {
- if (mCurrentLayoutState > switchTo) {
- mCurrentLayoutState--;
- mFlipper.setInAnimation(inFromLeftAnimation());
- mFlipper.setOutAnimation(outToRightAnimation());
- mFlipper.showPrevious();
- }
- else {
- mCurrentLayoutState++;
- mFlipper.setInAnimation(inFromRightAnimation());
- mFlipper.setOutAnimation(outToLeftAnimation());
- mFlipper.showNext();
- }
- } ;
- }
- /** * 定义从右侧进入的动画效果 * @return */
- protected Animation inFromRightAnimation() {
- Animation inFromRight = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
- inFromRight.setDuration(500);
- inFromRight.setInterpolator(new AccelerateInterpolator());
- return inFromRight;
- }
- /** * 定义从左侧退出的动画效果 * @return */
- protected Animation outToLeftAnimation() {
- Animation outtoLeft = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
- outtoLeft.setDuration(500);
- outtoLeft.setInterpolator(new AccelerateInterpolator());
- return outtoLeft;
- }
- /** * 定义从左侧进入的动画效果 * @return */
- protected Animation inFromLeftAnimation() {
- Animation inFromLeft = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
- inFromLeft.setDuration(500);
- inFromLeft.setInterpolator(new AccelerateInterpolator());
- return inFromLeft;
- }
- /** * 定义从右侧退出时的动画效果 * @return */
- protected Animation outToRightAnimation() {
- Animation outtoRight = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
- outtoRight.setDuration(500);
- outtoRight.setInterpolator(new AccelerateInterpolator());
- return outtoRight;
- }
- public boolean onDown(MotionEvent e) {
- // TODO Auto-generated method stub return false;
- }
- /* * 用户按下触摸屏、快速移动后松开即触发这个事件 * e1:第1个ACTION_DOWN MotionEvent * e2:最后一个ACTION_MOVE MotionEvent * velocityX:X轴上的移动速度,像素/秒 * velocityY:Y轴上的移动速度,像素/秒 * 触发条件 : * X轴的坐标位移大于FLING_MIN_DISTANCE,且移动速度大于FLING_MIN_VELOCITY个像素/秒 */
- public boolean onFling(MotionEvent e1, MotionEvent e2, floatvelocityX, float velocityY) {
- if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) {
- // 当像左侧滑动的时候
- //设置View进入屏幕时候使用的动画
- mFlipper.setInAnimation(inFromRightAnimation());
- //设置View退出屏幕时候使用的动画
- mFlipper.setOutAnimation(outToLeftAnimation());
- mFlipper.showNext();
- }
- else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE && Math.abs(velocityX) > FLING_MIN_VELOCITY) {
- // 当像右侧滑动的时候
- mFlipper.setInAnimation(inFromLeftAnimation());
- mFlipper.setOutAnimation(outToRightAnimation());
- mFlipper.showPrevious();
- }
- return false;
- }
- public void onLongPress(MotionEvent e) {
- // TODO Auto-generated method stub
- }
- public boolean onScroll(MotionEvent e1, MotionEvent e2, floatdistanceX, float distanceY) {
- return false;
- }
- public void onShowPress(MotionEvent e) {
- // TODO Auto-generated method stub
- }
- public boolean onSingleTapUp(MotionEvent e) {
- // TODO Auto-generated method stub return false;
- }
- public boolean onTouch(View v, MotionEvent event) {
- // 一定要将触屏事件交给手势识别类去处理(自己处理会很麻烦的)
- return mGestureDetector.onTouchEvent(event);
- }
- }