2011.09.27(2)——— android ImageView上下同时拉伸的效果
在[url]http://lipeng88213.iteye.com/blog/1180817[/url]里面 我们把一张图的正中间显示在了ImageView里面 现在需要做的就是 我点击图片 显示完整的图像,因为我们的图片是正中间显示在ImageView里面的 所以应该需要一个上下同时拉伸图片的动画
最开始没有动画的代码如下:
这个没有动画效果 显得特别突兀 所以需要一个动画来过渡一下
1、当然 首先我想到的是Animation 如果android自带的动画效果能满足的话 那就方便了
写了一个imageview.vml
调用:
动画是出来了 但是和我预想的差距太大了
它只是把现有的图片进行缩放,并不会把原来图片没有显示出来的部分显示出来
而我想要的是 把整个图像都显示完全 并不是针对部分图片进行缩放
2、我想 我们显示imageView显示的是图片的中间部分 那我们可不可以动态的更新ImageView的宽高 并且我们的ImageView的scaleType为CENTER 所以就会显示出来上下同时拉伸的效果
基于这样想法 我开始实践:
2.1、首先 我先试试 这个方法可行不可行
就是通过不断的点击TextView实现ImageView的宽高动态更新 来拉伸图片
这个测试 成功了 下面就是把不但点击点击TextView的操作封装一下:
2.2、线程
我开始用线程来实现:
但是 没有成功 根本看不见动画效果 什么原因啊?
我想 会不会是运行太快了 所以 修改一下Thread
哈哈 果然可以了 不错啊
但是 效果不理想 有一顿一顿的感觉
2.3、AsyncTask
我想 那就用Android系统建议使用的AsyncTask吧
这个效果很好 最后决定就用这个了吧
刚开始:
[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]
代码见附件
在[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]
代码见附件