webview使用及使用自定义图片查看界面

功能描述:业务需要，使用webview加载一个页面，在页面上的图片一点击时，能进行放大缩小等操作，如果我就使用webview加载页面，加载前判断如果是图片地址，则将图片URL作为参数传到自定义界面，在android界面就可以随意搞那处图片了:

1 主界面MainActivity代码:

 

 

package com.example.webviewtest;

import java.util.ArrayList;

import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ViewFlipper;

import com.example.webviewtest.utils.CLog;
import com.example.webviewtest.utils.Constant;

public class MainActivity  extends BaseActivity {

	private String TAG = "MainActivity";
	
	/**
	 * flipper主要是为了显示加载中，加载失败的状态而加入的东西
	 */
	private ViewFlipper flipper;
	
	/**
	 * 浏览器
	 */
	private WebView webview;
	
	private String mainUrl = "http://hz-chenwenbiao-91.iteye.com/blog/2038887";
//	private String mainUrl = "http://www.baidu.com";

	
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.setContentView(R.layout.activity_main);
		initialViews();
	}

	
	@Override
	public void initialViews() {

		
		flipper = (ViewFlipper) findViewById(R.id.class_space_detail_view_flipper);
		flipper.setDisplayedChild(0);
		
		/**
		 * 加载网页内容
		 */
		webview = (WebView) findViewById(R.id.class_space_detail_webview);
		// 设置WebView属性，能够执行Javascript脚本
		webview.getSettings().setJavaScriptEnabled(true);
		
		// 加载需要显示的网页
		CLog.d(TAG , "URL =========>" + mainUrl);
		webview.loadUrl(mainUrl);
		// 设置Web视图
		webview.setWebViewClient(new MyWebViewClient());
		
	}

	@Override
	// 设置回退
	// 覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if (keyCode == KeyEvent.KEYCODE_BACK) {
			
			if(webview.canGoBack()){
				webview.goBack(); // goBack()表示返回WebView的上一页面
			}
			else {
				finish();
			}
			return true;
		}
		return false;
	}
	
	

	// Web视图
	private class MyWebViewClient extends WebViewClient {
		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			
			CLog.d(TAG , "url ==========>" + url);
			
			
			if(url.contains(".png")){//我们根据访问的URL的特征，如果是图片文件，就使用自己的界面来加载，使用类IOS查看图片效果的photoview开源主组实现的
				//跳转到图片查看界面
				Intent intent = new Intent(MainActivity.this , ViewImageActivity.class);
				Bundle bundle = new Bundle();
				ArrayList<String> imageList = new ArrayList<String>();
				imageList.add(url);
				bundle.putStringArrayList(Constant.TAG_CLASS_IMAGE_URL , imageList);
	            bundle.putInt(Constant.TAG_CLASS_IMAGE_INDEX , 0);
	            intent.putExtras(bundle);
	            startActivity(intent);
				
                return true;
			}
			
			/**
			 * 使用webview方式加载页面
			 */
			view.loadUrl(url);
			
			return true;
		}
		
		
		
		@Override
		public void onPageFinished(WebView view, String url) {
			super.onPageFinished(view, url);
			flipper.setDisplayedChild(1);//完成显示网页内容
		}
				
	
		@Override
		public void onReceivedError(WebView view, int errorCode,
				String description, String failingUrl) {
			super.onReceivedError(view, errorCode, description, failingUrl);
			flipper.setDisplayedChild(2);//显示失败重新加载界面
		}
	}
	
	
}

 

 

 

