`

2011.09.30——— android ImageView放大缩小

android 
阅读更多
2011.09.30——— android ImageView放大缩小

需求：

实现一个ImageView放大缩小的效果 并且有一个背景变黑的效果

实现：

1、放大 背景变黑 有一个透明度的变化

这个背景 不是ImagView所在的layout的改变 因为底图是不变化的 所以 我想 写一个layout 只不过是透明的 然后有一个变黑的过程 就行了 但是 这个laout要全屏 那么ImageView放到哪里呢 所以最外城的框架不能用Linearlayout 而应该用RelatedLayout

如下：
布局文件： 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:background="#FF0000"
    android:id="@+id/rl"
    >
    
    <LinearLayout 
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:background="#00000000"
    android:id="@+id/ll"
    />
    
    <ImageView
    	android:layout_width="200px"
    	android:layout_height="100px"
    	android:id="@+id/iv"
    	android:src="@drawable/aa"
    	android:layout_centerInParent="true"
    	/>
    
</RelativeLayout>


用
android:layout_centerInParent="true"

这样ImageView就可以居中显示了

要实现放大 和 背景变黑的动画效果： 

<?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="2.0" 
        android:fromYScale="1.0"
        android:toYScale="2.0" 
        android:pivotX="50%" 
        android:pivotY="50%"
        android:duration="2000" />
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha   
         android:fromAlpha="0.0"    
         android:toAlpha="1.0"   
         android:duration="2000"   
     /> 
</set>


然后 代码： 
package com.lp;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Animation.AnimationListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;;

public class MainActivity extends Activity {
	private ImageView iv;
	private LinearLayout ll;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		iv = (ImageView) findViewById(R.id.iv);
		ll = (LinearLayout)findViewById(R.id.ll);
		iv.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
					
					Animation a = AnimationUtils.loadAnimation(MainActivity.this, R.anim.imageviw_zoomout);
					Animation b = AnimationUtils.loadAnimation(MainActivity.this, R.anim.bg_zoomout);
					
					iv.startAnimation(a);
					ll.setBackgroundColor(Color.BLACK);
					ll.startAnimation(b);
				}
		});
		
	}
}


这样就实现了 ImageVie放大 背景变黑的效果 但是 ImageView变大后 又缩回去了 这个可不是我想要的

2、关于fillAfter 和 fillBefore
参考：http://www.eoeandroid.com/thread-10114-1-1.html

fillBefore是指动画结束时画面停留在第一帧
fillAfter是指动画结束是画面停留在最后一帧。

用法有两个 ：

2.1、一般写在代码里面： 

Animation a = AnimationUtils.loadAnimation(MainActivity.this, R.anim.imageviw_zoomout);
a.setFillAfter(true);
a.setFillBefore(false);


2.2、anim.xml里面写

如果你在anim.xml里面这样写 ： 
<?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:fillAfter="true"
        android:fromXScale="1.0" 
        android:toXScale="2.0" 
        android:fromYScale="1.0"
        android:toYScale="2.0" 
        android:pivotX="50%" 
        android:pivotY="50%"
        android:duration="2000" />
</set>

这样写是不起作用

必须写在set标签里面 

<set android:fillAfter="true">


但是 注意了
控件会停止在动画结束的位置，但是它的响应事件还是在原位置
也就是说 原来图片为200*100 放大到400*200 但是它的响应事件的区域还是200*100的位置

通过上面的写法 这样ImageView就会停留在放大之后的图片上了


3、现在放大实现了 然后就是缩小了
可是 虽然图片变大了 但是相应区域还是那么小 而且它会按ImageView的图片来缩小 并不会按照我们放大的图片来缩小 然后 我就想 我可以改变ImageView的图片

看看上面我的layout.xml 我的ImagView是固定宽度的 因为图片很大 所以我只需要改变ImagView的宽和高 就可以改变ImagView的图片大小了

于是乎： 
package com.lp;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Animation.AnimationListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;;

public class MainActivity extends Activity {
	private ImageView iv;
	private ImageView iv2;
	private LinearLayout ll;
	private int width;
	private int height;
	private LayoutParams params = new LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.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);
		ll = (LinearLayout)findViewById(R.id.ll);
		iv.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				width = iv.getWidth();
				height = iv.getHeight();
				System.out.println(width+"   "+height + "  " + iv.getScaleType());
					
					Animation a = AnimationUtils.loadAnimation(MainActivity.this, R.anim.imageviw_zoomout);
					Animation b = AnimationUtils.loadAnimation(MainActivity.this, R.anim.bg_zoomout);
					a.setAnimationListener(new AnimationListener() {
	
						@Override
						public void onAnimationStart(Animation animation) {
							// TODO Auto-generated method stub
							
						}
	
						@Override
						public void onAnimationRepeat(Animation animation) {
							// TODO Auto-generated method stub
	
						}
	
						@Override
						public void onAnimationEnd(Animation animation) {
							// TODO Auto-generated method stub
							params.width = 400;
							params.height = 200;
							params.addRule(RelativeLayout.CENTER_IN_PARENT);
							
							
							iv.setLayoutParams(params);
							iv.setImageResource(R.drawable.aa);
							
						}
					});
					a.setFillAfter(true);
					a.setFillBefore(false);
					iv.startAnimation(a);
					ll.setBackgroundColor(Color.BLACK);
					ll.startAnimation(b);
				}
		});
		
	}
}


只里面注意几个问题：

3.1、注意那个LayoutParams 刚开始我直接复制以前的 
private LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);

感觉也没什么不对的。。。但是一直报错了
因为我的布局是RelatedLayout 不是 LinearLayout所以不应该用LinearLayout.LayoutParams 

private LayoutParams params = new RelatedLayout.LayoutParams(RelatedLayout.LayoutParams.WRAP_CONTENT,RelatedLayout.LayoutParams.WRAP_CONTENT);



3.2、在params 我想设置图片居中显示 但是找了半天都没找到方法 后来终于发现 原来是 
params.addRule(RelativeLayout.CENTER_IN_PARENT);


3.3、还有一个不相关的问题
当我设置 
params.width = 400;
params.height = 800;


显示出来的 很明显仍然是width大于height  这点我就很纳闷了
其实 这个还是设计到 android:scaleType

因为系统默认是用fitCenter显示的
也就是按比例拉伸图片，拉伸后图片的高度为View的高度，且显示在View的中间 
按比例所以 原图是宽大于高 修改的图也将会是宽大于高的

4、
参考：http://www.eoeandroid.com/thread-3162-1-1.html

但是 上面的设置完后 有个问题 就是动画结束后到我更改了ImagView的大小中间会有一个图片突然变大的过程 虽然只是一闪而过 但是这个明显是不行的

后来 没办发了 只好采用了参考里面的意见了 我删除原来的ImageView 然后新建一个宽高为放大之后大小的ImageView, 
package com.lp;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Animation.AnimationListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;;

public class MainActivity extends Activity {
	private ImageView iv;
	private ImageView iv2;
	private LinearLayout ll;
	private RelativeLayout rl;
	private int width;
	private int height;
	private LayoutParams params = new LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.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);
		ll = (LinearLayout)findViewById(R.id.ll);
		rl = (RelativeLayout)findViewById(R.id.rl);
		iv.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				width = iv.getWidth();
				height = iv.getHeight();
				System.out.println(width+"   "+height + "  " + iv.getScaleType());
					
					Animation a = AnimationUtils.loadAnimation(MainActivity.this, R.anim.imageviw_zoomout);
					Animation b = AnimationUtils.loadAnimation(MainActivity.this, R.anim.bg_zoomout);
					a.setAnimationListener(new AnimationListener() {
	
						@Override
						public void onAnimationStart(Animation animation) {
							// TODO Auto-generated method stub
							
						}
	
						@Override
						public void onAnimationRepeat(Animation animation) {
							// TODO Auto-generated method stub
	
						}
	
						@Override
						public void onAnimationEnd(Animation animation) {
							// TODO Auto-generated method stub
							params.width = 400;
							params.height = 200;
							params.addRule(RelativeLayout.CENTER_IN_PARENT);
							
							rl.removeView(iv);
							iv2 = new ImageView(MainActivity.this);
							iv2.setLayoutParams(params);
							iv2.setImageResource(R.drawable.aa);
							iv2.setOnClickListener(new Zoomin());
							rl.addView(iv2);
							
//							iv.setLayoutParams(params);
//							iv.setImageResource(R.drawable.aa);
							
						}
					});
					//a.setFillAfter(true);
					//a.setFillBefore(false);
					iv.startAnimation(a);
					ll.setBackgroundColor(Color.BLACK);
					ll.startAnimation(b);
				}
		});
		
	}
	
	private class Zoomin implements OnClickListener{

		@Override
		public void onClick(View v) {
				Animation a = AnimationUtils.loadAnimation(MainActivity.this, R.anim.imageviw_zoomin);
				Animation b = AnimationUtils.loadAnimation(MainActivity.this, R.anim.bg_zoomin);
				a.setAnimationListener(new AnimationListener() {

					@Override
					public void onAnimationStart(Animation animation) {
						// TODO Auto-generated method stub
						
					}

					@Override
					public void onAnimationRepeat(Animation animation) {
						// TODO Auto-generated method stub

					}

					@Override
					public void onAnimationEnd(Animation animation) {
						// TODO Auto-generated method stub
						rl.removeView(iv2);
						rl.addView(iv);
						ll.setBackgroundColor(Color.TRANSPARENT);
					}
				});
				//a.setFillAfter(true);
				//a.setFillBefore(false);
				iv2.startAnimation(a);
				ll.startAnimation(b);
		}
		
	}
}



这样 效果就很不错了 哈哈 效果如下









代码见附件




  • 大小: 22.4 KB
  • 大小: 32.3 KB
  • 大小: 34.8 KB
分享到：
| 2011.09.29（2）——— android 图片缩略 ...
评论
2 楼 ysony 2012-08-25  
非常感谢非常感谢非常感谢非常感谢
1 楼 mengsina 2012-02-17  
  
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics