2011.09.27（2）——— android ImageView上下同时拉伸的效果

lipeng88213

浏览: 957091 次
性别:
来自: 北京

最近访客更多访客>>

jklwan

小小书僮

诗人lpp

oyhptiandi01

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (526)

社区版块

存档分类

android

2011.09.27（2）——— android ImageView上下同时拉伸的效果

在http://lipeng88213.iteye.com/blog/1180817里面我们把一张图的正中间显示在了ImageView里面现在需要做的就是我点击图片显示完整的图像，因为我们的图片是正中间显示在ImageView里面的所以应该需要一个上下同时拉伸图片的动画

最开始没有动画的代码如下：

package com.lp;

import java.util.Enumeration;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Environment;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.LinearLayout.LayoutParams;

public class MainActivity extends Activity {
	private TextView tv;
	private ImageView iv;
	private boolean isClick = false;
	private int height ;
	private int width ;
	private Bitmap b2;
    @SuppressWarnings("static-access")
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        iv = (ImageView)findViewById(R.id.iv);
        Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.aa);
        System.out.println(b.getHeight()+"  "+b.getWidth());
        b2 = b.createScaledBitmap(b, 600, Math.round(600*(b.getHeight()*1.0f/b.getWidth())), true);
        if(b!=null){
        	b.recycle();
        }
        System.out.println(b2.getHeight()+"  "+b2.getWidth());
        iv.setImageBitmap(b2);
        iv.setScaleType(ImageView.ScaleType.CENTER);
        iv.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				if(!isClick){
					LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
					height = iv.getHeight();
					width = iv.getWidth();
					iv.setLayoutParams(params);
					iv.setImageBitmap(b2);
					
				}else{
					LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
					System.out.println(height + "   "+width);
					params.height = height;
					params.width = width;
					iv.setLayoutParams(params);
					iv.setImageBitmap(b2);
					
				}
			}
		});
        
        
    }
		
		
		
    }

    
}

这个没有动画效果显得特别突兀所以需要一个动画来过渡一下

1、当然首先我想到的是Animation 如果android自带的动画效果能满足的话那就方便了

写了一个imageview.vml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0" 
        android:toXScale="1.0" 
        android:fromYScale="1.0"
        android:toYScale="0.3" 
        android:pivotX="50%" 
        android:pivotY="50%"
        android:fillAfter="true" 
        android:duration="1400" />
</set>

调用：

Animation a = AnimationUtils.loadAnimation(MainActivity.this, R.anim.imageviw);
iv.setLayoutParams(params);

动画是出来了但是和我预想的差距太大了

它只是把现有的图片进行缩放，并不会把原来图片没有显示出来的部分显示出来

而我想要的是把整个图像都显示完全并不是针对部分图片进行缩放

2、我想我们显示imageView显示的是图片的中间部分那我们可不可以动态的更新ImageView的宽高并且我们的ImageView的scaleType为CENTER 所以就会显示出来上下同时拉伸的效果

基于这样想法我开始实践：

2.1、首先我先试试这个方法可行不可行

package com.lp;

import java.util.Enumeration;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Environment;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.LinearLayout.LayoutParams;

public class MainActivity extends Activity {
	private TextView tv;
	private ImageView iv;
	private boolean isClick = false;
	private int height ;
	private int width ;
	private Bitmap b2;
	private int i = 50;
    @SuppressWarnings("static-access")
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        iv = (ImageView)findViewById(R.id.iv);
        Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.aa);
        System.out.println(b.getHeight()+"  "+b.getWidth());
        b2 = b.createScaledBitmap(b, 600, Math.round(600*(b.getHeight()*1.0f/b.getWidth())), true);
        if(b!=null){
        	b.recycle();
        }
        System.out.println(b2.getHeight()+"  "+b2.getWidth());
        iv.setImageBitmap(b2);
        iv.setScaleType(ImageView.ScaleType.CENTER);
        
        
        tv = (TextView)findViewById(R.id.tv);
        tv.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				ImageAnimation();
			}
		});
    }
    
    
    private void ImageAnimation(){
    	LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
    	System.out.println(i);
		params.width = 600;
		params.height = i;
		iv.setLayoutParams(params);
		iv.setImageBitmap(b2);
        iv.setScaleType(ImageView.ScaleType.CENTER);
        i = i+10;
    }
    

    
}

就是通过不断的点击TextView实现ImageView的宽高动态更新来拉伸图片

这个测试成功了下面就是把不但点击点击TextView的操作封装一下：

2.2、线程

我开始用线程来实现：

package com.lp;