2 主界面布局activity_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="wrap_content"
    android:orientation="vertical" >
    
    
    

    
    
    <ViewFlipper
    	android:id="@+id/class_space_detail_view_flipper"
	    android:orientation="vertical"
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
		android:background="@color/gray">		
		
        
        
		<!-- (0) ProgressBar -->
		<LinearLayout
		    android:id="@+id/class_space_detail_loading_layout"
		    android:layout_width="fill_parent"
		    android:layout_height="wrap_content"
		    android:layout_gravity="center_vertical"
		    android:gravity="center"
		    android:orientation="horizontal" >

		    <ProgressBar
		        android:id="@+id/class_space_detail_pb"
		        android:layout_width="42dp"
		        android:layout_height="42dp"
		        android:layout_marginRight="8dp"
		        android:indeterminateDrawable="@drawable/loading_rotate" >
		    </ProgressBar>

		    <TextView
		        android:id="@+id/ProgressTextView"
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
		        android:text="@string/loading"
		        android:textColor="#000"
		        android:textSize="16sp" >
		    </TextView>
		</LinearLayout>
		
		
		<!-- (1) webview -->	    
        <ScrollView
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
			android:background="@color/gray"
	        android:scrollbars="vertical" >
	
	        <WebView 
			    android:id="@+id/class_space_detail_webview"
			    android:layout_width="fill_parent"
			    android:layout_height="wrap_content"
			/>
	    </ScrollView>
        
       
		 <!-- (2) Retry button -->
        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp"
            android:background="@drawable/get_data_failed" >

            <ImageView
                android:id="@+id/class_space_detail_retry_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:background="@drawable/selector_once_again" />
            
        </RelativeLayout>
		
    </ViewFlipper>
    
    
    

</RelativeLayout>

上面布局里加入了加载中，加载失败等状态的控件信息. 

 

 

 

3 自定义图片查看器界面ViewImageActivity.java:

 

/*******************************************************************************
 * Copyright 2011, 2012 Chris Banes.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *******************************************************************************/
package com.example.webviewtest;

import java.util.ArrayList;

import uk.co.senab.photoview.PhotoView;
import uk.co.senab.photoview.PhotoViewAttacher.OnPhotoTapListener;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;

import com.example.webviewtest.utils.CLog;
import com.example.webviewtest.utils.Constant;
import com.example.webviewtest.utils.UniversalImageLoaderUtil;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;


/**
 * 
 * 查看问题图片(使用开源代码)
 * 
 * @author chenwenbiao
 * @date 2013-10-29 上午11:08:15
 * @version V1.0
 */
public class ViewImageActivity extends Activity{

	private static String TAG = "ViewImageActivity";
	public Context mContext;
	
	/**
	 * 多张图片查看器
	 */
	private ViewPager mViewPager;

	/**
	 * 当前查看的是第几张图片
	 */
	private TextView mTextViewCurrentViewPosition;
	/**
	 * 图片的路径列表
	 */
	private static ArrayList<String> imagePathList = null;
	private static int currentViewPosition = 0;//当前浏览到哪一张图片
	private static PhotoView[] photoViewList = null;//记录放进viewPager的photoview,方便进行旋转
	private static int rotateRecord[] = null;//旋转角度记录
 	
	
	
	private static DisplayImageOptions options = null;
	private static ProgressBar spinner = null;
 
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.image_view);
		mContext = this;
		findViews();
		loadData();
		
		
		UniversalImageLoaderUtil.getInstance().setContext(this);//记得注册一下
	}

	private void loadData() {
		Bundle bundle = getIntent().getExtras();
		imagePathList = bundle.getStringArrayList(Constant.TAG_CLASS_IMAGE_URL);
		if(imagePathList == null){//图片路径都没有,就算了
			Toast.makeText(this, "image path list is null!", Toast.LENGTH_SHORT).show();
			finish();
			return;
		}
		
		
		options = new DisplayImageOptions.Builder()
		.showStubImage(R.drawable.uni_img_loading_shape)
		.showImageForEmptyUri(R.drawable.uni_img_loading_shape)
		.showImageOnFail(R.drawable.uni_img_loading_shape)
		.resetViewBeforeLoading(true)
		.cacheOnDisc(true)
//		.imageScaleType(ImageScaleType.EXACTLY)
		.imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2)
		.bitmapConfig(Bitmap.Config.RGB_565)
