实现类似于QQ空间相册的点击图片放大,再点后缩小回原来位置

前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下。参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果。具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看看,讲解的很傻瓜化。

  

好,下面我们来看看如何实现如上面右图一样的效果。

1.原理分析

(1)我们是否需要在点击后开启一个新的Activity呢?我参考了很多有类似功能的相册应用,发现大家都是在一个Activity中就完成了这个功能。所以我们仅仅需要一个布局文件。

(2)在同一个布局文件中我们可以放两个层次,一个是显示小图的GridView控件,一个是用于展示大图的viewPager控件。

我们只需要刚开始隐藏viewpager,点击后用viewpager覆盖后面的gridview即可。这样就造成了用户认为的新界面。

(3)我们让图片动画放大到屏幕上,那么就需要一个动画将其连贯起来,我们就需要得到小图片的位置才能构造出动画效果。所以要通过点击的小图片计算出它的位置

(4)如果为了兼容,那么就需要用一个动画兼容包来兼容2.x版本

(5)上面覆盖的viewpager需要根据点击的图片来加载不同的图片,并且可以在点击后释放自己的资源,并回到透明状态。

(6)如果viewpager滑动了好几张图片,当前显示的大图在后面的gridview中找不到位置,那么久应该直接渐变消失。而不做动画效果处理。

参考自:

http://blog.csdn.net/huluhong/article/details/40379767
https://github.com/ywenblocker/Android-Photo-Zoom

时间: 2024-08-14 11:04:23

实现类似于QQ空间相册的点击图片放大,再点后缩小回原来位置的相关文章

JS时间轴效果(类似于qq空间时间轴效果)

2013-11-04 23:51 by 空智, 4041 阅读, 15 评论, 收藏, 编辑 在上一家公司写了一个时间轴效果,今天整理了下,感觉有必要写一篇博客出来 给大家分享分享 当然代码还有很多不足的地方,希望大家多指点指点下,此效果类似于QQ空间或者人人网空间时间轴效果,当时也是为了需求 研究了下qq空间逻辑(当然JS代码压缩了肯定看不到的),只是当时研究了下他们HTML结构和css结构,所以仿照他们那种逻辑自己也写了一个出来.先来看看是个什么样的吧!如下图所示: 需求分析:左侧是一个时间

Android学QQ空间相册浏览类型横向滑动效果显示多图片MyHorizontalScrollView

Android学QQ空间相册浏览类型横向滑动效果显示多图片MyHorizontalScrollView 我们来定制一下吧 布局文件:activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="m

破解QQ空间访问权限大全分享|怎么破解QQ空间相册密码技巧

您是否遇到了对方将QQ空间或是QQ相册加密?这里不用担心微微解密网来教大家怎么破解QQ空间相册密码以及访问权限,不管对方是否是您的好友,无论对方设置了各种访问权限,例如:回答问题访问,好友访问,仅自己访问等权限,这里的QQ空间相册密码破解教程都能轻松教会大家方法,然大家轻松的对对方的QQ空间以及QQ相册进行破解!一下是小编整理的QQ空间相册破解教程欢迎大家学习,希望大家专心学习哟!教程地址 http://www.jmwww.net

高仿新浪点击图片放大(可以拖动,动态缩小放大,以及再次点击图片消失和保存图片的功能)

有图有真相: 最近在做项目的时候用到了点击图片放大效果,于是就开始实现,本以为挺简单的,实现起来还是遇到不少的小问题啊: 第一:只实现点击图片放大,再次点击消失,这个好实现: 第二:只实现图片可以拖动,而且可以动态缩小放大,这个也好实现: 第三:第一 和第二同步实现就出现问题了: 具体的问题是: (1)setOnClickListener 和 setOnTouchListener 同时设置的时候,若是setOnTouchListener的返回值为true,则不会再执行setOnClickList

点击图片放大至原始图片大小

有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了: var _w = parseInt($(window).width());//获取浏览器的宽度 $("#abc img").each(function(i){     var img = this;     var realWidth;//真实的宽度     var realHeight;//真实的高度     $("<img

点击图片放大功能

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>点击图片放大</title> <style type="text/css"> a img{border:0px;} .latentzoom { CURSOR: pointer; outline: none } .latentzoom-image { BORDER

js+jquery+html实现在三种不通的情况下,点击图片放大的效果

js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7

jQuery实现的点击图片放大且在当前页面查看原图

jquery在当前页面查看原图,单击图片,显示出大图片,再次单击图片,恢复网页原有状态.不刷新页面的情况下查看原图,在网上类似的应用有很多.有时候朋友们说这是无刷新放大图片的功能,其实也就那么一回事吧,不过从本款代码来看,这功能实现起来并不太复杂,引入了jQuery,代码分享给大家. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

微信小程序点击图片放大预览

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage