展会信息港展会大全

使ViewFlipper中的WebView实现手势效果
来源:互联网   发布日期:2015-10-02 21:36:51   浏览:2197次  

导读:今天写Blog阅读器的时候遇到了这个问题,把它分享给大家,让同样是新手们少走冤枉路始初写这个功能的时候,用过了好多方法,也耗了不少时间去研究WebVi...

今天写Blog阅读器的时候遇到了这个问题,把它分享给大家,让同样是新手们少走冤枉路

始初写这个功能的时候,用过了好多方法,也耗了不少时间去研究WebView和ViewFlipper的属性

后来知道了WebView本身的onTouchEvent和ViewFlipper有冲突;(WebView表示当然是老大说了算是吧,ViewFlipper表示压力很大,只能靠边站)

那没办法了,我们需要把WebView“修理”一下,重写它的onTouchEvent方法

先来看看ViewFlipper的ActivityTestWebViewFlip.java

创建ViewFlipper,给它添加2个WebView页面

1 public class TestWebViewFlip extends Activity{

2

3private ViewFlipper flipper;

4

5//定义类myWebView

6//MyWebView类,重写了onTouchEvent方法

7MyWebView myWebView;

8/** Called when the activity is first created. */

9@Override

10public void onCreate(Bundle savedInstanceState) {

11super.onCreate(savedInstanceState);

12setContentView(R.layout.main);

13flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper);

14

15//添加第一个alipper 为http://www.baidu.com

16flipper.addView(addWebView("http://www.baidu.com"));

17//添加第二个alipper 为http://www.google.com.hk

18flipper.addView(addWebView("http://www.google.com.hk"));

19}

20

21/**

22* 往flipper中添加WebView

23* @param url 网页地址

24* @return

25 */

26private View addWebView(String url){

27myWebView = new MyWebView(this, flipper);

28//设置WebView属性,能够执行Javascript脚本

29myWebView.getSettings().setJavaScriptEnabled(true);

30//加载需要显示的网页

31//webview.loadUrl("file:///android_asset/index.html");

32myWebView.loadUrl(url);

33

34//使WebView的网页跳转在WebView中进行,而非跳到浏览器

35myWebView.setWebViewClient(new WebViewClient(){

36public boolean shouldOverrideUrlLoading(WebView view, String url) {

37view.loadUrl(url);

38return true;

39}

40});

41return myWebView;

42}

43 }

下面是继承了WebView类,重写onTouchEvent方法MyWebView.java

setInAnimation(AnimationUtils.loadAnimation( this.getContext(), R.anim.push_right_in)); 这个是手势滑动的效果,push_right_in是效果对应的文件名

这个功能可以在网上找到好多相关资料,这里不详细说

1 public class MyWebView extends WebView {

2

3float downXValue;

4long downTime;

5private ViewFlipper flipper;

6

7private float lastTouchX, lastTouchY;

8private boolean hasMoved = false;

9

10public MyWebView(Context context, ViewFlipper flipper) {

11super(context);

12this.flipper = flipper;

13}

14

15@Override

16public boolean onTouchEvent(MotionEvent evt) {

17boolean consumed = super.onTouchEvent(evt);

18if (isClickable()) {

19switch (evt.getAction()) {

20case MotionEvent.ACTION_DOWN:

21lastTouchX = evt.getX();

22lastTouchY = evt.getY();

23downXValue = evt.getX();

24downTime = evt.getEventTime();

25hasMoved = false;

26break;

27case MotionEvent.ACTION_MOVE:

28hasMoved = moved(evt);

29break;

30case MotionEvent.ACTION_UP:

31float currentX = evt.getX();

32long currentTime = evt.getEventTime();

33float difference = Math.abs(downXValue - currentX);

34long time = currentTime - downTime;

35Log.i("Touch Event:", "Distance: " + difference + "px Time: "+ time + "ms");

36/** X轴滑动距离大于100,并且时间小于220ms,并且向X轴右方向滑动&& (time < 220) */

37if ((downXValue < currentX) && (difference > 100 && (time < 220))) {

38/** 跳到上一页*/

39this.flipper.setInAnimation(AnimationUtils.loadAnimation(

40this.getContext(), R.anim.push_right_in));

41this.flipper.setOutAnimation(AnimationUtils.loadAnimation(

42this.getContext(), R.anim.push_right_out));

43flipper.showPrevious();

44}

45/** X轴滑动距离大于100,并且时间小于220ms,并且向X轴左方向滑动*/

46if ((downXValue > currentX) && (difference > 100) && (time < 220)) {

47/** 跳到下一页*/

48this.flipper.setInAnimation(AnimationUtils.loadAnimation(

49this.getContext(), R.anim.push_left_in));

50this.flipper.setOutAnimation(AnimationUtils.loadAnimation(

51this.getContext(), R.anim.push_left_out));

52flipper.showNext();

53}

54break;

55}

56}

57return consumed || isClickable();

58}

59

60private boolean moved(MotionEvent evt) {

61return hasMoved || Math.abs(evt.getX() - lastTouchX) > 10.0

62|| Math.abs(evt.getY() - lastTouchY) > 10.0;

63}

64

65 }

复制代码

ViewFlipper的布局文件: main.xml

1 <?xml version="1.0" encoding="utf-8"?>

2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

3android:layout_width="fill_parent"

4android:layout_height="fill_parent"

5 >

6<ViewFlipper android:id="@+id/ViewFlipper"

7android:layout_width="fill_parent"

8android:layout_height="fill_parent"

9 >

10</ViewFlipper>

11 </RelativeLayout>

复制代码

手势滑动的4个效果文件:

路径res/anim/

push_left_in.xml

1 <?xml version="1.0" encoding="utf-8"?>

2 <set xmlns:android="http://schemas.android.com/apk/res/android">

3<translate

4 android:fromXDelta="30"

5 android:toXDelta="-80"

6 android:fromYDelta="30"

7 android:toYDelta="300"

8 android:duration="2000"

9 />

10<alpha android:fromAlpha="0.1" android:toAlpha="1.0"

11android:duration="500" />

12 </set>

复制代码

push_left_out.xml

1 <?xml version="1.0" encoding="utf-8"?>

2 <set xmlns:android="http://schemas.android.com/apk/res/android">

3<translate android:fromXDelta="0" android:toXDelta="-100%p"

4android:duration="500" />

5<alpha android:fromAlpha="1.0" android:toAlpha="0.1"

6android:duration="500" />

7 </set>

复制代码

push_right_in.xml

View Code

1 <?xml version="1.0" encoding="utf-8"?>

2 <set xmlns:android="http://schemas.android.com/apk/res/android">

3<translate android:fromXDelta="-100%p" android:toXDelta="0"

4android:duration="500" />

5<alpha android:fromAlpha="0.1" android:toAlpha="1.0"

6android:duration="500" />

7 </set>

复制代码

push_right_out.xml

1 <?xml version="1.0" encoding="utf-8"?>

2 <set xmlns:android="http://schemas.android.com/apk/res/android">

3<translate android:fromXDelta="0" android:toXDelta="100%p"

4android:duration="500" />

5<alpha android:fromAlpha="1.0" android:toAlpha="0.1"

6android:duration="500" />

7 </set>

手势打印结果:

作者 那瞬间

赞助本站

人工智能实验室

相关热词: android开发 教程

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港