2011.10.14——— android 仿照微信的图片展示功能 之 基本功能

2011.10.14——— android 仿照微信的图片展示功能 之 基本功能

参考：http://blog.csdn.net/ameyume/article/details/6089334

先看一下微信的效果

显示



拖动



旋转



无限缩小



无限放大



这个就是微信里面图片的基本功能了



通过http://topic.csdn.net/u/20100810/15/5bb5a716-5260-415d-9db4-944a44e551cd.html我们知道 放大 缩小 的做法有两种

1、Matrix
2、动态的更改ImageView的宽和高


在这里 我们先用第一种方法 Matrix试试

package com.lp.image;


import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ImageView.ScaleType;

public class MainActivity extends Activity implements OnTouchListener{
	private static final String TAG = "lp";
	
	
	/* 相关变量声明 */
	private ImageView mImageView;
	private Button zoomin;
	private Button zoomout;
	private Button rotate;
	private LinearLayout layoutImage;
	private LinearLayout zoomControll;
	//是否显示
	private boolean isVisible = true;
	private Bitmap bmp;
	private int id=0;
	private int displayWidth;
	private int displayHeight;
	private float scaleWidth=1;
	private float scaleHeight=1;
	private int rotateCount = 1;
	private float degrees=90;
	//上一个ImageView
	private ImageView lastImageView;
	
	private LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);
	
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState)    {
		super.onCreate(savedInstanceState);
		/* 加载display.xml Layout */
		setContentView(R.layout.main2);
		
		/* 取得屏幕分辨率大小 */
		DisplayMetrics dm=new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		displayWidth=dm.widthPixels;
		displayHeight=dm.heightPixels; 
		
		/* 初始化相关变量 */
//		Bundle bundle = this.getIntent().getExtras();
//		Integer imageId = bundle.getInt("imageId");
//		Log.i(TAG, "onCreate, imageId = " + imageId);
              	     
		bmp=BitmapFactory.decodeResource(getResources(), R.drawable.img); 
		mImageView = (ImageView)findViewById(R.id.myImageView);
		mImageView.setImageBitmap(bmp);
		mImageView.setOnTouchListener(this);
		
		layoutImage = (LinearLayout)findViewById(R.id.layoutImage);
		zoomin = (Button)findViewById(R.id.zoomin);
		zoomout = (Button)findViewById(R.id.zoomout); 
		rotate = (Button)findViewById(R.id.rotate);
		
		/* 缩小按钮onClickListener */
		zoomin.setOnClickListener(new Button.OnClickListener() {
			@Override
			public void onClick(View v) {
				small(); 
			}
		});
		
		/* 放大按钮onClickListener */
		zoomout.setOnClickListener(new Button.OnClickListener() {
			@Override       
			public void onClick(View v) {
				big();
			} 
		});
		
		rotate.setOnClickListener(new Button.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				rotate();
			}
			
		});
		
		
		zoomControll = (LinearLayout)findViewById(R.id.zoomcontroll);
		
	}  
	

	@Override
	public boolean onTouch(View v, MotionEvent event) {
		// TODO Auto-generated method stub
		Log.i(TAG, "onTouch...");
		if(isVisible){
			zoomControll.setVisibility(View.INVISIBLE);
			isVisible = false;
		}else{
			zoomControll.setVisibility(View.VISIBLE);
			isVisible = true;
		}
		return  super.onTouchEvent(event);    
	}

	
	/* 图片缩小的method */
	private void small()    {
		int bmpWidth=bmp.getWidth(); 
		int bmpHeight=bmp.getHeight();
		
		Log.i(TAG, "bmpWidth = " + bmpWidth + ", bmpHeight = " + bmpHeight);
		
		/* 设置图片缩小的比例 */
		double scale=0.8;
		/* 计算出这次要缩小的比例 */ 
		scaleWidth=(float) (scaleWidth*scale); 
		scaleHeight=(float) (scaleHeight*scale); 
		/* 产生reSize后的Bitmap对象 */
		Matrix matrix = new Matrix();
		matrix.postScale(scaleWidth, scaleHeight);
		Bitmap resizeBmp = Bitmap.createBitmap(bmp,0,0,bmpWidth, 
				bmpHeight,matrix,true); 
		
		if(id==0)      {
			/* 如果是第一次按，就删除原来默认的ImageView */
			layoutImage.removeView(mImageView);
		} else {
			/* 如果不是第一次按，就删除上次放大缩小所产生的ImageView */
			layoutImage.removeView((ImageView)findViewById(id));
		} 
		
		/* 产生新的ImageView，放入reSize的Bitmap对象，再放入Layout中 */
		id++;
		ImageView imageView = new ImageView(this);
		imageView.setId(id);
		imageView.setImageBitmap(resizeBmp);
		imageView.setOnTouchListener(this);
		
		layoutImage.addView(imageView,params);
		Log.i(TAG, "imageView.getWidth() = " + imageView.getWidth()
				+ ", imageView.getHeight() = " + imageView.getHeight());
		/* 因为图片放到最大时放大按钮会disable，所以在缩小时把它重设为enable */ 
		zoomout.setEnabled(true);
	}
	
	/* 图片放大的method */
	private void big() {
		int bmpWidth=bmp.getWidth();
		int bmpHeight=bmp.getHeight();
		
		Log.i(TAG, "bmpWidth = " + bmpWidth + ", bmpHeight = " + bmpHeight);
		
		/* 设置图片放大的比例 */
		double scale=1.25;
		/* 计算这次要放大的比例 */
		scaleWidth=(float)(scaleWidth*scale);
		scaleHeight=(float)(scaleHeight*scale);
		/* 产生reSize后的Bitmap对象 */
		Matrix matrix = new Matrix();
		matrix.postScale(scaleWidth, scaleHeight);
		Bitmap resizeBmp = Bitmap.createBitmap(bmp,0,0,bmpWidth, 
				bmpHeight,matrix,true);
		
		if(id==0) {
			/* 如果是第一次按，就删除原来设置的ImageView */
			layoutImage.removeView(mImageView);
		} else {
			/* 如果不是第一次按，就删除上次放大缩小所产生的ImageView */ 
			layoutImage.removeView((ImageView)findViewById(id));
		}
		
		/* 产生新的ImageView，放入reSize的Bitmap对象，再放入Layout中 */
		id++;
		ImageView imageView = new ImageView(this);
		imageView.setId(id);
		imageView.setImageBitmap(resizeBmp);
		imageView.setOnTouchListener(this);
		layoutImage.addView(imageView,params);
		/* 如果再放大会超过屏幕大小，就把Button disable */
//		if( scaleWidth * scale * bmpWidth > bmpWidth * 3 ||
//			scaleHeight * scale * bmpHeight > bmpWidth * 3 ||
//			scaleWidth * scale * bmpWidth > displayWidth * 5 ||
//			scaleHeight * scale * bmpHeight > displayHeight * 5) {
//				zoomout.setEnabled(false);
//			} else {
//				zoomout.setEnabled(true);
//			}
	} 
	private void rotate() {
		int bmpWidth=bmp.getWidth(); 
		int bmpHeight=bmp.getHeight();
		
		Log.i(TAG, "bmpWidth = " + bmpWidth + ", bmpHeight = " + bmpHeight);
		
		/* 设置图片缩小的比例 */
		/* 产生reSize后的Bitmap对象 */
		if(rotateCount>4){
			rotateCount = 1;
		}
		float rotateDegrees = degrees * rotateCount;
		
		Matrix matrix = new Matrix();
		matrix.postRotate(rotateDegrees);
		Bitmap resizeBmp = Bitmap.createBitmap(bmp,0,0,bmpWidth, 
				bmpHeight,matrix,true); 
		
		if(id==0)      {
			/* 如果是第一次按，就删除原来默认的ImageView */
			layoutImage.removeView(mImageView);
		} else {
			/* 如果不是第一次按，就删除上次放大缩小所产生的ImageView */
			layoutImage.removeView((ImageView)findViewById(id));
		} 
		
		/* 产生新的ImageView，放入reSize的Bitmap对象，再放入Layout中 */
		id++;
		ImageView imageView = new ImageView(this);
		imageView.setId(id);
		imageView.setImageBitmap(resizeBmp);
		imageView.setOnTouchListener(this);
		
		layoutImage.addView(imageView,params);
		Log.i(TAG, "imageView.getWidth() = " + imageView.getWidth()
				+ ", imageView.getHeight() = " + imageView.getHeight());
		
		rotateCount++;
	}
}

