Android使用ViewFlipper做页面切换，与手势滑动切换的使用

最新推荐文章于 2024-09-21 14:23:15 发布

cpcpc

最新推荐文章于 2024-09-21 14:23:15 发布

阅读量1.1k

点赞数

分类专栏： Android 文章标签： android import layout encoding float button

Android 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

Android系统自带有一个多页面管理的控件：ViewFlipper.

它可以简单实现子页面的切换，，，

它只需使用addView方法添加几个View，每个View对应的是一个页面，即可完成对于多页面的管理，，，

在android上实现手势的识别也比较简单，可以实现OnTouchListener和OnGuestureListener接口，

然后在OnTouch函数中注册GestureDetector来判别手势动作，

参考一位大牛的文章：

http://wang-peng1.iteye.com/blog/572886

GestureDetector.OnGestureListener：用来通知普通的手势事件，该接口有如下六个回调函数：
1.   onDown(MotionEvent e)：down事件；
2.   onSingleTapUp(MotionEvent e)：一次点击up事件；
3.   onShowPress(MotionEvent e)：down事件发生而move或则up还没发生前触发该事件；
4.   onLongPress(MotionEvent e)：长按事件；
5.   onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)：滑动手势事件；
6.   onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)：在屏幕上拖动事件。

主要判断是在onFling()函数里面，e1表示开始按下去的位置信息，e2表示抬起时的位置信息，因此可以通过它们在x轴上面的距离差来是左滑还是右滑。。。

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
        float velocityY) {  
    // TODO Auto-generated method stub   
    if (e2.getX()-e1.getX() > 100) {  
        // fling right   
        showNextView();  
    } else if (e1.getX() - e2.getX() > 100) {  
        // fling left   
        showPreviousView();  
    }  
    return false;  
}

资源文件：

<?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">  
<LinearLayout  
  xmlns:android="http://schemas.android.com/apk/res/android"  
  android:orientation="horizontal"  
  android:layout_width="fill_parent"  
  android:layout_height="wrap_content">  
    <Button  
      android:id="@+id/btnPrev"  
      android:text="Previous"  
      android:layout_width="wrap_content"  
      android:layout_height="wrap_content" />  
    <Button  
      android:id="@+id/btnNext"  
      android:text="Next"  
      android:layout_width="wrap_content"  
      android:layout_height="wrap_content" />  
</LinearLayout>  
<ViewFlipper   
  android:id="@+id/vfFlingTest"   
  android:layout_width="fill_parent"   
  android:layout_height="fill_parent"></ViewFlipper>  
</LinearLayout>

代码：

import android.app.Activity;  
import android.os.Bundle;  
import android.view.GestureDetector;  
import android.view.KeyEvent;  
import android.view.MotionEvent;  
import android.view.View;  
import android.view.GestureDetector.OnGestureListener;  
import android.view.View.OnClickListener;  
import android.view.View.OnTouchListener;  
import android.view.ViewGroup.LayoutParams;  
import android.view.animation.AnimationUtils;  
import android.widget.Button;  
import android.widget.EditText;  
import android.widget.ImageView;  
import android.widget.TextView;  
import android.widget.ViewFlipper;  
public class FlingTest extends Activity implements  
            OnTouchListener, OnGestureListener{  
    private Button btnPrev;  
    private Button btnNext;  
    private ViewFlipper vfFlingTest;  
      
    private TextView tvFlipper;  
    private EditText etFlipper;  
    private ImageView ivFlipper;  
      
    private GestureDetector mGestureDetector;  
      
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        // TODO Auto-generated method stub   
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.fling_test);  
          
        btnPrev = (Button)findViewById(R.id.btnPrev);  
        btnNext = (Button)findViewById(R.id.btnNext);  
        vfFlingTest = (ViewFlipper)findViewById(R.id.vfFlingTest);  
          
        initViews();  
          
        vfFlingTest.addView(tvFlipper);  
        vfFlingTest.addView(etFlipper);  
        vfFlingTest.addView(ivFlipper);  
          
        vfFlingTest.setOnTouchListener(this);  
        vfFlingTest.setLongClickable(true);  
        mGestureDetector = new GestureDetector(this);  
          
        btnPrev.setOnClickListener(new OnClickListener() {  
              
            public void onClick(View v) {  
                // TODO Auto-generated method stub   
                showPreviousView();  
            }  
        });  
          
        btnNext.setOnClickListener(new OnClickListener() {  
              
            public void onClick(View v) {  
                // TODO Auto-generated method stub   
                showNextView();  
            }  
        });  
    }  
      
    public void showPreviousView() {  
        vfFlingTest.setInAnimation(AnimationUtils.loadAnimation(  
                this, R.anim.right_in));  
        vfFlingTest.setOutAnimation(AnimationUtils.loadAnimation(  
                this, R.anim.left_out));  
        vfFlingTest.showPrevious();  
    }  
      
    public void showNextView() {  
        vfFlingTest.setInAnimation(AnimationUtils.loadAnimation(  
                this, R.anim.left_in));  
        vfFlingTest.setOutAnimation(AnimationUtils.loadAnimation(  
                this, R.anim.right_out));  
        vfFlingTest.showNext();  
    }  
      
    private void initViews() {  
        tvFlipper = new TextView(this);  
        tvFlipper.setText("this is a text view!");  
          
        etFlipper = new EditText(this);  
        etFlipper.setText("this is a text view!");  
          
        ivFlipper = new ImageView(this);  
        ivFlipper.setLayoutParams(new LayoutParams(  
                LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
        ivFlipper.setImageResource(R.drawable.pic1);  
    }  
    @Override  
    protected void onDestroy() {  
        // TODO Auto-generated method stub   
        android.os.Process.killProcess(android.os.Process.myPid());  
        super.onDestroy();  
    }  
    @Override  
    public boolean onKeyDown(int keyCode, KeyEvent event) {  
        // TODO Auto-generated method stub   
        if (keyCode == KeyEvent.KEYCODE_BACK) {  
            finish();  
            return true;  
        }  
        return super.onKeyDown(keyCode, event);  
    }  
    public boolean onTouch(View view, MotionEvent event) {  
        // TODO Auto-generated method stub   
        return mGestureDetector.onTouchEvent(event);  
    }  
  
    public boolean onDown(MotionEvent arg0) {  
        // TODO Auto-generated method stub   
        return false;  
    }  
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
            float velocityY) {  
        // TODO Auto-generated method stub   
        if (e2.getX()-e1.getX() > 100) {  
            // fling right   
            showNextView();  
        } else if (e1.getX() - e2.getX() > 100) {  
            // fling left   
            showPreviousView();  
        }  
        return false;  
    }  
    public void onLongPress(MotionEvent e) {  
        // TODO Auto-generated method stub   
          
    }  
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
            float distanceY) {  
        // TODO Auto-generated method stub   
        return false;  
    }  
    public void onShowPress(MotionEvent e) {  
        // TODO Auto-generated method stub   
          
    }  
    public boolean onSingleTapUp(MotionEvent e) {  
        // TODO Auto-generated method stub   
        return false;  
    }  
}

还有就是一个页面切换的简单动画效果（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" />   
</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="500" />   
</set>

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="500" />   
</se

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" />   
</set>