图片查看器photoview使用

使用开源控件图片浏览工具包:photoview_library1.2.2.jar

来源于: http://a.code4app.com/android/PhotoView/5241a4026803fa1327000000

gihub地址: https://github.com/chrisbanes/PhotoView

 

(1)图片查看器activity:

/*******************************************************************************
 * 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.yiduoyun.tiku.activity;

import java.util.ArrayList;

import uk.co.senab.photoview.PhotoView;
import uk.co.senab.photoview.PhotoViewAttacher.OnViewTapListener;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
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.util.Base64;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;

import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.yiduoyun.tiku.R;
import com.yiduoyun.tiku.common.Constant;
import com.yiduoyun.tiku.util.CLog;
import com.yiduoyun.tiku.util.UniversalImageLoaderUtil;


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

	private static String TAG = ViewImageActivity.class.getName();
	public Context mContext;
	
	/**
	 * 多张图片查看器
	 */
	private ViewPager mViewPager;

	/**
	 * 当前查看的是第几张图片
	 */
	private TextView mTextViewCurrentViewPosition;
	/**
	 * 图片的路径列表
	 */
	private static ArrayList<String> imagePathList = null;
	private static int currentViewPosition = 0;//当前浏览到哪一张图片
 	
	
	
	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;
		loadData();
		findViews();
	}

	private void loadData() {
		Bundle bundle = getIntent().getExtras();
		imagePathList = bundle.getStringArrayList(Constant.TAG_VIEW_IMAGE_LIST);
		if(imagePathList == null){//图片路径都没有,就算了
			Toast.makeText(this, "image path list is null!", Toast.LENGTH_SHORT).show();
			finish();
		}
		
		
		currentViewPosition = bundle.getInt(Constant.TAG_VIEW_IMAGE_INDEX);

		CLog.d(TAG, "current view position:" + currentViewPosition);
	}
	
	public void findViews(){
		
		mViewPager = (ViewPager) findViewById(R.id.image_view_vp);//使用开源的图片浏览实现方式
		mTextViewCurrentViewPosition = (TextView) findViewById(R.id.image_which);
		mViewPager.setAdapter(new SamplePagerAdapter());
		

		spinner = (ProgressBar) findViewById(R.id.loading);
		
		/**
		 * 这里只有多张图片才出现第几张的提示，和图片滑动切换
		 */
		if(imagePathList.size() > 1){
			
			/**
			 * 设置这个,那么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);
				}
				
			});
			
			
			mViewPager.setCurrentItem(currentViewPosition);//设置当前显示的pager
			mTextViewCurrentViewPosition.setText((currentViewPosition+1)+"/"+imagePathList.size());
			
		}
		
	};

	
	
	  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) {
			
//			if(imagePathList == null){
//				CLog.e(TAG, "iamge path list is null!");
//				return null;
//			}
			
			PhotoView photoView = new PhotoView(container.getContext());
			
			CLog.d(TAG, "currentViewPosition=======>" + currentViewPosition);
			CLog.d(TAG, "picture path=======>" + imagePathList.get(currentViewPosition));
			
			
			/**
			 * 这里的图片分两类:
			 * 一个是直接的图片地址
			 * 一个是base64格式的图片如：
				data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFYAAAB0CAIAAACQUFKdAAAD3ElEQVR4nO3Zv0tyCxgH8PcfaWhoUF6qpQgacqwl7CSnKOlaCELRb/RGkYFWUJRLWmRCxA2SrCUa0oZqCBcNEfoBWraoUTTk4A+ovu8QN+4t6w73eArf73c6PPI8PueDnoPHH/jt8+OrF/j6kIAEJEDhCNLp9O7u7l9SZGtr6+bmpkB7onAEx8fHP3/+/FOK1NXV2Wy2Au2JwhHs7e319PRIMmp1ddVisUgyKm8KReDz+fR6vSSj7Hb71NSUJKPyhgQkIAFIABKABCABSAASgAQgAUgAEoAEIAFIABKABCABSAASgAQgAUgAEoAEIAFIABKABCABSAASgAQgAUgAEoAEIAFIABKABCABSAASgAQgAUgAEoAEIAFIABKABCABSIDCERweHhoMBklGLS8vz8zMSDIqb94SJJPJUymytLTU0NAgySij0WgwGCQZFYvFHh8fPyO4v7+vra1tkSIajUatVksyShAEQRAkGVVeXn50dPQZQSwWa2pqkujz9R0zNDS0sbHxpvgvguvr6+bmZhlXkjuDg4Obm5tviiQgAQlAApAAJAAJQAKQACQACUACkAAkAAnw/pGJRqORcSW5YzKZ/uORyd3dXUVFxR/FG6VS6fV6PyN4fn6+uLg4Lt6EQqFsNvsZwe8ZEpCABCABSAASgAQgAUgAEuAbEsTjcZnf8QsIXC7XxMSE2Wy2WCyzs7NWq9VqtVosFrPZ3NnZqVAoAoGAnPvITZBOpysrK+12u9PpHB8fLysrs1qt09PTL5WRkZHq6urz8/O8vblcrhAryU3w8PAgCMLLsdvtLikp6e3t7ejoGB4eBnB6etrV1fW+KxwOOxyO7u7uQqwkN0EqlWpsbASws7Oj1+sHBgb8fv/CwsLKygoAv9+v1Wrfd7ndbo1G82onbb6AQKvVejye0dFRAPF4XKvVOhyOl1fD4XBeAgDRaLS9vb0QK33BF0EUxUwmA8Dn883NzW1vb9tsNrfbvb+/b7PZPjrPYDBYJATZbLampmZsbMxsNvf395tMJqvVGo1G+/r6SktLq6qq8l4LUEwE6XRapVK5XK61tTUAoVDI6XTOz88DuLy8PDg40Ol0eRuLh+Cfd4REItHa2rq4uOjxeF4qgUDgo/M8OTkpEoJUKqVWq5+enl4r6+vrSqXy5TgYDH50OQyHw21tbYVYSW6CXC6nUCgEQRBFURTFlpYWnU73WlGpVHnvfC6Xq76+XqFQiKJ4dXUl7UpyE2QyGaPReHZ2Fvk70Wg0mUxGo9FIJOL1eicnJ9933d7exmKxRCIRiUTe/xHwP/PtfibJHxKQgAQAfgEhmFtu4GQ2NAAAAABJRU5ErkJggg==
			 */
			String url = imagePathList.get(position).trim();
			int index = url.indexOf("base64,");
			if(-1 != index){
				String base64Data = url.substring(index + 7);
				byte[] bytes = Base64.decode(base64Data, Base64.DEFAULT);  
			    Bitmap bitmap = BitmapFactory.decodeByteArray(bytes, 0, bytes.length);
			    photoView.setImageBitmap(bitmap);
			}
			else {
				UniversalImageLoaderUtil.getInstance().display(url , photoView, options, spinner , false);
			}

			/*//监听图片区域动作
			photoView.setOnPhotoTapListener(new OnPhotoTapListener() {
				@Override
				public void onPhotoTap(View arg0, float arg1, float arg2) {
					((Activity)mContext).finish();
				}
			});*/
			
			
			//监听整个显示区域动作
			photoView.setOnViewTapListener(new OnViewTapListener() {
				
				@Override
				public void onViewTap(View arg0, float arg1, float arg2) {
					((Activity)mContext).finish();
				}
			});

			/**
			 * 这个是让小图保持原形，不充满全屏的关键
			 */
		    photoView.setScaleType(ImageView.ScaleType.CENTER);
			container.addView(photoView, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
//			container.addView(photoView);
			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;
		}

	}

}

 

