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.10.09——— android ImageView放大缩小(2)”指的是一个关于Android平台中ImageView组件的优化技术，特别是如何处理图片的缩放问题。在Android应用开发中，ImageView是用于显示图像的常见组件，但...
这篇2011年的博客文章"2011.09.27（2）——— android ImageView上下同时拉伸的效果"探讨了如何实现一个自定义的ImageView，使得图像在垂直方向上能够同时在顶部和底部进行拉伸，以达到特定的视觉效果。这种效果通常...
2011.09.21的这篇博客文章深入探讨了如何开发Android动态壁纸，提供了宝贵的实践经验和源码示例。 一、动态壁纸基础 动态壁纸在Android系统中是通过`LiveWallpaper`服务实现的，它继承自`WallpaperService`类。...
这篇博客"2011.08.26——— android ListView之多个item布局"深入探讨了如何在ListView中实现多个不同类型的Item布局，这对于创建动态、丰富的用户界面至关重要。在Android应用设计中，ListView通常用于显示如联系人...
在Android中，有多种方法可以为View或者ImageView添加圆角。一种常用的方法是通过自定义View或ImageView的背景，利用XML drawable资源文件定义一个带有圆角的shape。以下是一个简单的示例： ```xml <shape xmlns:...
9. **动画效果**: 除了静态的放大缩小，还可以通过Animation类或ObjectAnimator实现平滑的缩放动画效果，增强用户体验。 10. **性能考量**: 当处理大量图片或高分辨率图片时，要注意内存管理，合理使用Bitmap的配置...
这个`Android源码——imageView.rar`压缩包可能包含了`ImageView`类的源代码，让我们来深入探讨一下`ImageView`及其相关的知识点。 一、`ImageView`概述 `ImageView`是Android SDK中的一个视图类，它继承自`View`或...
imageView.getLayoutParams().width = width; imageView.getLayoutParams().height = height; ``` 然后，为了实现局部拉伸放大，我们可以自定义一个ImageView子类，重写其`onTouchEvent()`方法，监听用户的触摸事件...
这篇2014年的博客文章“2014.01.07 ——— android开发实例之QuickActionBar”可能是探讨如何在Android应用中实现这一功能的教程。 首先，我们要理解QuickActionBar的基本概念。它是一个自定义控件，用于替代或扩展...
以上就是使用自定义ImageView实现图片放大缩小的基本步骤和关键代码。通过这种方式，我们可以构建一个高度定制且高效的图片查看器组件，适用于各种Android应用程序。在项目中使用时，只需将`MyImage`类导入并替换...
此项目“Android源码——ImageView图片循环跑马灯效果源码_new_08.7z”提供了这样的实现示例。下面我们将深入探讨这个效果的实现原理及其相关知识点。 1. **图片资源**： 压缩包中的1-121111112H50-L.png和1_...
imageView.setImageResource(imageArray[currentIndex]); } }); nextButton.setOnClickListener(v -> { if (currentIndex < imageArray.length - 1) { currentIndex++; imageView.setImageResource(imageArray...
So it's a ImageView. Demo Warning:When you set the round radius,the simpletagimageview scale type just support fitXY now! Usage Quick Start Gradle compile '...
这个压缩包“安卓Android源码——android相册系统(用Matrix实现).rar”显然提供了一个使用Matrix类来实现相册功能的示例代码。Matrix是Android SDK中的一个关键类，用于进行2D图像变换，如旋转、缩放、平移等。接...
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) imageView.getLayoutParams(); layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT; layoutParams.height = ViewGroup.LayoutParams...
4. **事件监听**：可以监听插件提供的事件，比如`imageView.show`和`imageView.hide`，以便在放大镜显示和隐藏时执行相应操作。 ### 示例代码 ```html <!DOCTYPE html> <title>jQuery.imageView示例 ...
这个压缩包文件"安卓Android源码——android相册系统(用Matrix实现).zip"包含了一个使用Matrix类来实现的相册系统源码。Matrix是Android图形库中的一个关键类，它允许开发者对图像进行平移、旋转、缩放等变换操作。...
本文将深入探讨如何基于Android的ImageView组件创建一个自定义视图，实现手势操作，包括图像的放大、缩小和旋转功能。 首先，我们需要了解Android的手势检测机制。Android提供了GestureDetector和...
在这个"Android源码——gesture-imageview.zip"项目中，我们主要探讨的是如何将手势识别功能集成到ImageView组件中，创建一个自定义的GestureImageView。这个源码示例旨在帮助开发者了解如何实现手势操作，如缩放、...