//		.displayer(new FadeInBitmapDisplayer(300))
		.build();
		
		
		
		
		currentViewPosition = bundle.getInt(Constant.TAG_CLASS_IMAGE_INDEX);
		mViewPager.setCurrentItem(currentViewPosition);//设置当前显示的pager
		
		if(imagePathList.size() == 1){//只有一张图片的浏览情况
			mTextViewCurrentViewPosition.setText("");
		}
		else {//多张图片的浏览情况
			mTextViewCurrentViewPosition.setText((currentViewPosition+1)+"/"+imagePathList.size());
		}
		
		
		CLog.d(TAG, "current view position:" + currentViewPosition);
		
		/**
		 * 初始化数组
		 */
		if(imagePathList != null && imagePathList.size() > 0){
			photoViewList = new PhotoView[imagePathList.size()];
			rotateRecord = new int[imagePathList.size()];
		}
		

		mViewPager.setAdapter(new SamplePagerAdapter());
	}
	
	public void findViews(){
		
		mViewPager = (ViewPager) findViewById(R.id.image_view_vp);//使用开源的图片浏览实现方式
		mTextViewCurrentViewPosition = (TextView) findViewById(R.id.image_which);
		
		
		//删除图片
		spinner = (ProgressBar) findViewById(R.id.loading);
		
		/**
		 * 设置这个,那么viewPager会将页面缓存起来,这里要注意,当设置过大时,可能会出现内存溢出
		 */
		mViewPager.setOffscreenPageLimit(4);
		
		/**
		 * 自己加一个页面变化的监听器，可以进页面的变化作相应的处理
		 */
		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int position) {//当前选择的是哪个图片
				// TODO Auto-generated method stub
				CLog.d(TAG, "currentViewPosition====>" + position);
				
				/**
				 * 更新当前图片浏览的位置
				 */
				currentViewPosition = position;
				
				mTextViewCurrentViewPosition.setText((currentViewPosition+1)+"/"+imagePathList.size());
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
//				Log.d(TAG, "2");
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				CLog.d(TAG, "3====>" + arg0);
			}
			
		});
		
		
	};

	
	  private class SamplePagerAdapter extends PagerAdapter {
		@Override
		public int getCount() {
			if(imagePathList == null){
				return 0;
			}
			
			return imagePathList.size();
		}

		@Override
		public View instantiateItem(ViewGroup container, int position) {
			
			PhotoView photoView = new PhotoView(container.getContext());
			
			CLog.d(TAG, "picture path:" + imagePathList.get(currentViewPosition) + "\tposition:" + position);
			
			UniversalImageLoaderUtil.getInstance().display(imagePathList.get(position), photoView, options, spinner, null);

			photoView.setOnPhotoTapListener(new OnPhotoTapListener() {
				@Override
				public void onPhotoTap(View arg0, float arg1, float arg2) {
					((Activity)mContext).finish();
				}
			});
			container.addView(photoView, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
			return photoView;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView((View) object);
		}

		@Override
		public boolean isViewFromObject(View view, Object object) {
			return view == object;
		}

	}
	

}

 

 

4 自定义图片查看器布局image_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <com.example.webviewtest.view.HackyViewPager
        android:id="@+id/image_view_vp"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center_vertical" >
    </com.example.webviewtest.view.HackyViewPager>

    <ProgressBar
        android:id="@+id/loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:visibility="gone" />

    
    <TextView
        android:id="@+id/image_which"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:paddingBottom="10dip"
        android:text="1/3" />

</RelativeLayout>

 

效果图:

1加载中:

 

2 加载完，显示网页内容，内容为我一个博文http://hz-chenwenbiao-91.iteye.com/blog/2038887:

 

 

3 点击网页图片，android界面显示图片:

 

 

附件是源码.点击下载