【Android UI】案例01Cover Flow3D效果的实现(Gallery+BaseAdapter)

本例主要介绍CoverFlow3D的实现。首先介绍一下Cover Flow。Cover Flow是苹果首创的将多首歌曲的封面以3D界面的形式显示出来的方式。

本案例摘自网络http://www.cnblogs.com/yyyyy5101/archive/2011/12/14/2287871.html，该案例在真机测试中，出现显示效果的差异，由此可见该演示工程存在一定的兼容性的问题，往浏览本文的有志之士，可以给以指正与修改。最后补充一下，虽然不同机器显示的效果有差异，但是显示效果的确也算优秀。
【转载使用，请注明出处：http://blog.csdn.net/mahoking】
本案例的演示工程设计三个类文件分别为：Activity(CoverFlowActivity)、Gallery(GalleryFlow)、BaseAdapter(ImageAdapter)和布局文件activity_02_gallery.xml。

CoverFlowActivity

import android.app.Activity;
import android.os.Bundle;public class CoverFlowActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_02_gallery);Integer[] images = { R.drawable.image01, R.drawable.image02,R.drawable.image03};ImageAdapter adapter = new ImageAdapter(this, images);adapter.createReflectedImages();GalleryFlow galleryFlow = (GalleryFlow) findViewById(R.id.activity_01_galleryFlow);galleryFlow.setAdapter(adapter);}
}

Gallery是android的一个浏览图片的组件（不只是图片，可以用适配器），Gallery的中文意思也是画廊的意思，就是说把图片排成一行，然后手动滑动阅览。本文只是入门介绍，如果要深入了解Gallery还需读者自行不断深入了解。

GalleryFlow gallery在拖动图片过程中，会不断调用getChildStaticTransformation 方法,在该方法中,用Camera实现Z轴旋转。

import android.content.Context;
import android.graphics.Camera;
import android.graphics.Matrix;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Transformation;
import android.widget.Gallery;
import android.widget.ImageView;public class GalleryFlow extends Gallery {private Camera mCamera = new Camera();private int mMaxRotationAngle = 60;private int mMaxZoom = -120;private int mCoveflowCenter;public GalleryFlow(Context context) {super(context);this.setStaticTransformationsEnabled(true);}public GalleryFlow(Context context, AttributeSet attrs) {super(context, attrs);this.setStaticTransformationsEnabled(true);}public GalleryFlow(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);this.setStaticTransformationsEnabled(true);}public int getMaxRotationAngle() {return mMaxRotationAngle;}public void setMaxRotationAngle(int maxRotationAngle) {mMaxRotationAngle = maxRotationAngle;}public int getMaxZoom() {return mMaxZoom;}public void setMaxZoom(int maxZoom) {mMaxZoom = maxZoom;}private int getCenterOfCoverflow() {return (getWidth() - getPaddingLeft() - getPaddingRight()) / 2+ getPaddingLeft();}private static int getCenterOfView(View view) {return view.getLeft() + view.getWidth() / 2;}@Overrideprotected boolean getChildStaticTransformation(View child, Transformation t) {final int childCenter = getCenterOfView(child);final int childWidth = child.getWidth();int rotationAngle = 0;t.clear();t.setTransformationType(Transformation.TYPE_MATRIX);if (childCenter == mCoveflowCenter) {transformImageBitmap((ImageView) child, t, 0);} else {rotationAngle = (int) (((float) (mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle);if (Math.abs(rotationAngle) > mMaxRotationAngle) {rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle: mMaxRotationAngle;}transformImageBitmap((ImageView) child, t, rotationAngle);}return true;}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {mCoveflowCenter = getCenterOfCoverflow();super.onSizeChanged(w, h, oldw, oldh);}private void transformImageBitmap(ImageView child, Transformation t,int rotationAngle) {mCamera.save();final Matrix imageMatrix = t.getMatrix();final int imageHeight = child.getLayoutParams().height;final int imageWidth = child.getLayoutParams().width;final int rotation = Math.abs(rotationAngle);// 在Z轴上正向移动camera的视角，实际效果为放大图片。// 如果在Y轴上移动，则图片上下移动；X轴上对应图片左右移动。mCamera.translate(0.0f, 0.0f, 100.0f);// As the angle of the view gets less, zoom inif (rotation < mMaxRotationAngle) {float zoomAmount = (float) (mMaxZoom + (rotation * 1.5));mCamera.translate(0.0f, 0.0f, zoomAmount);}// 在Y轴上旋转，对应图片竖向向里翻转。// 如果在X轴上旋转，则对应图片横向向里翻转。mCamera.rotateY(rotationAngle);mCamera.getMatrix(imageMatrix);imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));mCamera.restore();}
}

ImageAdapter

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
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.ImageView;public class ImageAdapter extends BaseAdapter {int mGalleryItemBackground;private Context mContext;private Integer[] mImageIds;private ImageView[] mImages;public ImageAdapter(Context c, Integer[] ImageIds) {mContext = c;mImageIds = ImageIds;mImages = new ImageView[mImageIds.length];}public boolean createReflectedImages() {final int reflectionGap = 4;int index = 0;for (int imageId : mImageIds) {Bitmap originalImage = BitmapFactory.decodeResource(mContext.getResources(), imageId);int width = originalImage.getWidth();int height = originalImage.getHeight();Matrix matrix = new Matrix();matrix.preScale(1, -1);Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,height / 2, width, height / 2, matrix, false);Bitmap bitmapWithReflection = Bitmap.createBitmap(width,(height + height / 2), Config.ARGB_8888);Canvas canvas = new Canvas(bitmapWithReflection);canvas.drawBitmap(originalImage, 0, 0, null);Paint deafaultPaint = new Paint();canvas.drawRect(0, height, width, height + reflectionGap,deafaultPaint);canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);Paint paint = new Paint();LinearGradient shader = new LinearGradient(0, originalImage.getHeight(), 0, bitmapWithReflection.getHeight()+ reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);paint.setShader(shader);paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()+ reflectionGap, paint);ImageView imageView = new ImageView(mContext);imageView.setImageBitmap(bitmapWithReflection);imageView.setLayoutParams(new GalleryFlow.LayoutParams(180*2, 240*2));
//            imageView.setLayoutParams(new GalleryFlow.LayoutParams(180*4, 240*4));
//          imageView.setScaleType(ScaleType.MATRIX);mImages[index++] = imageView;}return true;}private Resources getResources() {// TODO Auto-generated method stubreturn null;}public int getCount() {return mImageIds.length;}public Object getItem(int position) {return position;}public long getItemId(int position) {return position;}public View getView(int position, View convertView, ViewGroup parent) {return mImages[position];}public float getScale(boolean focused, int offset) {return Math.max(0, 1.0f / (float) Math.pow(2, Math.abs(offset)));}}

activity_02_gallery.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><com.mahaochen.app.uisharing.example02.GalleryFlow android:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/activity_01_galleryFlow"/></LinearLayout>

演示效果截图：

【Android UI】案例01Cover Flow3D效果的实现(Gallery+BaseAdapter)相关推荐

android动态化ui框架,简单实用的Android UI微博动态点赞效果
说起空间动态.微博的点赞效果,网上也是很泛滥,各种实现与效果一大堆.而详细实现的部分,讲述的也是参差不齐,另一方面估计也有很多大侠也不屑一顾,觉得完全没必要单独开篇来写和讲解吧.毕竟,也就是两个vie ...
android UI Tab切页效果总结
2019独角兽企业重金招聘Python工程师标准>>> 目前市面上APP 切页效果有两类(just android) 1.底部Tab点击不同的按钮来切换页面 && 滑 ...
Android UI - 粒子爆炸特效
Android UI - 粒子爆炸特效效果实现分析关键代码源码效果实现分析首先动画效果需要在一个位于顶层的view上绘制,目的是不被其他控件遮挡. 添加点击事件,触发后给控件加一个抖 ...
直播app源代码直播软件开发Android UI动画仿直播点赞飘心动画效果
直播app源代码直播软件开发Android UI动画仿直播点赞飘心动画效果一个飘心的小动画,之前看也看到网上有很多轮子,但是感觉不是很符合我的需求,所以自己就凑活凑活搞出来一个,废话不多说先看图 ...
android 仿qq好友动态,Android UI仿QQ好友列表分组悬浮效果
本文实例为大家分享了Android UI仿QQ好友列表分组悬浮效果的具体代码,供大家参考,具体内容如下楼主是在平板上測试的.图片略微有点大,大家看看效果就好接下来贴源代码: PinnedHeade ...
Android UI开发第八篇——ViewFlipper 左右滑动效果
怎么实现Android主页面的左右拖动效果.其实实现起来很简单,就是使用ViewFlipper来将您要来回拖动的View装在一起,然后与GestureDetector手势识别类来联动,确定要显示哪个V ...
Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现
周末升级了墨迹天气,看着引导界面做的不错,模仿一下,可能与原作者的代码实现不一样,但是实现的效果还是差不多的.先分享一篇以前的文章,android动画的基础知识,<Android UI开发第十二 ...
GitHub 上受欢迎的 Android UI Library 整理
抽屉菜单 https://github.com/mikepenz/MaterialDrawer ★7337 - 安卓抽屉效果实现方案 https://github.com/Yalantis/Side- ...
GitHub上受欢迎的Android UI Library
内容抽屉菜单 ListView WebView SwitchButton 按钮点赞按钮进度条 TabLayout 图标下拉刷新 ViewPager 图表(Chart) 菜单(Menu) 浮动菜 ...

【Android UI】案例01Cover Flow3D效果的实现(Gallery+BaseAdapter)

【Android UI】案例01Cover Flow3D效果的实现(Gallery+BaseAdapter)相关推荐

最新文章

热门文章