2011.09.30——— android ImageView放大缩小

原创 于 2011-09-30 14:46:39 发布 · 107 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android

本文详细介绍了如何在Android中实现ImageView放大和缩小的同时，使背景颜色逐渐变黑的效果。通过使用RelativeLayout和LinearLayout布局，以及设置动画，实现了全屏范围内的放大和背景变化。同时，解释了fillBefore和fillAfter属性的作用，并提供了代码实现，包括放大缩小的动画效果和布局调整。此外，还讨论了在缩小过程中保持图片正确显示的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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
参考：[url]http://www.eoeandroid.com/thread-10114-1-1.html[/url]

[color=green]fillBefore是指动画结束时画面停留在第一帧
fillAfter是指动画结束是画面停留在最后一帧。[/color]

用法有两个 ：

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


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

通过上面的写法 这样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);
				}
		});

	}
}


[color=red]只里面注意几个问题：[/color]

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 这点我就很纳闷了
其实 这个还是设计到 [url=http://lipeng88213.iteye.com/blog/1180817]android:scaleType [/url]

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

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

但是 上面的设置完后 有个问题 就是动画结束后到我更改了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);
		}

	}
}



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

[img]http://dl.iteye.com/upload/attachment/563322/3df800bb-d7bf-3294-919e-6e7b4c3e4ef6.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/563324/d4d34499-81f4-3d8f-806d-73ac3d14f0c4.jpg[/img]


[img]http://dl.iteye.com/upload/attachment/563328/a35d7362-3665-3571-963d-232af8bb981f.jpg[/img]


代码见附件
cody123
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值