Android画布可以缩放 android屏幕放大

转载

云端梦想实现家 2024-07-26 09:55:46

文章标签 Android画布可以缩放 android ide xml 文章分类 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

参考：[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]

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。