Android实现CoverFlow效果控件的实例代码
作者:热气球 发布时间:2023-06-23 13:12:43
标签:android,CoverFlow
最近研究了一下如何在Android上实现CoverFlow效果的控件,其实早在2010年,就有Neil Davies开发并开源出了这个控件,Neil大神的这篇博客地址。首先是阅读源码,弄明白核心思路后,自己重新写了一遍这个控件,并加入了详尽的注释以便日后查阅;而后在使用过程中,发现了有两点可以改进:
(1)初始图片位于中间,左边空了一半空间,比较难看,可以改为重复滚动地展示;
(2)由于图片一开始就需要加载出来,所以对内存开销较大,很容易OOM,需要对图片的内存空间进行压缩。
这个自定义控件包括4个部分,用于创建及提供图片对象的ImageAdapter,计算图片旋转角度等的自定义控件GalleryFlow,压缩采样率解析Bitmap的工具类BitmapScaleDownUtil,以及承载自定义控件的Gallery3DActivity。
首先是ImageAdapter,代码如下:
package pym.test.gallery3d.widget;
import pym.test.gallery3d.util.BitmapScaleDownUtil;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Shader.TileMode;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
/**
* @author pengyiming
* @date 2013-9-30
* @function GalleryFlow适配器
*/
public class ImageAdapter extends BaseAdapter
{
/* 数据段begin */
private final String TAG = "ImageAdapter";
private Context mContext;
//图片数组
private int[] mImageIds ;
//图片控件数组
private ImageView[] mImages;
//图片控件LayoutParams
private GalleryFlow.LayoutParams mImagesLayoutParams;
/* 数据段end */
/* 函数段begin */
public ImageAdapter(Context context, int[] imageIds)
{
mContext = context;
mImageIds = imageIds;
mImages = new ImageView[mImageIds.length];
mImagesLayoutParams = new GalleryFlow.LayoutParams(Gallery.LayoutParams.WRAP_CONTENT, Gallery.LayoutParams.WRAP_CONTENT);
}
/**
* @function 根据指定宽高创建待绘制的Bitmap,并绘制到ImageView控件上
* @param imageWidth
* @param imageHeight
* @return void
*/
public void createImages(int imageWidth, int imageHeight)
{
// 原图与倒影的间距5px
final int gapHeight = 5;
int index = 0;
for (int imageId : mImageIds)
{
/* step1 采样方式解析原图并生成倒影 */
// 解析原图,生成原图Bitmap对象
// Bitmap originalImage = BitmapFactory.decodeResource(mContext.getResources(), imageId);
Bitmap originalImage = BitmapScaleDownUtil.decodeSampledBitmapFromResource(mContext.getResources(), imageId, imageWidth, imageHeight);
int width = originalImage.getWidth();
int height = originalImage.getHeight();
// Y轴方向反向,实质就是X轴翻转
Matrix matrix = new Matrix();
matrix.setScale(1, -1);
// 且仅取原图下半部分创建倒影Bitmap对象
Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0, height / 2, width, height / 2, matrix, false);
/* step2 绘制 */
// 创建一个可包含原图+间距+倒影的新图Bitmap对象
Bitmap bitmapWithReflection = Bitmap.createBitmap(width, (height + gapHeight + height / 2), Config.ARGB_8888);
// 在新图Bitmap对象之上创建画布
Canvas canvas = new Canvas(bitmapWithReflection);
// 抗锯齿效果
canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG));
// 绘制原图
canvas.drawBitmap(originalImage, 0, 0, null);
// 绘制间距
Paint gapPaint = new Paint();
gapPaint.setColor(0xFFCCCCCC);
canvas.drawRect(0, height, width, height + gapHeight, gapPaint);
// 绘制倒影
canvas.drawBitmap(reflectionImage, 0, height + gapHeight, null);
/* step3 渲染 */
// 创建一个线性渐变的渲染器用于渲染倒影
Paint paint = new Paint();
LinearGradient shader = new LinearGradient(0, height, 0, (height + gapHeight + height / 2), 0x70ffffff, 0x00ffffff, TileMode.CLAMP);
// 设置画笔渲染器
paint.setShader(shader);
// 设置图片混合模式
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
// 渲染倒影+间距
canvas.drawRect(0, height, width, (height + gapHeight + height / 2), paint);
/* step4 在ImageView控件上绘制 */
ImageView imageView = new ImageView(mContext);
imageView.setImageBitmap(bitmapWithReflection);
imageView.setLayoutParams(mImagesLayoutParams);
// 打log
imageView.setTag(index);
/* step5 释放heap */
originalImage.recycle();
reflectionImage.recycle();
// bitmapWithReflection.recycle();
mImages[index++] = imageView;
}
}
@Override
public int getCount()
{
return Integer.MAX_VALUE;
}
@Override
public Object getItem(int position)
{
return mImages[position];
}
@Override
public long getItemId(int position)
{
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
return mImages[position % mImages.length];
}
/* 函数段end */
}
其次是GalleryFlow,代码如下:
package pym.test.gallery3d.widget;
import android.content.Context;
import android.graphics.Camera;
import android.graphics.Matrix;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.Transformation;
import android.widget.Gallery;
/**
* @author pengyiming
* @date 2013-9-30
* @function 自定义控件
*/
public class GalleryFlow extends Gallery
{
/* 数据段begin */
private final String TAG = "GalleryFlow";
// 边缘图片最大旋转角度
private final float MAX_ROTATION_ANGLE = 75;
// 中心图片最大前置距离
private final float MAX_TRANSLATE_DISTANCE = -100;
// GalleryFlow中心X坐标
private int mGalleryFlowCenterX;
// 3D变换Camera
private Camera mCamera = new Camera();
/* 数据段end */
/* 函数段begin */
public GalleryFlow(Context context, AttributeSet attrs)
{
super(context, attrs);
// 开启,在滑动过程中,回调getChildStaticTransformation()
this.setStaticTransformationsEnabled(true);
}
/**
* @function 获取GalleryFlow中心X坐标
* @return
*/
private int getCenterXOfCoverflow()
{
return (getWidth() - getPaddingLeft() - getPaddingRight()) / 2 + getPaddingLeft();
}
/**
* @function 获取GalleryFlow子view的中心X坐标
* @param childView
* @return
*/
private int getCenterXOfView(View childView)
{
return childView.getLeft() + childView.getWidth() / 2;
}
/**
* @note step1 系统调用measure()方法时,回调此方法;表明此时系统正在计算view的大小
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mGalleryFlowCenterX = getCenterXOfCoverflow();
Log.d(TAG, "onMeasure, mGalleryFlowCenterX = " + mGalleryFlowCenterX);
}
/**
* @note step2 系统调用layout()方法时,回调此方法;表明此时系统正在给child view分配空间
* @note 必定在onMeasure()之后回调,但与onSizeChanged()先后顺序不一定
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b)
{
super.onLayout(changed, l, t, r, b);
mGalleryFlowCenterX = getCenterXOfCoverflow();
Log.d(TAG, "onLayout, mGalleryFlowCenterX = " + mGalleryFlowCenterX);
}
/**
* @note step2 系统调用measure()方法后,当需要绘制此view时,回调此方法;表明此时系统已计算完view的大小
* @note 必定在onMeasure()之后回调,但与onSizeChanged()先后顺序不一定
*/
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
super.onSizeChanged(w, h, oldw, oldh);
mGalleryFlowCenterX = getCenterXOfCoverflow();
Log.d(TAG, "onSizeChanged, mGalleryFlowCenterX = " + mGalleryFlowCenterX);
}
@Override
protected boolean getChildStaticTransformation(View childView, Transformation t)
{
// 计算旋转角度
float rotationAngle = calculateRotationAngle(childView);
// 计算前置距离
float translateDistance = calculateTranslateDistance(childView);
// 开始3D变换
transformChildView(childView, t, rotationAngle, translateDistance);
return true;
}
/**
* @function 计算GalleryFlow子view的旋转角度
* @note1 位于Gallery中心的图片不旋转
* @note2 位于Gallery中心两侧的图片按照离中心点的距离旋转
* @param childView
* @return
*/
private float calculateRotationAngle(View childView)
{
final int childCenterX = getCenterXOfView(childView);
float rotationAngle = 0;
rotationAngle = (mGalleryFlowCenterX - childCenterX) / (float) mGalleryFlowCenterX * MAX_ROTATION_ANGLE;
if (rotationAngle > MAX_ROTATION_ANGLE)
{
rotationAngle = MAX_ROTATION_ANGLE;
}
else if (rotationAngle < -MAX_ROTATION_ANGLE)
{
rotationAngle = -MAX_ROTATION_ANGLE;
}
return rotationAngle;
}
/**
* @function 计算GalleryFlow子view的前置距离
* @note1 位于Gallery中心的图片前置
* @note2 位于Gallery中心两侧的图片不前置
* @param childView
* @return
*/
private float calculateTranslateDistance(View childView)
{
final int childCenterX = getCenterXOfView(childView);
float translateDistance = 0;
if (mGalleryFlowCenterX == childCenterX)
{
translateDistance = MAX_TRANSLATE_DISTANCE;
}
return translateDistance;
}
/**
* @function 开始变换GalleryFlow子view
* @param childView
* @param t
* @param rotationAngle
* @param translateDistance
*/
private void transformChildView(View childView, Transformation t, float rotationAngle, float translateDistance)
{
t.clear();
t.setTransformationType(Transformation.TYPE_MATRIX);
final Matrix imageMatrix = t.getMatrix();
final int imageWidth = childView.getWidth();
final int imageHeight = childView.getHeight();
mCamera.save();
/* rotateY */
// 在Y轴上旋转,位于中心的图片不旋转,中心两侧的图片竖向向里或向外翻转。
mCamera.rotateY(rotationAngle);
/* rotateY */
/* translateZ */
// 在Z轴上前置,位于中心的图片会有放大的效果
mCamera.translate(0, 0, translateDistance);
/* translateZ */
// 开始变换(我的理解是:移动Camera,在2D视图上产生3D效果)
mCamera.getMatrix(imageMatrix);
imageMatrix.preTranslate(-imageWidth / 2, -imageHeight / 2);
imageMatrix.postTranslate(imageWidth / 2, imageHeight / 2);
mCamera.restore();
}
/* 函数段end */
}
Bitmap解析用具BitmapScaleDownUtil,代码如下:
package pym.test.gallery3d.util;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.view.Display;
/**
* @author pengyiming
* @date 2013-9-30
* @function Bitmap缩放处理工具类
*/
public class BitmapScaleDownUtil
{
/* 数据段begin */
private final String TAG = "BitmapScaleDownUtil";
/* 数据段end */
/* 函数段begin */
/**
* @function 获取屏幕大小
* @param display
* @return 屏幕宽高
*/
public static int[] getScreenDimension(Display display)
{
int[] dimension = new int[2];
dimension[0] = display.getWidth();
dimension[1] = display.getHeight();
return dimension;
}
/**
* @function 以取样方式加载Bitmap
* @param res
* @param resId
* @param reqWidth
* @param reqHeight
* @return 取样后的Bitmap
*/
public static Bitmap decodeSampledBitmapFromResource(Resources res, int resId, int reqWidth, int reqHeight)
{
// step1,将inJustDecodeBounds置为true,以解析Bitmap真实尺寸
final BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = true;
BitmapFactory.decodeResource(res, resId, options);
// step2,计算Bitmap取样比例
options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight);
// step3,将inJustDecodeBounds置为false,以取样比列解析Bitmap
options.inJustDecodeBounds = false;
return BitmapFactory.decodeResource(res, resId, options);
}
/**
* @function 计算Bitmap取样比例
* @param options
* @param reqWidth
* @param reqHeight
* @return 取样比例
*/
private static int calculateInSampleSize(BitmapFactory.Options options, int reqWidth, int reqHeight)
{
// 默认取样比例为1:1
int inSampleSize = 1;
// Bitmap原始尺寸
final int width = options.outWidth;
final int height = options.outHeight;
// 取最大取样比例
if (height > reqHeight || width > reqWidth)
{
final int widthRatio = Math.round((float) width / (float) reqWidth);
final int heightRatio = Math.round((float) height / (float) reqHeight);
// 取样比例为X:1,其中X>=1
inSampleSize = Math.max(widthRatio, heightRatio);
}
return inSampleSize;
}
/* 函数段end */
}
测试控件的Gallery3DActivity,代码如下:
package pym.test.gallery3d.main;
import pym.test.gallery3d.R;
import pym.test.gallery3d.util.BitmapScaleDownUtil;
import pym.test.gallery3d.widget.GalleryFlow;
import pym.test.gallery3d.widget.ImageAdapter;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
/**
* @author pengyiming
* @date 2013-9-30
*/
public class Gallery3DActivity extends Activity
{
/* 数据段begin */
private final String TAG = "Gallery3DActivity";
private Context mContext;
// 图片缩放倍率(相对屏幕尺寸的缩小倍率)
public static final int SCALE_FACTOR = 8;
// 图片间距(控制各图片之间的距离)
private final int GALLERY_SPACING = -10;
// 控件
private GalleryFlow mGalleryFlow;
/* 数据段end */
/* 函数段begin */
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
mContext = getApplicationContext();
setContentView(R.layout.gallery_3d_activity_layout);
initGallery();
}
private void initGallery()
{
// 图片ID
int[] images = {
R.drawable.picture_1,
R.drawable.picture_2,
R.drawable.picture_3,
R.drawable.picture_4,
R.drawable.picture_5,
R.drawable.picture_6,
R.drawable.picture_7 };
ImageAdapter adapter = new ImageAdapter(mContext, images);
// 计算图片的宽高
int[] dimension = BitmapScaleDownUtil.getScreenDimension(getWindowManager().getDefaultDisplay());
int imageWidth = dimension[0] / SCALE_FACTOR;
int imageHeight = dimension[1] / SCALE_FACTOR;
// 初始化图片
adapter.createImages(imageWidth, imageHeight);
// 设置Adapter,显示位置位于控件中间,这样使得左右均可"无限"滑动
mGalleryFlow = (GalleryFlow) findViewById(R.id.gallery_flow);
mGalleryFlow.setSpacing(GALLERY_SPACING);
mGalleryFlow.setAdapter(adapter);
mGalleryFlow.setSelection(Integer.MAX_VALUE / 2);
}
/* 函数段end */
}
see效果图~~~
来源:http://www.cnblogs.com/zealotrouge/p/3380682.html
0
投稿
猜你喜欢
- 最近“全网域(Web Scale)”一词被炒得火热,人们也正在通过扩展他们的应用程序架构来使他们的系统变得更加“全网域”。但是究竟什么是全网
- 相比于直线检测,直线拟合的最大特点是将所有数据只拟合出一条直线void fitLine( InputArray points, Output
- 1 自定义类加载器自定义类加载器的代码很简单,只需要继承ClassLoader类,覆写findClass方法即可其默认实现是会抛出一个异常:
- 已知两个链表list1和list,2,各自非降序排列,将它们合并成另外一个链表list3,并且依然有序,要求保留所有节点。实现过程中,lis
- 协议做如下规定:规定数据协议:序列号 长度 状态字 数据长度 数据1 &n
- [LeetCode] 2. Add Two Numbers 两个数字相加You are given two non-empty&n
- 最近在看《.NET游戏编程入门经典 C#篇》 第一章介绍了如何制作俄罗斯方块,自己试了试按照书上的步骤,可算是完成了。于是写下这篇文章留作纪
- 1、volley 项目地址 https://github.com/smanikandan14/Volley-demo (1)&nb
- feign传输List的坑无法直接传输List错误方法1@RequestMapping(value = "/stat/mercha
- 1、取得控制台应用程序的根目录方法方法1、Environment.CurrentDirectory 取得或设置当前工作目录的完整限定路径方法
- JSON.toJSONString()空字段不忽略修改使用JSON.toJSONString(object)方法,返回的json中,默认会将
- 本文主要介绍我为桌面和 Web 设计的一个超级秘密 Flutter 项目使用了画布和可拖动节点界面。本教程将展示我如何使用堆栈来使用小部件完
- 前言本文的记录如何用CustomPaint、GestureDetector实现一个进度条控件。首先需要说明的是 flutter Materi
- 本文实例为大家分享了android实现简易计算器展示的具体代码,供大家参考,具体内容如下效果图:一、如图,首先布局计算器主页显示activi
- 最近要给一个 Winform 项目添加功能,需要一个能显示进度条的弹窗,还要求能够中止任务,所以就做了一个,在此做个记录总结。虽然用的是比较
- 本文实例为大家分享了java简单实现斗地主发牌的具体代码,供大家参考,具体内容如下问题:参考斗地主的游戏规则,完成一个发牌的功能(54张牌,
- 本文实例讲述了C#实现对Json字符串处理方法,分享给大家供大家参考。具体分析如下:一般对于web应用开发人员来说对Json字符串都会很熟悉
- 为什么要使用路由在之前我们的代码中,页面跳转使用的代码如下所示:Navigator.of(context).push( Mate
- 本文实例讲述了C#获取网页源代码的方法。分享给大家供大家参考。具体如下:public string GetPageHTML(string u
- 一、Kotlin 调用 Java1. kotlin 关键字转义java 中的方法或变量 是 kotlin 的关键字时,使用反引号 `` 对关