使ViewFlipper中的WebView实现手势效果

 

今天写Blog阅读器的时候遇到了这个问题，把它分享给大家，让同样是新手们少走冤枉路
始初写这个功能的时候，用过了好多方法，也耗了不少时间去研究WebView和ViewFlipper的属性
后来知道了WebView本身的onTouchEvent和ViewFlipper有冲突;(WebView表示当然是老大说了算是吧，ViewFlipper表示压力很大,只能靠边站)

那没办法了，我们需要把WebView“修理”一下，重写它的onTouchEvent方法

先来看看ViewFlipper的Activity   TestWebViewFlip.java
创建ViewFlipper，给它添加2个WebView页面

public class TestWebViewFlip extends Activity{
 
     private ViewFlipper flipper;
     
     //定义类myWebView
     //MyWebView类，重写了onTouchEvent方法
     MyWebView myWebView; 
     /** Called when the activity is first created. */
     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
         flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper);
 
         //添加第一个alipper 为 http://www.baidu.com
         flipper.addView(addWebView("http://www.baidu.com"));
         //添加第二个alipper 为 http://www.google.com.hk
         flipper.addView(addWebView("http://www.google.com.hk"));
     }
     
     /**
      * 往flipper中添加WebView
      * @param url 网页地址
      * @return
     */
     private View addWebView(String url){
         myWebView = new MyWebView(this, flipper);
         //设置WebView属性，能够执行Javascript脚本 
         myWebView.getSettings().setJavaScriptEnabled(true); 
         //加载需要显示的网页 
         //webview.loadUrl("file:///android_asset/index.html"); 
         myWebView.loadUrl(url); 
         
         //使WebView的网页跳转在WebView中进行，而非跳到浏览器
         myWebView.setWebViewClient(new WebViewClient(){       
             public boolean shouldOverrideUrlLoading(WebView view, String url) {       
                 view.loadUrl(url);       
                 return true;       
             }       
         });
         return myWebView;
     }
 }

下面是继承了WebView类，重写onTouchEvent方法  MyWebView.java

setInAnimation(AnimationUtils.loadAnimation( this.getContext(), R.anim.push_right_in)); 这个是手势滑动的效果，push_right_in是效果对应的文件名

这个功能可以在网上找到好多相关资料，这里不详细说

public class MyWebView extends WebView {

    float downXValue;
    long downTime;
    private ViewFlipper flipper;

    private float lastTouchX, lastTouchY;
    private boolean hasMoved = false;

    public MyWebView(Context context, ViewFlipper flipper) {
            super(context);
            this.flipper = flipper;
    }

    @Override
    public boolean onTouchEvent(MotionEvent evt) {
        boolean consumed = super.onTouchEvent(evt);
        if (isClickable()) {
            switch (evt.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastTouchX = evt.getX();
                lastTouchY = evt.getY();
                downXValue = evt.getX();
                downTime = evt.getEventTime();
                hasMoved = false;
                break;
            case MotionEvent.ACTION_MOVE:
                hasMoved = moved(evt);
                break;
            case MotionEvent.ACTION_UP:
                float currentX = evt.getX();
                long currentTime = evt.getEventTime();
                float difference = Math.abs(downXValue - currentX);
                long time = currentTime - downTime;
                Log.i("Touch Event:", "Distance: " + difference + "px Time: "+ time + "ms");
                /** X轴滑动距离大于100，并且时间小于220ms,并且向X轴右方向滑动   && (time < 220) */
                if ((downXValue < currentX) && (difference > 100 && (time < 220))) {
                    /** 跳到上一页 */
                    this.flipper.setInAnimation(AnimationUtils.loadAnimation(
                            this.getContext(), R.anim.push_right_in));
                    this.flipper.setOutAnimation(AnimationUtils.loadAnimation(
                            this.getContext(), R.anim.push_right_out));
                    flipper.showPrevious();
                }
                /** X轴滑动距离大于100，并且时间小于220ms,并且向X轴左方向滑动 */
                if ((downXValue > currentX) && (difference > 100) && (time < 220)) {
                    /** 跳到下一页 */
                    this.flipper.setInAnimation(AnimationUtils.loadAnimation(
                            this.getContext(), R.anim.push_left_in));
                    this.flipper.setOutAnimation(AnimationUtils.loadAnimation(
                            this.getContext(), R.anim.push_left_out));
                    flipper.showNext();
                }
                break;
            }
        }
        return consumed || isClickable();
    }

    private boolean moved(MotionEvent evt) {
        return hasMoved || Math.abs(evt.getX() - lastTouchX) > 10.0
                || Math.abs(evt.getY() - lastTouchY) > 10.0;
    }

}

ViewFlipper的布局文件: main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
>
    <ViewFlipper android:id="@+id/ViewFlipper"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"
>
    </ViewFlipper>
</RelativeLayout>

手势滑动的4个效果文件:

路径res/anim/
push_left_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
android:fromXDelta="30"
android:toXDelta="-80"
android:fromYDelta="30"
android:toYDelta="300"
android:duration="2000"
/>
    <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>

手势打印结果: