Android:WebView带划屏手势的浏览器兑现 _Web前端

Android:WebView带划屏手势的浏览器实现

写了简单 Android环境下基于webview的浏览器，实现划屏切换页面的手势，在一个activity里webview的缓冲内切换的。并测试下调用系统拍照的功能

MVC模式（Model-View-Controller）

1.WebView的设置部分

查看源代码
?

打印 帮助

01

private void showViews() { 

02
// TODO Auto-generated method stub 

03

mGestureDetector = new GestureDetector(this);//实例化手势对象 

04

wv_vm.getSettings().setSupportZoom(true);//启用页面的缩放 

05

wv_vm.getSettings().setBuiltInZoomControls(true);//启用页面缩放的按钮 

06

wv_vm.getSettings().set<SPAN class=wp_keywordlink_affiliate><A title=JavaScript href="http://www.mikel.cn/category/%e5%bc%80%e5%8f%91%e7%ac%94%e8%ae%b0/javascript" target=_blank>JavaScript</A></SPAN>Enabled(true);//启用<SPAN class=wp_keywordlink_affiliate><A title=JavaScript href="http://www.mikel.cn/category/%e5%bc%80%e5%8f%91%e7%ac%94%e8%ae%b0/javascript" target=_blank>JavaScript</A></SPAN>支持 

07

wv_vm.loadUrl("http://www.cnblogs.com/pxue/");//加载网址 

08

??

09

wv_vm.setOnTouchListener(this);//监听触摸事件 

10

wv_vm.setClickable(true); 

11

wv_vm.setLongClickable(true); 

12

??

13

mGestureDetector.setIsLongpressEnabled(true); 

14

??

15

wv_vm.setWebViewClient(new HelloWebViewClient());//实现点击加载页面在本webview内载入 

16

wv_vm.setFocusable(true); 

17
wv_vm.requestFocus(); 

18

??

19
}

在WebView加载新开的页面，是重写了Android.webkit.WebViewClient

查看源代码
?

打印 帮助

1

private class HelloWebViewClient extends WebViewClient { 

2
@Override

3

public boolean shouldOverrideUrlLoading(WebView view, String url) { 

4
view.loadUrl(url); 

5

return true; 

6
} 

7
}

2.划屏手势部分

监听触摸时间传给手势对象

查看源代码
?

打印 帮助

1
@Override

2

public boolean onTouch(View v, MotionEvent event) { 

3
// TODO Auto-generated method stub 

4
// Toast.makeText(this, "onTouch", Toast.LENGTH_SHORT).show(); 

5

return mGestureDetector.onTouchEvent(event); 

6
}

重写了划动事件

查看源代码
?

打印 帮助

01
@Override

02

public boolean onFling(MotionEvent e1, MotionEvent e2, float <SPAN class=wp_keywordlink_affiliate><A title=Velocity href="http://www.mikel.cn/tag/velocity/" target=_blank>Velocity</A></SPAN>X, 

03

float <SPAN class=wp_keywordlink_affiliate><A title=Velocity href="http://www.mikel.cn/tag/velocity/" target=_blank>Velocity</A></SPAN>Y) { 

04
// TODO Auto-generated method stub 

05

if (e1.getX() - e2.getX() &gt; SWIPE_MIN_DISTANCE 

06

&amp;&amp; Math.abs(<SPAN class=wp_keywordlink_affiliate><A title=Velocity href="http://www.mikel.cn/tag/velocity/" target=_blank>Velocity</A></SPAN>X) &gt; SWIPE_THRESHOLD_VELOCITY) { 

07
wv_vm.goBack(); 

08

} else if (e2.getX() - e1.getX() &gt; SWIPE_MIN_DISTANCE 

09
&amp;&amp; Math.abs(velocityX) &gt; SWIPE_THRESHOLD_VELOCITY) { 

10

??

11
wv_vm.goForward(); 

12
} 

13

return false; 

14
}

变量、常量的声明

查看源代码
?

打印 帮助

1

private GestureDetector mGestureDetector; 

2

??

3

private static final int SWIPE_MIN_DISTANCE = 120; 

4

private static final int SWIPE_THRESHOLD_VELOCITY = 200;

3.调用系统拍照功能部分

查看源代码
?

打印 帮助

01

private void setListensers() { 

02
// TODO Auto-generated method stub 

03

Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); 

04

startActivityForResult(intent, 1); 

05

??

06
} 

07

??

08

private void findViews() { 

09
// TODO Auto-generated method stub 

10
img_pic=(ImageView)findViewById(R.id.img_pic); 

11

??

12
} 

13

??

14

protected void onActivityResult(int requestCode, int resultCode, Intent data) 

15
{ 

16

if (requestCode == 1) 

17
{ 

18

if (resultCode == Activity.RESULT_OK) 

19
{ 

20
// 拍照Activity保存图像数据的key是data，返回的数据类型是Bitmap对象 

21

Bitmap cameraBitmap = (Bitmap) data.getExtras().get("data"); 

22
// 在ImageView组件中显示拍摄的照片 

23
img_pic.setImageBitmap(cameraBitmap); 

24
} 

25
} 

26

super.onActivityResult(requestCode, resultCode, data); 

27
}

小demo的源码本来上传到csdn了，可在我上传的资源就是找不到，可能在审核，等我之后不上下载链接吧

想要demo源码也可以邮件给我

邮箱： 625557711@qq.com

下载链接： http://download.csdn.net/source/3248263