import java.util.Enumeration;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Environment;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.LinearLayout.LayoutParams;

public class MainActivity extends Activity {
	private TextView tv;
	private ImageView iv;
	private boolean isClick = false;
	private int height ;
	private int width ;
	private Bitmap b2;
	private int i = 50;
	private LayoutParams params2222 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
    //handler
	private Handler handler = new Handler(){

		@Override
		public void handleMessage(Message msg) {
			if(msg.what==1){
				iv.setLayoutParams(params2222);
				iv.setImageBitmap(b2);
		        iv.setScaleType(ImageView.ScaleType.CENTER);
			}
		}
		
	};
    @SuppressWarnings("static-access")
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        iv = (ImageView)findViewById(R.id.iv);
        Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.aa);
        System.out.println(b.getHeight()+"  "+b.getWidth());
        b2 = b.createScaledBitmap(b, 600, Math.round(600*(b.getHeight()*1.0f/b.getWidth())), true);
        if(b!=null){
        	b.recycle();
        }
        System.out.println(b2.getHeight()+"  "+b2.getWidth());
//        Bitmap bitmap = Bitmap.createBitmap(b, 100, 20, 200, 300);
        System.out.println(Environment.getExternalStorageDirectory());
        iv.setImageBitmap(b2);
        iv.setScaleType(ImageView.ScaleType.CENTER);
        iv.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				if(!isClick){
					height = iv.getHeight();
					width = iv.getWidth();
					
					new ImageThread().start();
					
				}else{
//					
					
				}
			}
		});
    }
   
    
    private class ImageThread extends Thread{

		@Override
		public void run() {
			while(i<400){
		    	System.out.println(i);
		    	params2222.width = 600;
		    	params2222.height = i;
		    	handler.sendEmptyMessage(1);
		    	i = i+10;
			}
		}
    	
    }
    

    
}

但是没有成功根本看不见动画效果什么原因啊？
我想会不会是运行太快了所以修改一下Thread

private class ImageThread extends Thread{

		@Override
		public void run() {
			while(i<400){
		    	System.out.println(i);
		    	params2222.width = 600;
		    	params2222.height = i;
		    	handler.sendEmptyMessage(1);
		    	i = i+10;
		    	try {
					Thread.sleep(50);
				} catch (InterruptedException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
		}
    	
    }

哈哈果然可以了不错啊

但是效果不理想有一顿一顿的感觉

2.3、AsyncTask

我想那就用Android系统建议使用的AsyncTask吧

package com.lp;

import java.util.Enumeration;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Environment;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.LinearLayout.LayoutParams;

public class MainActivity extends Activity {
	private TextView tv;
	private ImageView iv;
	private boolean isClick = false;
	private int height ;
	private int width ;
	private Bitmap b2;
	private int i = 50;
	private LayoutParams params2222 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
	
	};
    @SuppressWarnings("static-access")
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        iv = (ImageView)findViewById(R.id.iv);
        Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.aa);
        System.out.println(b.getHeight()+"  "+b.getWidth());
        b2 = b.createScaledBitmap(b, 600, Math.round(600*(b.getHeight()*1.0f/b.getWidth())), true);
        if(b!=null){
        	b.recycle();
        }
        System.out.println(b2.getHeight()+"  "+b2.getWidth());;
        iv.setImageBitmap(b2);
        iv.setScaleType(ImageView.ScaleType.CENTER);
        iv.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				if(!isClick){
					height = iv.getHeight();
					width = iv.getWidth();
					
					new ImageAsync().execute();
					
				}else{					
					new ImageAsync().execute();
					
				}
			}
		});
        
    }
    
    
    private class ImageAsync extends AsyncTask<Void, Integer, Void>{

		@Override
		protected Void doInBackground(Void... params) {
			if(!isClick){
				while(i<400){
			    	System.out.println(i);
			    	params2222.width = 600;
			    	params2222.height = i;
			    	publishProgress(i);
			    	i = i+10;
				}
			}else{
				while(i>50){
			    	System.out.println(i);
			    	params2222.width = 600;
			    	params2222.height = i;
			    	publishProgress(i);
			    	i = i-10;
				}
			}
			isClick = !isClick;
			return null;
		}


		@Override
		protected void onProgressUpdate(Integer... values) {
			super.onProgressUpdate(values);
			iv.setLayoutParams(params2222);
			iv.setImageBitmap(b2);
	        iv.setScaleType(ImageView.ScaleType.CENTER);
		}
		
		
		
    }

    
}

这个效果很好最后决定就用这个了吧

刚开始：