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

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