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

最新推荐文章于 2022-05-03 21:06:29 发布

最新推荐文章于 2022-05-03 21:06:29 发布 · 137 阅读

文章标签：

#移动开发 #javascript #测试 #ViewUI

本文介绍了一个简单的Android应用，该应用使用WebView实现了网页浏览功能，并通过手势操作实现页面的前进和后退。此外，还介绍了如何集成系统级的拍照功能。

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

MVC模式（Model-View-Controller）

1.WebView的设置部分

 
private void showViews() {  
 
     02// TODO Auto-generated method stub 
 
mGestureDetector = new GestureDetector(this);//实例化手势对象  
 
wv_vm.getSettings().setSupportZoom(true);//启用页面的缩放  
 
wv_vm.getSettings().setBuiltInZoomControls(true);//启用页面缩放的按钮  
 
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>支持  
 
wv_vm.loadUrl("http://www.cnblogs.com/pxue/");//加载网址  
 
  
 
wv_vm.setOnTouchListener(this);//监听触摸事件  
 
wv_vm.setClickable(true);  
 
wv_vm.setLongClickable(true);  
 
  
 
mGestureDetector.setIsLongpressEnabled(true);  
 
  
 
wv_vm.setWebViewClient(new HelloWebViewClient());//实现点击加载页面在本webview内载入  
 
wv_vm.setFocusable(true);  
 
     17wv_vm.requestFocus(); 
 
  
 
     19}

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

 
     1 private class HelloWebViewClient extends WebViewClient {  
 
     2@Override
 
     3 public boolean shouldOverrideUrlLoading(WebView view, String url) {  
 
     4view.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) {  
 
     07wv_vm.goBack(); 
 
     08 } else if (e2.getX() - e1.getX() &gt; SWIPE_MIN_DISTANCE  
 
     09&amp;&amp; Math.abs(velocityX) &gt; SWIPE_THRESHOLD_VELOCITY) { 
 
     10   
 
     11wv_vm.goForward(); 
 
     12} 
 
     13 return false;  
 
     14}

变量、常量的声明

 
private GestureDetector mGestureDetector;  
 
  
 
private static final int SWIPE_MIN_DISTANCE = 120;  
 
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 
 
     10img_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组件中显示拍摄的照片 
 
     23img_pic.setImageBitmap(cameraBitmap); 
 
     24} 
 
     25} 
 
     26 super.onActivityResult(requestCode, resultCode, data);  
 
     27}