Android Gallery实现3D相册(附效果图+Demo源码)
今天因为要做一个设置开机画面的功能,主要是让用户可以设置自己的开机画面,应用层需要做让用户选择开机画面图片的功能。所以需要做一个简单的图片浏览选择程序。最后选用Gallery作为基本控件。加入了一些炫一点的元素,做成3D滑动效果。下面是Demo例子截图:
这个效果网上已经很多人做出来了,只是这次需要用到,所以自己也实践了一下(这里例子我也是根据网上一些资料编写)。特意找了几张美女图片给大家养养眼,O(∩_∩)O哈!下面针对一些关键代码进行简要说明,需要做这方面东西的朋友可以看看。这篇文章是实用性文章,理论分析不多。
(PS:新建的QQ群,有兴趣可以加入一起讨论:Android群:322599434)
1、重载Gallery类
因为需要加入倒影和3D切换的效果,因此我们需要重载Gallery类,其中有两个方法我们需要重写,一个是onSizeChanged(),另外一个是getChildStaticTransformation()。下面我们看看onSizeChanged()需要做的事情。
//Edited by mythou
//http://www.cnblogs.com/mythou/
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
//重写计算旋转的中心
mCoveflowCenter = getCenterOfCoverflow();
super.onSizeChanged(w, h, oldw, oldh);
}
上面主要做的事情就是在改变大小的时候,重新计算滑动切换时需要旋转变化的中心。下面计算图片位置时,会重新计算。
//Edited by mythou
//http://www.cnblogs.com/mythou/
protected boolean getChildStaticTransformation(View child, Transformation trans)
{
//图像的中心点和宽度
final int childCenter = getCenterOfView(child);
final int childWidth = child.getWidth();
int rotationAngle = ; trans.clear();
trans.setTransformationType(Transformation.TYPE_BOTH); // alpha 和 matrix 都变换 if (childCenter == mCoveflowCenter)
{
// 正中间的childView
transformImageBitmap((ImageView) child, trans, );
}
else
{
// 两侧的childView
rotationAngle = (int) ( ( (float) (mCoveflowCenter - childCenter) / childWidth ) * mMaxRotationAngle );
if (Math.abs(rotationAngle) > mMaxRotationAngle)
{
rotationAngle = (rotationAngle < ) ? -mMaxRotationAngle : mMaxRotationAngle;
}
//根据偏移角度对图片进行处理,看上去有3D的效果。
transformImageBitmap((ImageView) child, trans, rotationAngle);
} return true;
}
上面就是重载Gallery的时候,需要注意处理的事情,其实主要就是做图形变化,效果图里面的图片斜着显示就是这里处理的结果,目的就是让人看上去有立体感。
2、编写Adapter适配器
我们使用很多控件都涉及适配器,就是用来绑定数据源和目标控件的一个中间件。这里我们需要重载BaseAdapter作为我们Gallery的适配器。主要是处理源图像,加入倒影,生成新的数据源图片。
//Edited by mythou
//http://www.cnblogs.com/mythou/
public boolean createReflectedForAdapter()
{
final int reflectionGap = ;
final int Height = ;
int index = ;
for (Map<String, Object> map : list)
{
Integer id = (Integer) map.get("image");
// 获取原始图片
Bitmap originalImage = BitmapFactory.decodeResource(mContext.getResources(), id);
int width = originalImage.getWidth();
int height = originalImage.getHeight();
float scale = Height / (float)height; Matrix sMatrix = new Matrix();
sMatrix.postScale(scale, scale);
Bitmap miniBitmap = Bitmap.createBitmap(originalImage, , ,
originalImage.getWidth(), originalImage.getHeight(), sMatrix, true); //是否原图片数据,节省内存
originalImage.recycle(); int mwidth = miniBitmap.getWidth();
int mheight = miniBitmap.getHeight();
Matrix matrix = new Matrix();
// 图片矩阵变换(从低部向顶部的倒影)
matrix.preScale(, -);
// 截取原图下半部分
Bitmap reflectionImage = Bitmap.createBitmap(miniBitmap, , mheight/, mwidth, mheight/, matrix, false);
// 创建倒影图片(高度为原图3/2)
Bitmap bitmapWithReflection = Bitmap.createBitmap(mwidth, (mheight + mheight / ), Config.ARGB_8888);
// 绘制倒影图(原图 + 间距 + 倒影)
Canvas canvas = new Canvas(bitmapWithReflection);
// 绘制原图
canvas.drawBitmap(miniBitmap, , , null);
Paint paint = new Paint();
// 绘制原图与倒影的间距
canvas.drawRect(, mheight, mwidth, mheight + reflectionGap, paint);
// 绘制倒影图
canvas.drawBitmap(reflectionImage, , mheight + reflectionGap, null); paint = new Paint();
// 线性渐变效果
LinearGradient shader = new LinearGradient(, miniBitmap.getHeight(), , bitmapWithReflection.getHeight()
+ reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);
paint.setShader(shader);
// 倒影遮罩效果
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
// 绘制倒影的阴影效果
canvas.drawRect(, mheight, mwidth, bitmapWithReflection.getHeight() + reflectionGap, paint);
ImageView imageView = new ImageView(mContext);
// 设置倒影图片
imageView.setImageBitmap(bitmapWithReflection);
imageView.setLayoutParams(new GalleryView.LayoutParams((int)(width * scale),
(int)(mheight * / 2.0 + reflectionGap)));
imageView.setScaleType(ScaleType.MATRIX);
mImages[index++] = imageView;
}
return true;
}
上面其实就是一个图片处理过程,主要做的事情就是生成倒影,效果图里面底下是有倒影的。就是利用上面算法生成。我们在适配器添加图片的时候,会把适配器原生图片进行处理,加入倒影的效果。这个我们在图片初始化的时候就可以调用处理,具体代码可以查看Demo里面的代码关系。
具体图片滑动的过程,Gallery会帮我们处理好,我们要做的事情其实就是提供添加了特效的图片数据源,以及处理3D显示的变化效果,最后都会提供View作为显示图像给Gallery用来显示。
今天主要是说说如何实现Gallery的3D显示切换,Demo的代码很多是基于网上一些现成效果,感谢这些分享成果的开发者。下面是Demo的下载,不清楚的可以把Demo下载下来,运行看看效果然后分析一下代码。代码不多,也不是很复杂。
Gallery3D例子代码:Grallery3DTest2013-7-19.rar
Edited by mythou
原创博文,转载请标明出处:http://www.cnblogs.com/mythou/p/3201126.html
Android Gallery实现3D相册(附效果图+Demo源码)的更多相关文章
- Android Studio 的蓝牙串口通信(附Demo源码下载)
根据相关代码制作了一个开源依赖包,将以下所有的代码进行打包,直接调用即可完成所有的操作.详细说明地址如下,如果觉得有用可以GIthub点个Star支持一下: 项目官网 Kotlin版本说明文档 Jav ...
- 3D语音天气球(源码分享)——在Unity中使用Android语音服务
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 这个项目准备分四部分介绍: 一:创建可旋转的"3D球":3 ...
- Asp.net MVC集成Google Calendar API(附Demo源码)
Asp.net MVC集成Google Calendar API(附Demo源码) Google Calendar是非常方便的日程管理应用,很多人都非常熟悉.Google的应用在国内不稳定,但是在国外 ...
- winserver的consul部署实践与.net core客户端使用(附demo源码)
winserver的consul部署实践与.net core客户端使用(附demo源码) 前言 随着微服务兴起,服务的管理显得极其重要.都知道微服务就是”拆“,把臃肿的单块应用,拆分成多个轻量级的 ...
- Python-Flask框架之——图书管理系统 , 附详解源码和效果图 !
该图书管理系统要实现的功能: 1. 可以通过添加窗口添加书籍或作者, 如果要添加的作者和书籍已存在于书架上, 则给出相应的提示. 2. 如果要添加的作者存在, 而要添加的书籍书架上没有, 则将该书籍添 ...
- 3D语音天气球(源码分享)——完结篇
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 由于这篇文章是本系列最后一篇,有必要进行简单的回顾和思路整理. 这个程序是由两 ...
- 3D语音天气球(源码分享)——通过天气服务动态创建3D球
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 这个项目准备分四部分介绍: 一:创建可旋转的"3D球":3 ...
- 3D语音天气球(源码分享)——创建可旋转的3D球
开篇废话: 在9月份时参加了一个网站的比赛,比赛的题目是需要使用第三方平台提供的服务做出创意的作品. 于是我选择使用语音服务,天气服务,Unity3D,Android来制作一个3D语音天气预报,我给它 ...
- 7款超酷HTML5 3D动画精选应用及源码
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
随机推荐
- POJ 2923 Relocation 装车问题 【状态压缩DP】+【01背包】
题目链接:https://vjudge.net/contest/103424#problem/I 转载于:>>>大牛博客 题目大意: 有 n 个货物,并且知道了每个货物的重量,每次用 ...
- Faster RCNN 学习与实现
论文 论文翻译 Faster R-CNN 主要分为两个部分: RPN(Region Proposal Network)生成高质量的 region proposal: Fast R-CNN 利用 reg ...
- H5即时通讯Websocket
/** * Created by admin on 2017/8/19. */ // import Vue from 'vue' // import axios from './HTTP.js' // ...
- C# 创建多级文件夹示例
string str = ""; ; i < j; i++) { str = str + "\\新建文件夹" ; } System.IO.Director ...
- centOS7升级git版本到2.7.3
CentOS 自带的git版本太低,需要升级到2.1.2版本以上才能使用gitea. 升级方法: 1.安装所需软件包 yum install curl-devel expat-devel gettex ...
- tmux使用心得
1,在终端输入tmux命令进入tmux, control+b x,关闭tmux的初始化session 2,创建自己的session,然后进行分屏
- “IT学子成长指导”专栏及文章目录 —贺利坚
迂者专栏关键词 就 业 大一 大二 大三 大四 自学 职 场 专业+兴趣 研究生 硕士 规 划 考 研 大学生活 迷 茫 计算机+专业 基本功 学习方法 编程 基 础 实践 读书 前 途 成 长 社团 ...
- April Fools Contest 2017 题解
趁着上课无聊,来补一补-- A. Numbers Joke 直接oeis就好了:http://oeis.org/search?q=numbers+joke&language=english&a ...
- 树莓派.Qt.Creator安装方法
树莓派硬件: Raspberry Pi 3 B 树莓派系统: Linux version 4.9.59-v7+ (32位) Qt版本(x86版本--32位): 安装过程 可以查看软件仓库支持的版本: ...
- 各种组件的js 获取值 / js动态赋值
jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...}); //为Se ...