`

图片查看器photoview使用

 
阅读更多
使用开源控件图片浏览工具包: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就完成了，实现效果跟微信图片查看类似。
 
分享到：
| Android-Universal-Image-Loader学习笔记
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    android图片查看器photoview

    这个是本人项目上使用的一个封装好的图片查看器：photoview的jar只需要导入项目就可以使用。里面包含源码。可对图片放大缩小。

    viewpager+photoview自带圆点支持放大缩小，仿微信朋友圈图片查看器,自定义dialog

    在仿微信朋友圈图片查看器中，PhotoView是实现图片可放大缩小的关键组件。 3. **自定义Dialog**： 自定义Dialog允许开发者根据需求定制对话框的样式和功能。在这个案例中，可能包括了图片查看器的弹出动画、背景...

    photoview+viewpager 图片查看器

    "photoview+viewpager 图片查看器"是利用两个关键库——PhotoView和ViewPager，来实现这样的功能。这两个库为用户提供了一种流畅、可缩放的图片浏览体验，同时也支持手势滑动切换图片。 首先，PhotoView是一个开源...

    viewpager+photoview自带圆点支持放大缩小，仿微信朋友圈图片查看器

    综上所述，实现"viewpager+photoview自带圆点支持放大缩小，仿微信朋友圈图片查看器"涉及到的技术点包括：使用ViewPager进行图片切换，集成PhotoView实现图片的缩放和平移，自定义Dialog提供沉浸式查看体验，以及...

    PhotoView 图片的放大缩放，滑动查看多张图片

    `PhotoView`是一个开源项目，它允许开发者轻松地在Android应用中实现类似于Google Photos的图片查看功能，包括平移、缩放以及流畅的滑动浏览多张图片。 1. **PhotoView库介绍** `PhotoView`是基于`Android`的`...

    PhotoView 左右滑动查看图片，可放大、缩小、点缩略图全屏预览

    总的来说，`PhotoView`是一个强大的图片浏览组件，它使得Android应用能够提供更加丰富和自然的图片查看体验。通过灵活运用`PhotoView`，开发者可以为用户提供更加人性化的交互，提升应用的整体质量。对于任何需要...

    kotlin项目--图片查看器

    【Kotlin项目——图片查看器】是一个以Kotlin编程语言实现的应用程序，旨在提供一个用户友好的界面，用于浏览和管理个人图片集。这个项目主要关注于Kotlin在Android开发中的应用，展示了一些核心的Kotlin特性以及...

    图片的全屏查看，支持缩放，多张图片。对PhotoView的完善版

    将`myself_view`目录导入到你的Android项目中，根据项目的具体需求，配置相关依赖并替换原有的ImageView组件，然后就可以使用这个优化后的图片查看器了。记得在XML布局文件中正确引用自定义的View，并在代码中初始化...

    viewpager+photoview实现图片查看器

    在Android开发中，实现图片查看器是非常常见的需求，本文将详细介绍如何使用ViewPager和PhotoView实现图片查看器。 基础概念 1. ViewPager：ViewPager是一个滑动视图控件，能够实现滑动视图的切换，通常用于图片...

    android 网络图片查看器

    4. **图片查看界面**：设计一个图片查看器界面，通常会使用ImageView控件配合手势滑动操作。我们可以自定义ImageView或者使用开源库如PhotoView，以支持缩放和平移等手势操作。 5. **图片预加载**：为了减少用户...

    图片查看器

    在该项目中，`ViewPager`和`PhotoView`的结合使用，使得图片查看器可以流畅地显示多张图片，并且支持手势操作。当用户手指滑动时，`ViewPager`会自动切换到下一张或上一张图片；而当用户用两指捏合时，`PhotoView`则...

    windows图片查看器

    Windows图片查看器是微软操作系统内置的一款轻量级图像查看应用程序，它提供了用户...在解压名为"PhotoView"的压缩包后，我们可以找到与Windows图片查看器相关的文件，进一步了解或使用这个功能丰富的图像查看工具。

    网络图片查看器

    【网络图片查看器】是一种应用程序，它允许用户在互联网上浏览和查看图片，同时提供了诸如刷新、使用ViewPager进行平滑滑动以及图片缩放等多种增强用户体验的功能。在Android开发领域，这种类型的工具对于构建图像...

    开源项目PhotoView的使用demo

    在Android应用开发中，我们常常需要实现图片的缩放、平移等交互功能，特别是在开发图片查看器或者类似Instagram的应用时。这就是`PhotoView`开源库发挥作用的地方。`PhotoView`是Chris Banes创建的一个Android库，它...

    图片PhotoView

    《Android 图片显示控件PhotoView详解》 在Android应用开发中，图片的展示和交互是常见的需求之一，尤其在社交媒体、...在实际项目中，无论是简单的图片查看还是复杂的图片操作，PhotoView都是一个值得信赖的选择。

    photoview图片处理控件

    `PhotoView`是一个专为Android设计的图片处理控件，它提供了丰富的手势操作功能，如平移、缩放、旋转等，让用户可以像在桌面端使用图片查看器一样自由地浏览图片。这个控件使得开发者能够轻松地在应用中实现类似...

    PhotoView 手势缩放 双击缩放 图片滑动 支持viewpager

    总结来说，PhotoView库为Android应用提供了强大的图片查看功能，结合ViewPager可以构建出高度互动的图片浏览界面。通过理解和熟练运用这些知识点，开发者能够为用户打造更为出色的图片浏览体验。

    第三方框架PhotoView的使用

    在Android开发中，为了提供...这个框架不仅简化了图片查看器的开发，还提供了高度定制的可能性，为你的应用带来更丰富的用户体验。在实际开发中，你可以根据需求进一步调整和优化，例如添加动画效果、处理边界情况等。

    eclipse使用的photoview的jar包

    在Eclipse中集成Photoview库，可以极大地简化图片查看器的开发工作。 Photoview库的核心在于它提供了一个`ImageView`的子类`PhotoView`，这个子类扩展了Android原生的`ImageView`，增加了手势识别和图片变换的功能...

Magicbox
Global site tag (gtag.js) - Google Analytics