xml

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

<FrameLayout 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:layout_gravity="center"
    >

	    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
		    android:orientation="vertical"
		    android:layout_width="fill_parent"
		    android:layout_height="fill_parent"
		    android:id="@+id/layoutImage"
		    android:gravity="center"
		    >
		    <ImageView
		    	android:id="@+id/myImageView"
		    	android:layout_width="fill_parent"
		    	android:layout_height="fill_parent"
				/>
		</LinearLayout>
		<LinearLayout
			android:orientation="horizontal"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:gravity="bottom|right"
			android:layout_gravity="bottom"
			android:padding="10dip"
			android:id="@+id/zoomcontroll"
			>
			
			<Button 
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:background="@drawable/my_rotate_btn"
				android:id="@+id/rotate"
				/>
			<View
				android:layout_width="0dip"
				android:layout_height="wrap_content"
				android:layout_weight="1"
				/>
			<Button 
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:background="@drawable/my_zoomin_btn"
				android:id="@+id/zoomin"
				/>
			<View
				android:layout_width="2dip"
				android:layout_height="wrap_content"
				/>	
			<Button 
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:background="@drawable/my_zoomout_btn"
				android:id="@+id/zoomout"
				/>
				
		</LinearLayout>
</FrameLayout>

</LinearLayout>

这个xml捣鼓了半天 才弄出 不容易啊

效果如下：




可以放大 缩小 旋转

当然 这里面还有以下几个问题 没有解决：

1、放大超过屏幕显示不出来
2、无限放大内存溢出
3、旋转 放大 缩小的复合变化
4、拖动

评论

1 楼 mmm333zzz 2012-02-28  

可以发一份源码给我吗？  谢谢：  [e-mail]