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的更多相关文章
- Android切换页面效果的实现二:WebView+ViewPager
前言: 由于第一种切换页面的效果不能满足项目的要求,于是又找到另外一种更简单好用的方法来实现,顿时感觉,做项目开发,找到一种合适的方法能够减少很多时间,(刚开始自己弄的时候还想着自己写手势识别的方法呢 ...
- Android切换页面--setContentView
setContentView 一般切换页面,通过Intent,startActivity可以实现,但系统创建Activity是非常耗时的,如果对切换画面时间有要求,只能用setContentView在 ...
- VUE 实现tab切换页面效果
一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- android高级页面效果集锦
程序员界有个神奇的网站,那就是github,这个网站集合了一大批优秀的开源框架,极大地节省了开发者开发的时间,在这里我进行了一下整理,这样可以使我们在使用到时快速的查找到,希望对大家有所帮助! 一个强 ...
- Fragment+RadioButton实现点击切换页面效果
首先我们需要在主布局文件中 放一个 容器,方便让fragment加入进去,我们创建了四个Fragment,并用RedioButton实现了导航栏 MainActivity.java package c ...
- html+js(swiper.js)+css左右滑动切换页面效果,适配移动端
demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...
- Android开发之ViewPager实现多页面切换及动画效果(仿Android的Launcher效果)
Android开发中经常会有引导页或者切换页面等效果,本文采用ViewPager结合动画效果来实现仿Launcher以及页面切换的效果.源码地址在文章最后给出下载. 效果图如下: 1.Vi ...
- Android 动画之View动画效果和Activity切换动画效果
View动画效果: 1.>>Tween动画通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节点 ...
- react实现页面切换动画效果
一.前情概要 注:(我使用的路由是react-router4) 如下图所示,我们需要在页面切换时有一个过渡效果,这样就不会使页面切换显得生硬,用户体验大大提升: but the 问题是 ...
随机推荐
- Less2css error 终极解决方案
使用sublime Text3 的时候,安装less2Css后,和很多人一样以为大功告成,开始要运行编译less文件,结果开始发现 于是乎开始搜索问题和解决方案,然后就有了下面的解决方案1 方案1:通 ...
- Cocos2d-X学习之Ref类
先看看定义该类的头文件——CCRef.h /**************************************************************************** C ...
- 提交(post)xml文件给指定url的2种方法
原文:提交(post)xml文件给指定url的2种方法 1 这段代码是在网上搜到的,拿来共享,项目正好要用到.其中的data你只需要传递一个xml字符串就可以 protected string ...
- AJP协议总结与分析
Tomcat服务器通过Connector连接器组件与客户程序建立连接,Connector组件负责接收客户的请求,以及把Tomcat服务器的响应结果发送给客户.默认情况下,Tomcat在server.x ...
- CSS左中右布局,规范案例
html部分 <body> <form id="form1" runat="server"> <div id="wrap ...
- Aix 文件名补齐及aix6.1 bash安装
Aix历史查询快捷键=>按ESC+k 设置KSH的自动补全(仅仅是文件名补全,没有命令补全)和历史命令功能 方法一: set -o vi 历史命令功能(esc -,esc +)自动补全文件名(e ...
- ios 后台模式
1.在后台可以继续播放音频 To play sound in the background, make sure to add the following to the Info.plist file ...
- js正则验证两位小数 验证数字最简单正则表达式大全
<h3>输入完按回车后即可验证!(自认为最简单!)</h3> 正整数: <input type="text" size="20&quo ...
- Nginx 在安装入门
1.首先需要安装必要的库,PCRE,zlib sudo apt-get install libpcre3 libpcre3-dev 假设找不到文件的话就下载源文件进行安装. 2.解压下载的nginx源 ...
- 基于HTML5 Canvas的网页画板实现教程
HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...