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

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

上一篇:delphi怎么创建一个文本文件


下一篇:微信开发之开发环境搭建( visual studio 2015we + IIS express + ngrok)