Android 使用Gallery实现3D相册(附效果图+Demo源码)

挨打王谢水平

挨打王谢水平

2016-02-19 09:03

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享Android 使用Gallery实现3D相册(附效果图+Demo源码),希望可以对大家能有小小的帮助。
今天因为要做一个设置开机画面的功能,主要是让用户可以设置自己的开机画面,应用层需要做让用户选择开机画面图片的功能。所以需要做一个简单的图片浏览选择程序。最后选用Gallery作为基本控件。加入了一些炫一点的元素,做成3D滑动效果。下面是Demo例子截图:

这个效果网上已经很多人做出来了,只是这次需要用到,所以自己也实践了一下(这里例子我也是根据网上一些资料编写)。特意找了几张美女图片给大家养养眼,O(∩_∩)O哈!下面针对一些关键代码进行简要说明,需要做这方面东西的朋友可以看看。这篇文章是实用性文章,理论分析不多。

1、重载Gallery类
因为需要加入倒影和3D切换的效果,因此我们需要重载Gallery类,其中有两个方法我们需要重写,一个是onSizeChanged(),另外一个是getChildStaticTransformation()。下面我们看看onSizeChanged()需要做的事情。
代码如下:

    protected void onSizeChanged(int w, int h, int oldw, int oldh)
    {
    //重写计算旋转的中心
        mCoveflowCenter = getCenterOfCoverflow();
        super.onSizeChanged(w, h, oldw, oldh);
    }

上面主要做的事情就是在改变大小的时候,重新计算滑动切换时需要旋转变化的中心。下面计算图片位置时,会重新计算。
代码如下:

protected boolean getChildStaticTransformation(View child, Transformation trans)
    {
     //图像的中心点和宽度
        final int childCenter = getCenterOfView(child);
        final int childWidth = child.getWidth();
        int rotationAngle = 0;

        trans.clear();
        trans.setTransformationType(Transformation.TYPE_BOTH);        // alpha 和 matrix 都变换

        if (childCenter == mCoveflowCenter)
        {   
        // 正中间的childView
            transformImageBitmap((ImageView) child, trans, 0);   
        }
        else
        {       
        // 两侧的childView
            rotationAngle = (int) ( ( (float) (mCoveflowCenter - childCenter) / childWidth ) * mMaxRotationAngle );
            if (Math.abs(rotationAngle) mMaxRotationAngle)
            {
                rotationAngle = (rotationAngle 0) ? -mMaxRotationAngle : mMaxRotationAngle;
            }
       //根据偏移角度对图片进行处理,看上去有3D的效果。
            transformImageBitmap((ImageView) child, trans, rotationAngle);
        }

        return true;
    }

上面就是重载Gallery的时候,需要注意处理的事情,其实主要就是做图形变化,效果图里面的图片斜着显示就是这里处理的结果,目的就是让人看上去有立体感。

2、编写Adapter适配器
我们使用很多控件都涉及适配器,就是用来绑定数据源和目标控件的一个中间件。这里我们需要重载BaseAdapter作为我们Gallery的适配器。主要是处理源图像,加入倒影,生成新的数据源图片。
代码如下:

public boolean createReflectedForAdapter()
    {
        final int reflectionGap = 4;
        final int Height = 200;
        int index = 0;
        for (MapString, 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, 0, 0,
                    originalImage.getWidth(), originalImage.getHeight(), sMatrix, true);

            //是否原图片数据,节省内存
            originalImage.recycle();

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/bianchengyuyan/)

            int mwidth = miniBitmap.getWidth();
            int mheight = miniBitmap.getHeight();
            Matrix matrix = new Matrix();
            // 图片矩阵变换(从低部向顶部的倒影)
            matrix.preScale(1, -1);           
            // 截取原图下半部分
            Bitmap reflectionImage = Bitmap.createBitmap(miniBitmap, 0, mheight/2, mwidth, mheight/2, matrix, false);
            // 创建倒影图片(高度为原图3/2)
            Bitmap bitmapWithReflection = Bitmap.createBitmap(mwidth, (mheight + mheight / 2), Config.ARGB_8888);   
            // 绘制倒影图(原图 + 间距 + 倒影)
            Canvas canvas = new Canvas(bitmapWithReflection);   
            // 绘制原图
            canvas.drawBitmap(miniBitmap, 0, 0, null);       
            Paint paint = new Paint();
            // 绘制原图与倒影的间距
            canvas.drawRect(0, mheight, mwidth, mheight + reflectionGap, paint);
            // 绘制倒影图
            canvas.drawBitmap(reflectionImage, 0, mheight + reflectionGap, null);   

            paint = new Paint();
            // 线性渐变效果
            LinearGradient shader = new LinearGradient(0, miniBitmap.getHeight(), 0, bitmapWithReflection.getHeight()
                    + reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);
            paint.setShader(shader);   
            // 倒影遮罩效果
            paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));       
            // 绘制倒影的阴影效果
            canvas.drawRect(0, mheight, mwidth, bitmapWithReflection.getHeight() + reflectionGap, paint);       
            ImageView imageView = new ImageView(mContext);
        // 设置倒影图片
            imageView.setImageBitmap(bitmapWithReflection);       
            imageView.setLayoutParams(new GalleryView.LayoutParams((int)(width * scale),
                    (int)(mheight * 3 / 2.0 + reflectionGap)));
            imageView.setScaleType(ScaleType.MATRIX);
            mImages[index++] = imageView;
        }
        return true;
    }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/bianchengyuyan/)

上面其实就是一个图片处理过程,主要做的事情就是生成倒影,效果图里面底下是有倒影的。就是利用上面算法生成。我们在适配器添加图片的时候,会把适配器原生图片进行处理,加入倒影的效果。这个我们在图片初始化的时候就可以调用处理,具体代码可以查看Demo里面的代码关系。

具体图片滑动的过程,Gallery会帮我们处理好,我们要做的事情其实就是提供添加了特效的图片数据源,以及处理3D显示的变化效果,最后都会提供View作为显示图像给Gallery用来显示。

今天主要是说说如何实现Gallery的3D显示切换,Demo的代码很多是基于网上一些现成效果,感谢这些分享成果的开发者。下面是Demo的下载,不清楚的可以把Demo下载下来,运行看看效果然后分析一下代码。代码不多,也不是很复杂。

Gallery3D例子代码:点击下载

展开更多 50%)
分享

猜你喜欢

Android 使用Gallery实现3D相册(附效果图+Demo源码)

编程语言 网络编程
Android 使用Gallery实现3D相册(附效果图+Demo源码)

PS处理3D效果图

PS PS教程
PS处理3D效果图

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CorlDraw实现3D效果

CorelDRAW
CorlDraw实现3D效果

逼真3D建筑渲染效果图欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
逼真3D建筑渲染效果图欣赏

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

三居室户型3D布局效果图

室内设计 100平米三居室效果图 118平三居室效果图 70平方三居室效果图 100平米效果图 120平米装修效果图 三室一厅装修效果图 三室两厅装修效果图
三居室户型3D布局效果图

3D室内设计效果图欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
3D室内设计效果图欣赏

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

解决PowerPoint中Flash不能播放的问题

解决PowerPoint中Flash不能播放的问题

javascript写的一个表单动态输入提示的代码

javascript写的一个表单动态输入提示的代码
下拉加载更多内容 ↓