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.会循环切换页面；

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

巴特西

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

最新文章

热门文章