使用开源控件图片浏览工具包:photoview_library1.2.2.jar
(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就完成了,实现效果跟微信图片查看类似。