Android切换页面效果的实现一：WebView+ViewFlipper

前言：

　　这两周在帮学校做一个新生入学用的“新里程”的项目，要做到页面切换阅读的效果，自己百度了下，找到普遍是使用WebView+ViewFlipper的实现方法，但这种方法不能满足我的要求，因为它很难实现定位的效果，就是定位到固定某一页，不过还是贴出来，学习下。

代码实现：

布局很简单，只用一个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>

 

自定义的WebView,MyWebView.java

package cn.edu.stu.webview_viewflipper;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.animation.AnimationUtils;
import android.webkit.WebView;
import android.widget.ViewFlipper;

public class MyWebView extends WebView {

    float downXValue;
    long downTime;
    private ViewFlipper flipper;
    private float lastTouchX, lastTouchY;
    private boolean hasMoved = false;

    public MyWebView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    public MyWebView(Context context, ViewFlipper flipper) {
        super(context);

        this.flipper = flipper;
    }

    public MyWebView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
    }

    @Override
    public boolean onTouchEvent(MotionEvent evt) {
        // TODO Auto-generated method stub
        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");

                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;
    }
}

主体Activity，MainActivity.java:

package cn.edu.stu.webview_viewflipper;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {

    MyWebView myWebView;
    private ViewFlipper flipper;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        // super.loadUrl("file:///android_asset/stu_for_u.html");
        // MyWebView wv=(MyWebView)findViewById(R.id.wv);
        // wv.loadUrl("file:///android_asset/stu_for_u.html");
        // wv.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

        flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper);
        flipper.addView(addWebView("file:///android_asset/experience/exp_article2.html"));
        flipper.addView(addWebView("file:///android_asset/experience/exp_article6.html"));
        flipper.addView(addWebView("file:///android_asset/experience/exp_article10.html"));
    }

    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;
    }
}

　　这个实现有两个缺点：1.不能实现定位；2.会循环切换页面；

　　我没有解决这两个问题，而是采用另一个控件来解决了，如果哪位博友能够解决，分享下解决方法！