android图片点击全屏显示,Android浏览图片,点击放大至全屏效果
近期做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果非常赞,于是也做了个类似的效果。
例如以下。
我不知道QQ那个是怎么做的。我的思路例如以下:
首先。从图片缩略界面跳转到图片详情页面,应该是从一个Activity跳转到另外一个Activity,应该图片详情页面也有非常多操作。用View或者Dialog不是非常好。所以如今难点就是。怎样使得前一个界面的ImageView在另外一个界面做缩放分割动画。
一般缩略界面的ImageView的是如上图所看到的的正方形的,而且是CENTER_CROP缩放属性的。CENTER_CROP属性会导致ImageView中显示的Bitmap有被分割达到填充的效果。
而详情页面的ImageView一般都是FIT_CENTER的缩放属性。所以要保证这个跳转动画的流畅。要做例如以下的变化:
1、Bitmap的缩放,由于缩略图和详情图的缩放比例肯定不一样
2、Bitmap位置的平移。由于缩略图的位置是不确定的,我们要使他平移到中间
3、Bitmap的分割,由于CENTER_CROP是分割过得,而FIT_CENTER是没有分割的,那么两幅图显示的内容区域是不同的,所以也要显示区域的平滑变换。
要完毕上面的效果,假设单单是指对ImageView做一个动画变换,我认为是完毕不了这个要求的。所以自己重写了ImageView来完毕上述的变换。
直接贴上基本的ImageView
package com.roamer.ui.view;
import android.animation.Animator;
import android.animation.PropertyValuesHolder;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.ImageView;
/**
* 2d平滑变化的显示图片的ImageView
* 仅限于用于:从一个ScaleType==CENTER_CROP的ImageView,切换到还有一个ScaleType=
* FIT_CENTER的ImageView,或者反之 (当然,得使用相同的图片最好)
*
* @author Dean Tao
*
*/
public class SmoothImageView extends ImageView {
private static final int STATE_NORMAL = 0;
private static final int STATE_TRANSFORM_IN = 1;
private static final int STATE_TRANSFORM_OUT = 2;
private int mOriginalWidth;
private int mOriginalHeight;
private int mOriginalLocationX;
private int mOriginalLocationY;
private int mState = STATE_NORMAL;
private Matrix mSmoothMatrix;
private Bitmap mBitmap;
private boolean mTransformStart = false;
private Transfrom mTransfrom;
private final int mBgColor = 0xFF000000;
private int mBgAlpha = 0;
private Paint mPaint;
public SmoothImageView(Context context) {
super(context);
init();
}
public SmoothImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public SmoothImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
mSmoothMatrix = new Matrix();
mPaint=new Paint();
mPaint.setColor(mBgColor);
mPaint.setStyle(Style.FILL);
//setBackgroundColor(mBgColor);
}
public void setOriginalInfo(int width, int height, int locationX, int locationY) {
mOriginalWidth = width;
mOriginalHeight = height;
mOriginalLocationX = locationX;
mOriginalLocationY = locationY;
// 由于是屏幕坐标。所以要转换为该视图内的坐标,由于我所用的该视图是MATCH_PARENT,所以不用定位该视图的位置,假设不是的话。还须要定位视图的位置,然后计算mOriginalLocationX和mOriginalLocationY
mOriginalLocationY = mOriginalLocationY - getStatusBarHeight(getContext());
}
/**
* 获取状态栏高度
*
* @return
*/
public static int getStatusBarHeight(Context context) {
Class> c = null;
Object obj = null;
java.lang.reflect.Field field = null;
int x = 0;
int statusBarHeight = 0;
try {
c = Class.forName("com.android.internal.R$dimen");
obj = c.newInstance();
field = c.getField("status_bar_height");
x = Integer.parseInt(field.get(obj).toString());
statusBarHeight = context.getResources().getDimensionPixelSize(x);
return statusBarHeight;
} catch (Exception e) {
e.printStackTrace();
}
return statusBarHeight;
}
/**
* 用于開始进入的方法。 调用此方前。需已经调用过setOriginalInfo
*/
public void transformIn() {
mState = STATE_TRANSFORM_IN;
mTransformStart = true;
invalidate();
}
/**
* 用于開始退出的方法。
调用此方前,需已经调用过setOriginalInfo
*/
public void transformOut() {
mState = STATE_TRANSFORM_OUT;
mTransformStart = true;
invalidate();
}
private class Transfrom {
float startScale;// 图片開始的缩放值
float endScale;// 图片结束的缩放值
float scale;// 属性ValueAnimator计算出来的值
LocationSizeF startRect;// 開始的区域
LocationSizeF endRect;// 结束的区域
LocationSizeF rect;// 属性ValueAnimator计算出来的值
void initStartIn() {
scale = startScale;
try {
rect = (LocationSizeF) startRect.clone();
} catch (CloneNotSupportedException e) {
e.printStackTrace();
}
}
void initStartOut() {
scale = endScale;
try {
rect = (LocationSizeF) endRect.clone();
} catch (CloneNotSupportedException e) {
e.printStackTrace();
}
}
}
/**
* 初始化进入的变量信息
*/
private void initTransform() {
if (getDrawable() == null) {
return;
}
if (mBitmap == null || mBitmap.isRecycled()) {
mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();
}
//防止mTransfrom反复的做相同的初始化
if (mTransfrom != null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
mTransfrom = new Transfrom();
/** 以下为缩放的计算 */
/* 计算初始的缩放值。初始值由于是CENTR_CROP效果。所以要保证图片的宽和高至少1个能匹配原始的宽和高,另1个大于 */
float xSScale = mOriginalWidth / ((float) mBitmap.getWidth());
float ySScale = mOriginalHeight / ((float) mBitmap.getHeight());
float startScale = xSScale > ySScale ?
xSScale : ySScale;
mTransfrom.startScale = startScale;
/* 计算结束时候的缩放值。结束值由于要达到FIT_CENTER效果,所以要保证图片的宽和高至少1个能匹配原始的宽和高,另1个小于 */
float xEScale = getWidth() / ((float) mBitmap.getWidth());
float yEScale = getHeight() / ((float) mBitmap.getHeight());
float endScale = xEScale < yEScale ? xEScale : yEScale;
mTransfrom.endScale = endScale;
/**
* 以下计算Canvas Clip的范围,也就是图片的显示的范围,由于图片是慢慢变大,而且是等比例的。所以这个效果还须要裁减图片显示的区域
* ,而显示区域的变化范围是在原始CENTER_CROP效果的范围区域
* ,到终于的FIT_CENTER的范围之间的,区域我用LocationSizeF更好计算
* ,他就包含左上顶点坐标。和宽高,最后转为Canvas裁减的Rect.
*/
/* 開始区域 */
mTransfrom.startRect = new LocationSizeF();
mTransfrom.startRect.left = mOriginalLocationX;
mTransfrom.startRect.top = mOriginalLocationY;
mTransfrom.startRect.width = mOriginalWidth;
mTransfrom.startRect.height = mOriginalHeight;
/* 结束区域 */
mTransfrom.endRect = new LocationSizeF();
float bitmapEndWidth = mBitmap.getWidth() * mTransfrom.endScale;// 图片终于的宽度
float bitmapEndHeight = mBitmap.getHeight() * mTransfrom.endScale;// 图片终于的宽度
mTransfrom.endRect.left = (getWidth() - bitmapEndWidth) / 2;
mTransfrom.endRect.top = (getHeight() - bitmapEndHeight) / 2;
mTransfrom.endRect.width = bitmapEndWidth;
mTransfrom.endRect.height = bitmapEndHeight;
mTransfrom.rect = new LocationSizeF();
}
private class LocationSizeF implements Cloneable{
float left;
float top;
float width;
float height;
@Override
public String toString() {
return "[left:"+left+" top:"+top+" width:"+width+" height:"+height+"]";
}
@Override
public Object clone() throws CloneNotSupportedException {
// TODO Auto-generated method stub
return super.clone();
}
}
/* 以下实现了CENTER_CROP的功能 的Matrix,在优化的过程中,已经不用了 */
private void getCenterCropMatrix() {
if (getDrawable() == null) {
return;
}
if (mBitmap == null || mBitmap.isRecycled()) {
mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();
}
/* 以下实现了CENTER_CROP的功能 */
float xScale = mOriginalWidth / ((float) mBitmap.getWidth());
float yScale = mOriginalHeight / ((float) mBitmap.getHeight());
float scale = xScale > yScale ? xScale : yScale;
mSmoothMatrix.reset();
mSmoothMatrix.setScale(scale, scale);
mSmoothMatrix.postTranslate(-(scale * mBitmap.getWidth() / 2 - mOriginalWidth / 2), -(scale * mBitmap.getHeight() / 2 - mOriginalHeight / 2));
}
private void getBmpMatrix() {
if (getDrawable() == null) {
return;
}
if (mTransfrom == null) {
return;
}
if (mBitmap == null || mBitmap.isRecycled()) {
mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();
}
/* 以下实现了CENTER_CROP的功能 */
mSmoothMatrix.setScale(mTransfrom.scale, mTransfrom.scale);
mSmoothMatrix.postTranslate(-(mTransfrom.scale * mBitmap.getWidth() / 2 - mTransfrom.rect.width / 2),
-(mTransfrom.scale * mBitmap.getHeight() / 2 - mTransfrom.rect.height / 2));
}
@Override
protected void onDraw(Canvas canvas) {
if (getDrawable() == null) {
return; // couldn't resolve the URI
}
if (mState == STATE_TRANSFORM_IN || mState == STATE_TRANSFORM_OUT) {
if (mTransformStart) {
initTransform();
}
if (mTransfrom == null) {
super.onDraw(canvas);
return;
}
if (mTransformStart) {
if (mState == STATE_TRANSFORM_IN) {
mTransfrom.initStartIn();
} else {
mTransfrom.initStartOut();
}
}
if(mTransformStart){
Log.d("Dean", "mTransfrom.startScale:"+mTransfrom.startScale);
Log.d("Dean", "mTransfrom.startScale:"+mTransfrom.endScale);
Log.d("Dean", "mTransfrom.scale:"+mTransfrom.scale);
Log.d("Dean", "mTransfrom.startRect:"+mTransfrom.startRect.toString());
Log.d("Dean", "mTransfrom.endRect:"+mTransfrom.endRect.toString());
Log.d("Dean", "mTransfrom.rect:"+mTransfrom.rect.toString());
}
mPaint.setAlpha(mBgAlpha);
canvas.drawPaint(mPaint);
int saveCount = canvas.getSaveCount();
canvas.save();
// 先得到图片在此刻的图像Matrix矩阵
getBmpMatrix();
canvas.translate(mTransfrom.rect.left, mTransfrom.rect.top);
canvas.clipRect(0, 0, mTransfrom.rect.width, mTransfrom.rect.height);
canvas.concat(mSmoothMatrix);
getDrawable().draw(canvas);
canvas.restoreToCount(saveCount);
if (mTransformStart) {
mTransformStart=false;
startTransform(mState);
}
} else {
//当Transform In变化完毕后,把背景改为黑色,使得Activity不透明
mPaint.setAlpha(255);
canvas.drawPaint(mPaint);
super.onDraw(canvas);
}
}
private void startTransform(final int state) {
if (mTransfrom == null) {
return;
}
ValueAnimator valueAnimator = new ValueAnimator();
valueAnimator.setDuration(300);
valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
if (state == STATE_TRANSFORM_IN) {
PropertyValuesHolder scaleHolder = PropertyValuesHolder.ofFloat("scale", mTransfrom.startScale, mTransfrom.endScale);
PropertyValuesHolder leftHolder = PropertyValuesHolder.ofFloat("left", mTransfrom.startRect.left, mTransfrom.endRect.left);
PropertyValuesHolder topHolder = PropertyValuesHolder.ofFloat("top", mTransfrom.startRect.top, mTransfrom.endRect.top);
PropertyValuesHolder widthHolder = PropertyValuesHolder.ofFloat("width", mTransfrom.startRect.width, mTransfrom.endRect.width);
PropertyValuesHolder heightHolder = PropertyValuesHolder.ofFloat("height", mTransfrom.startRect.height, mTransfrom.endRect.height);
PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("alpha", 0, 255);
valueAnimator.setValues(scaleHolder, leftHolder, topHolder, widthHolder, heightHolder, alphaHolder);
} else {
PropertyValuesHolder scaleHolder = PropertyValuesHolder.ofFloat("scale", mTransfrom.endScale, mTransfrom.startScale);
PropertyValuesHolder leftHolder = PropertyValuesHolder.ofFloat("left", mTransfrom.endRect.left, mTransfrom.startRect.left);
PropertyValuesHolder topHolder = PropertyValuesHolder.ofFloat("top", mTransfrom.endRect.top, mTransfrom.startRect.top);
PropertyValuesHolder widthHolder = PropertyValuesHolder.ofFloat("width", mTransfrom.endRect.width, mTransfrom.startRect.width);
PropertyValuesHolder heightHolder = PropertyValuesHolder.ofFloat("height", mTransfrom.endRect.height, mTransfrom.startRect.height);
PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("alpha", 255, 0);
valueAnimator.setValues(scaleHolder, leftHolder, topHolder, widthHolder, heightHolder, alphaHolder);
}
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public synchronized void onAnimationUpdate(ValueAnimator animation) {
mTransfrom.scale = (Float) animation.getAnimatedValue("scale");
mTransfrom.rect.left = (Float) animation.getAnimatedValue("left");
mTransfrom.rect.top = (Float) animation.getAnimatedValue("top");
mTransfrom.rect.width = (Float) animation.getAnimatedValue("width");
mTransfrom.rect.height = (Float) animation.getAnimatedValue("height");
mBgAlpha = (Integer) animation.getAnimatedValue("alpha");
invalidate();
((Activity)getContext()).getWindow().getDecorView().invalidate();
}
});
valueAnimator.addListener(new ValueAnimator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
/*
* 假设是进入的话,当然是希望最后停留在center_crop的区域。可是假设是out的话。就不应该是center_crop的位置了
* , 而应该是最后变化的位置。由于当out的时候结束时,不回复视图是Normal,要不然会有一个突然闪动回去的bug
*/
// TODO 这个能够依据实际需求来改动
if (state == STATE_TRANSFORM_IN) {
mState = STATE_NORMAL;
}
if (mTransformListener != null) {
mTransformListener.onTransformComplete(state);
}
}
@Override
public void onAnimationCancel(Animator animation) {
}
});
valueAnimator.start();
}
public void setOnTransformListener(TransformListener listener) {
mTransformListener = listener;
}
private TransformListener mTransformListener;
public static interface TransformListener {
/**
*
* @param mode
* STATE_TRANSFORM_IN 1 ,STATE_TRANSFORM_OUT 2
*/
void onTransformComplete(int mode);// mode 1
}
}
使用的时候。从前一个Activity传递到详情Activity以下几个基本的信息:
Intent intent = new Intent(MainActivity.this, SpaceImageDetailActivity.class);
intent.putExtra("images", (ArrayList) datas);//非必须
intent.putExtra("position", position);
int[] location = new int[2];
imageView.getLocationOnScreen(location);
intent.putExtra("locationX", location[0]);//必须
intent.putExtra("locationY", location[1]);//必须
intent.putExtra("width", imageView.getWidth());//必须
intent.putExtra("height", imageView.getHeight());//必须
startActivity(intent);
overridePendingTransition(0, 0);
在详情Activity接受到这些參数,并对SmoothImageView初始化位置信息,然后就能够进行变化了。
mDatas = (ArrayList) getIntent().getSerializableExtra("images");
mPosition = getIntent().getIntExtra("position", 0);
mLocationX = getIntent().getIntExtra("locationX", 0);
mLocationY = getIntent().getIntExtra("locationY", 0);
mWidth = getIntent().getIntExtra("width", 0);
mHeight = getIntent().getIntExtra("height", 0);
imageView = new SmoothImageView(this);
imageView.setOriginalInfo(mWidth, mHeight, mLocationX, mLocationY);
imageView.transformIn();
imageView.setLayoutParams(new ViewGroup.LayoutParams(-1, -1));
imageView.setScaleType(ScaleType.FIT_CENTER);
setContentView(imageView);
ImageLoader.getInstance().displayImage(mDatas.get(mPosition), imageView);
上面的就已经完毕了图片的缩放效果,可是还须要设置下Activity透明的风格。才干使得alpha效果体验出来,用户体验更好。
对Activity设置例如以下风格。另外说明,在SmoothImageView中没有定位视图的位置。仅仅是做了对状态栏的处理。所以要设置Activity 为NotitleBar,详细style例如以下:
@android:color/transparent
true
true
@null
android图片点击全屏显示,Android浏览图片,点击放大至全屏效果相关推荐
- 计算机桌面怎么全屏显示,台式电脑桌面两边黑框怎么调全屏 定位到缩放栏目...
说到全屏,大家应该都了解,有人问我的电脑桌面不能全屏显示,当然了,还有人想问电脑屏幕两边有黑边怎么办,这到底怎么回事呢?其实win7桌面不能全屏呢,接下来,小编就来教教大家台式电脑桌面两边黑框怎么调全 ...
- vue图片img加载失败显示自定义默认图片(缺省图)
vue图片img加载失败显示自定义默认图片(缺省图) 1.图片加载示例 2.加载失败显示默认图片 3.加载失败默认图片代码处理 <div class="book-img" ...
- html 全屏显示某个区域,JS实现指定区域的全屏显示功能示例
本文实例讲述了JS实现指定区域的全屏显示功能.分享给大家供大家参考,具体如下: www.jb51.net js指定区域全屏 #fulldiv { background: #fff; width: 10 ...
- msp430f5529——OLED屏显示文字与图片
目录 前言 一.效果展示 二.步骤 1.OLED.C文件 2.OLED.h文件 3.OLEDFONT.h文件 4.type.h文件 5.bmp.h文件 6.main.c 7.关于文字和图片的取模 总结 ...
- JS file图片即选即得显示,前端交互图片即选即得
<table><tr><td><input type="file" name="sdfFile" id="s ...
- android 让app全屏显示,Android app设置全屏模式
Android中,为APP设置全屏模式,主要有如下几种方式: 在manifest中设置 在项目中找到AndroidManifest.xml配置文件,找到Activity所在的节点,添加theme. p ...
- html实现点击图片全屏显示,用vue实现点击图片预览浏览器满屏大图
前提 安装插件 npm install vue-directive-image-previewer -D 引入插件 import VueDirectiveImagePreviewer from 'vu ...
- Android TextView重写onMeasure和onDraw显示无拉伸图片(含实现代码链接)
1. 摘要: 论坛上遇到个小伙伴求助,"如何防止Android的TextView背景图片被拉伸".搜到了一篇博客<Android TextView里直接显示图片的三种方法&g ...
- android11息屏显示,Android 11系统锁屏做出改善:不再显示专辑封面
谷歌可以已经敲定 Android 11系统,可以确定这种锁屏艺术的改变,相信可以给更多的用户带来最好的使用体验.显著改造了媒体播放体验,相信安卓系统可以变得更好,虽然依旧还有一些小小的不足之处. An ...
最新文章
- 2021-08-08概率论与数理统计-第二章
- 第一课.图与图神经网络
- Asp.Net SignalR 集线器不使用代理的实现
- eclipse如何使用log4j详解,你get了吗???
- ajax、offset
- JAVA API1.7中文手册
- minifilter
- elasticsearch ik分词插件配置自定义分词词典
- shell编程之文本处理工具sed
- call and apply
- [转载] 深度测评Python的3种“字符串格式化”方法,看看你喜欢哪一种?
- 106 网络编程实战之基于socketserver实现多用户FTP服务器
- 国内开发商品基金的一些设想
- android 启动界面修改工具下载,安卓开机画面更改软件
- uCos中的信号量机制
- 【腾讯TMQ】有众测、不忐忑 ——记TBS内核测试优化之路
- PowerDesigne 建立概念数据模型
- [从 0 开始写一个操作系统] 三、Bootloader 的实现
- 双十一买什么充电宝好?实惠好用的充电宝推荐
- java 开发微型公众账号应用