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

于 2011-09-27 17:33:57 发布
阅读量124 收藏
点赞数
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cody123/article/details/84040309
版权
2011.09.27（2）——— android ImageView上下同时拉伸的效果

在[url]http://lipeng88213.iteye.com/blog/1180817[/url]里面 我们把一张图的正中间显示在了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);
		}



    }


}


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

刚开始：


[img]http://dl.iteye.com/upload/attachment/561300/a6d88cad-d059-3d30-a060-18be2bda7545.jpg[/img]

运行中：


[img]http://dl.iteye.com/upload/attachment/561312/1ca08bd2-a0ca-363c-b9bd-25786c72ef80.jpg[/img]

完成：

[img]http://dl.iteye.com/upload/attachment/561324/849b8214-d21a-3b2c-a7f2-50df8df1f5cc.jpg[/img]


代码见附件
cody123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值