这里值得注意是当图片很小时，为了图片不被拉大，需要如下设置一下:

/**
			 * 这个是让小图保持原形，不充满全屏的关键
			 */
		    photoView.setScaleType(ImageView.ScaleType.CENTER);

 

 

设置点击操作区域是整个activity:

//监听整个显示区域动作
			photoView.setOnViewTapListener(new OnViewTapListener() {
				
				@Override
				public void onViewTap(View arg0, float arg1, float arg2) {
					((Activity)mContext).finish();
				}
			});

 

若点击操作希望只是图片区域，则可以如下设置:

//监听图片区域动作
			photoView.setOnPhotoTapListener(new OnPhotoTapListener() {
				@Override
				public void onPhotoTap(View arg0, float arg1, float arg2) {
					((Activity)mContext).finish();
				}
			});

 

（2）布局文件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="fill_parent"
    android:orientation="vertical"
    android:background="@color/white" >

    <com.yiduoyun.tiku.view.HackyViewPager
        android:id="@+id/image_view_vp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
		android:layout_centerInParent="true" >
    </com.yiduoyun.tiku.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" />

</RelativeLayout>

 

调用该activity来查看图片:

Intent intent = new Intent(getActivity(), ViewImageActivity.class);
//			Intent intent = new Intent(getActivity(), SimpleSampleActivity.class);
			
			Bundle bundle = new Bundle();
			ArrayList<String> imageList = new ArrayList<String>();
			imageList.add(imgSrc);
			bundle.putStringArrayList(Constant.TAG_VIEW_IMAGE_LIST, imageList);
			bundle.putInt(Constant.TAG_VIEW_IMAGE_INDEX, 0);
			intent.putExtras(bundle);
			startActivity(intent);

 

 

根据photoview例子改造后的photoview就完成了，实现效果跟微信图片查看类似。