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

于 2011-10-14 11:57:41 发布
阅读量128 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cody123/article/details/84047537
2011.10.14——— android 仿照微信的图片展示功能 之 基本功能

参考：[url]http://blog.youkuaiyun.com/ameyume/article/details/6089334[/url]

[size=x-large]先看一下微信的效果

显示 [/size]

[img]http://dl.iteye.com/upload/attachment/570109/19d2d85b-1302-34e1-b89f-5b24d0fa9595.jpg[/img]

[size=x-large]拖动[/size]

[img]http://dl.iteye.com/upload/attachment/570111/99bda8a7-a4e2-3a4e-acf0-09fbdbe2776a.jpg[/img]

[size=x-large]旋转[/size]

[img]http://dl.iteye.com/upload/attachment/570113/22c4ac18-439c-3b60-841d-cefce48548b9.jpg[/img]

[size=x-large]无限缩小[/size]

[img]http://dl.iteye.com/upload/attachment/570115/3cbf1090-6bde-38a2-9653-be11ad3f2d44.jpg[/img]

[size=x-large]无限放大[/size]

[img]http://dl.iteye.com/upload/attachment/570117/434c72f5-8001-3f52-bc0c-7b59f3b60af3.jpg[/img]

[size=x-large]这个就是微信里面图片的基本功能了[/size]


[size=x-large]通过[/size][url]http://topic.youkuaiyun.com/u/20100810/15/5bb5a716-5260-415d-9db4-944a44e551cd.html[/url][size=x-large]我们知道 放大 缩小 的做法有两种

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


在这里 我们先用第一种方法 Matrix试试[/size]



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++;
	}
}



[size=x-large]xml[/size]

<?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>


[size=x-large]这个xml捣鼓了半天 才弄出 不容易啊

效果如下：
[/size]
[img]http://dl.iteye.com/upload/attachment/570120/46206f8d-cd21-38d7-b3b7-e2d3a3fef084.jpg[/img]


[size=x-large]可以放大 缩小 旋转

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

1、放大超过屏幕显示不出来
2、无限放大内存溢出
3、旋转 放大 缩小的复合变化
4、拖动[/size]
cody123
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值