2013.11.18

everlxq
浏览: 108608 次
性别:
来自: 青岛
最近访客更多访客>>

lilybao
kalin001
haodyy
Jessie丶J
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

时间：2个星期之久
工作进度缓慢，android起步。。。


  本次项目为交行app，新闻内容页面采用url方式引用，牵涉到一系列关于webview的问题，其实一直在

copy，整合别人的经验而已。

  首先，采用url方式的可行性。一开始考虑到的是页面缓存问题，采用html（url）方式，缓存之后，新

闻内容页的图片路径问题。网页上，图片地址或相对或绝对，在缓存本地之后，路径问题如何解决。以前

没有这类问题，从这个问题上我发现我解决问题的思路不对，首先面对url方式，我不是考虑到可行性的问

题上，而是直接上手，在全局的考虑上没有大局观念。面对一个需求重要的是轮廓，继而添枝加叶。
  对于这个考虑，我是按照我错误的思路实践下逼出来的方法，webview与javascript的交互的知识点下手

，给webview添加js监听事件，返回html字符串，替换img的路径，然后根据自己的路径保存图片，解决问

题。
  启用javascript
  contentWebView.getSettings().setJavaScriptEnabled(true);
  设置js监听事件
  contentWebView.addJavascriptInterface(new InJavaScriptLocalObj(), "local_obj");
  重写MyWebViewClient方法
@Override  
        public void onPageFinished(WebView view, String url) {  
  
            view.getSettings().setJavaScriptEnabled(true);  
  
            super.onPageFinished(view, url);  
            // html加载完成之后，添加监听图片的点击js函数  
            addImageClickListner(); 
            
            view.loadUrl("javascript:(function(){" +  
                    "var objs = document.getElementsByTagName(\"img\"); " +   
                            "var arr=new Array(); " +
                            "if(objs.length>0){" +
                            "for(var i=0;i<objs.length;i++)  " +   
                    "    {" +
                    " arr[i]=objs[i].src;" 
            +        "    }  " +   
                    "var str=arr.join(\",\");" +
                    "function Image(){window.cache_image.cacheimage(str);}" +
                    " Image();}" +
                    "})()");
            
            view.loadUrl("javascript:window.local_obj.showSource('<head>'+" +
                    "document.getElementsByTagName('html')[0].innerHTML+'</head>');");
            
        }  
  
        @Override  
        public void onPageStarted(WebView view, String url, Bitmap favicon) {  
            view.getSettings().setJavaScriptEnabled(true);  
  
            super.onPageStarted(view, url, favicon); 
        }  
  
        @Override  
        public void onReceivedError(WebView view, int errorCode, String description, String 

failingUrl) {  
  
            super.onReceivedError(view, errorCode, description, failingUrl);  
  
        }  
    }
  
通过imageview.addUrl()方法添加方法格式如上
js：
contentWebView.loadUrl("javascript:(function(){" +  
        "var objs = document.getElementsByTagName(\"img\"); " +   
                "for(var i=0;i<objs.length;i++)  " +   
        "{"  
                + "    objs[i].onclick=function()  " +   
        "    {  "   
                + "        window.imagelistner.openImage(this.src);  " +   
        "    }  " +   
        "}" +   
        "})()");  
js可以在html上实验后再拿过来。


  图片的缩放、旋转

  思路：
  把图片传到一个新的activity中，此activity背景半透明。实现OnTouchListener接口
  imgview.setOnTouchListener(this);
  imgview.setLongClickable(true);

  View 里面有个setLongClickable(boolean longClickable)的方法，意思是说是否要启用长按功能。
true 是让设备支持长按，false是不支持。设为true的时候MotionEvent.ACTION_UP就能监听到了！

  重写onTouch方法
  此方法有2个参数View v, MotionEvent event
  v是操作对象，event是动作事件
  switch (event.getActionMasked()) {//判断动作
  case MotionEvent.ACTION_DOWN:// 一个点按下去了
			matrix.set(imgview.getImageMatrix());
			savedMatrix.set(matrix);
			start.set(event.getX(), event.getY());//此时接触的点记录为（PointF）

start开始点		                        Log.d("Infor", "触摸了...");
			mode = DRAG;
			break;
		case MotionEvent.ACTION_POINTER_DOWN: // 多点触控  
			oldDist = this.spacing(event);//计算2点间的距离，若距离大于10f，则判

定为多点
			if (oldDist > 10f) {
				Log.d("Infor", "oldDist" + oldDist);
				savedMatrix.set(matrix);
				midPoint(mid, event);//计算两点间的距离的中点
				old.set(event.getX(1), event.getY(1));//此时两点间第二个点记

录为old点，用于图片旋转
				mode = ZOOM;
			}
			break;
		case MotionEvent.ACTION_POINTER_UP://第二个点拿起
			mode = NONE;
			break;
		case MotionEvent.ACTION_MOVE:
			
			if (mode == DRAG) { // 此实现图片的拖动功能...
				matrix.set(savedMatrix);
				matrix.postTranslate(event.getX() - start.x, event.getY()
						- start.y);//postTranslate拖动方法
			} else if (mode == ZOOM) {// 此实现图片的缩放功能...
				now.set(event.getX(1), event.getY(1));缩放过程中第二个点旋转

，这个店一直变化，记录为now点用于旋转
				float newDist = spacing(event);//计算两点间距离
				if (newDist > 10) {
					float angle=degree(mid,event);
					matrix.set(savedMatrix);
					float scale = newDist / oldDist;
					matrix.postScale(scale, scale, mid.x, mid.y);
					matrix.postRotate(angle, mid.x, mid.y);
				}
			}
			break;
		}
  imgview.setImageMatrix(matrix);


  再者是最终要的缓冲问题，
  思路：保存所有数据到本地文件夹，从中读取。——————————》内存缓冲去了解！！！！
  页面html再修改img路径后写入本地创建好的文件中，以图片名字为名，创建的html文件。
  页面图片的点击事件的获取
  private void addImageClickListner() {  
        // 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，函数的功能是在图片点击

的时候调用本地java接口并传递url过去  
        contentWebView.loadUrl("javascript:(function(){" +  
        "var objs = document.getElementsByTagName(\"img\"); " +   
                "for(var i=0;i<objs.length;i++)  " +   
        "{"  
                + "    objs[i].onclick=function()  " +   
        "    {  "   
                + "        window.imagelistner.openImage(this.src);  " +   
        "    }  " +   
        "}" +   
        "})()");  
    }  

MyWebViewClient中
addImageClickListner(); 


contentWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner"); 

  
第一次加载url时缓存所有的图片
同样是添加js时间
重点是js语句的学习


android 文件写入

 File myCaptureFile = new File(ALBUM_PATH+nid+".html"); 
            try {
				BufferedOutputStream bos = new BufferedOutputStream(new 

FileOutputStream(myCaptureFile));  
        //将要写入的字符串转换为byte数组
        byte[] bytes = s1.getBytes();
        bos.write(bytes);//将byte数组写入文件
        bos.close();//关闭文件输出流
			} catch (FileNotFoundException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}


new Handler().postDelayed(new Runnable() {

			public void run() {
				Intent intent = new Intent();
				intent.setClass(MainActivity.this, MainLoginActivity.class);
				startActivity(intent);
				MainActivity.this.finish();
			}
		}, 3000);
分享到：