Android开发————CoverFlow3D的实现

本例主要介绍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

[java]  view plain copy

1. import android.app.Activity;  
2. import android.os.Bundle;  
3.   
4. public class CoverFlowActivity extends Activity {  
5.   
6.     @Override  
7.     protected void onCreate(Bundle savedInstanceState) {  
8.         super.onCreate(savedInstanceState);  
9.          setContentView(R.layout.activity_02_gallery);  
10.         Integer[] images = { R.drawable.image01, R.drawable.image02,R.drawable.image03};  
11.         ImageAdapter adapter = new ImageAdapter(this, images);  
12.         adapter.createReflectedImages();  
13.         GalleryFlow galleryFlow = (GalleryFlow) findViewById(R.id.activity_01_galleryFlow);  
14.         galleryFlow.setAdapter(adapter);  
15.     }  
16. }  

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

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

[java]  view plain copy

1. import android.content.Context;  
2. import android.graphics.Camera;  
3. import android.graphics.Matrix;  
4. import android.util.AttributeSet;  
5. import android.view.View;  
6. import android.view.animation.Transformation;  
7. import android.widget.Gallery;  
8. import android.widget.ImageView;  
9.   
10. public class GalleryFlow extends Gallery {  
11.   
12.     private Camera mCamera = new Camera();  
13.     private int mMaxRotationAngle = 60;  
14.     private int mMaxZoom = -120;  
15.     private int mCoveflowCenter;  
16.   
17.     public GalleryFlow(Context context) {  
18.         super(context);  
19.         this.setStaticTransformationsEnabled(true);  
20.     }  
21.   
22.     public GalleryFlow(Context context, AttributeSet attrs) {  
23.         super(context, attrs);  
24.         this.setStaticTransformationsEnabled(true);  
25.     }  
26.   
27.     public GalleryFlow(Context context, AttributeSet attrs, int defStyle) {  
28.         super(context, attrs, defStyle);  
29.         this.setStaticTransformationsEnabled(true);  
30.     }  
31.   
32.     public int getMaxRotationAngle() {  
33.         return mMaxRotationAngle;  
34.     }  
35.   
36.     public void setMaxRotationAngle(int maxRotationAngle) {  
37.         mMaxRotationAngle = maxRotationAngle;  
38.     }  
39.   
40.     public int getMaxZoom() {  
41.         return mMaxZoom;  
42.     }  
43.   
44.     public void setMaxZoom(int maxZoom) {  
45.         mMaxZoom = maxZoom;  
46.     }  
47.   
48.     private int getCenterOfCoverflow() {  
49.         return (getWidth() - getPaddingLeft() - getPaddingRight()) / 2  
50.                 + getPaddingLeft();  
51.     }  
52.   
53.     private static int getCenterOfView(View view) {  
54.         return view.getLeft() + view.getWidth() / 2;  
55.     }  
56.   
57.     @Override  
58.     protected boolean getChildStaticTransformation(View child, Transformation t) {  
59.         final int childCenter = getCenterOfView(child);  
60.         final int childWidth = child.getWidth();  
61.         int rotationAngle = 0;  
62.         t.clear();  
63.         t.setTransformationType(Transformation.TYPE_MATRIX);  
64.   
65.         if (childCenter == mCoveflowCenter) {  
66.             transformImageBitmap((ImageView) child, t, 0);  
67.         } else {  
68.             rotationAngle = (int) (((float) (mCoveflowCenter - childCenter) / childWidth) *   
69.   
70. mMaxRotationAngle);  
71.             if (Math.abs(rotationAngle) > mMaxRotationAngle) {  
72.                 rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle  
73.                         : mMaxRotationAngle;  
74.             }  
75.             transformImageBitmap((ImageView) child, t, rotationAngle);  
76.         }  
77.         return true;  
78.     }  
79.   
80.     @Override  
81.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
82.         mCoveflowCenter = getCenterOfCoverflow();  
83.         super.onSizeChanged(w, h, oldw, oldh);  
84.     }  
85.   
86.     private void transformImageBitmap(ImageView child, Transformation t,  
87.             int rotationAngle) {  
88.         mCamera.save();  
89.         final Matrix imageMatrix = t.getMatrix();  
90.         final int imageHeight = child.getLayoutParams().height;  
91.         final int imageWidth = child.getLayoutParams().width;  
92.         final int rotation = Math.abs(rotationAngle);  
93.   
94.         // 在Z轴上正向移动camera的视角，实际效果为放大图片。  
95.         // 如果在Y轴上移动，则图片上下移动；X轴上对应图片左右移动。  
96.         mCamera.translate(0.0f, 0.0f, 100.0f);  
97.   
98.         // As the angle of the view gets less, zoom in  
99.         if (rotation < mMaxRotationAngle) {  
100.             float zoomAmount = (float) (mMaxZoom + (rotation * 1.5));  
101.             mCamera.translate(0.0f, 0.0f, zoomAmount);  
102.         }  
103.   
104.         // 在Y轴上旋转，对应图片竖向向里翻转。  
105.         // 如果在X轴上旋转，则对应图片横向向里翻转。  
106.         mCamera.rotateY(rotationAngle);  
107.         mCamera.getMatrix(imageMatrix);  
108.         imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));  
109.         imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));  
110.         mCamera.restore();  
111.     }  
112. }  

ImageAdapter

[java]  view plain copy

1. import android.content.Context;  
2. import android.content.res.Resources;  
3. import android.graphics.Bitmap;  
4. import android.graphics.Bitmap.Config;  
5. import android.graphics.BitmapFactory;  
6. import android.graphics.Canvas;  
7. import android.graphics.LinearGradient;  
8. import android.graphics.Matrix;  
9. import android.graphics.Paint;  
10. import android.graphics.PorterDuff.Mode;  
11. import android.graphics.PorterDuffXfermode;  
12. import android.graphics.Shader.TileMode;  
13. import android.view.View;  
14. import android.view.ViewGroup;  
15. import android.widget.BaseAdapter;  
16. import android.widget.ImageView;  
17.   
18. public class ImageAdapter extends BaseAdapter {  
19.        
20.     int mGalleryItemBackground;  
21.     private Context mContext;  
22.     private Integer[] mImageIds;  
23.     private ImageView[] mImages;  
24.    
25.     public ImageAdapter(Context c, Integer[] ImageIds) {  
26.         mContext = c;  
27.         mImageIds = ImageIds;  
28.         mImages = new ImageView[mImageIds.length];  
29.     }  
30.    
31.     public boolean createReflectedImages() {  
32.         final int reflectionGap = 4;  
33.         int index = 0;  
34.    
35.         for (int imageId : mImageIds) {  
36.             Bitmap originalImage = BitmapFactory.decodeResource(mContext  
37.                     .getResources(), imageId);  
38.             int width = originalImage.getWidth();  
39.             int height = originalImage.getHeight();  
40.    
41.             Matrix matrix = new Matrix();  
42.             matrix.preScale(1, -1);  
43.             Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,  
44.                     height / 2, width, height / 2, matrix, false);  
45.             Bitmap bitmapWithReflection = Bitmap.createBitmap(width,  
46.                     (height + height / 2), Config.ARGB_8888);  
47.             Canvas canvas = new Canvas(bitmapWithReflection);  
48.             canvas.drawBitmap(originalImage, 0, 0, null);  
49.             Paint deafaultPaint = new Paint();  
50.             canvas.drawRect(0, height, width, height + reflectionGap,  
51.                     deafaultPaint);  
52.             canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);  
53.             Paint paint = new Paint();  
54.             LinearGradient shader = new LinearGradient(0, originalImage  
55.                     .getHeight(), 0, bitmapWithReflection.getHeight()  
56.                     + reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);  
57.             paint.setShader(shader);  
58.             paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));  
59.             canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()  
60.                     + reflectionGap, paint);  
61.             ImageView imageView = new ImageView(mContext);  
62.             imageView.setImageBitmap(bitmapWithReflection);  
63.             imageView.setLayoutParams(new GalleryFlow.LayoutParams(180*2, 240*2));  
64. //            imageView.setLayoutParams(new GalleryFlow.LayoutParams(180*4, 240*4));  
65. //          imageView.setScaleType(ScaleType.MATRIX);  
66.             mImages[index++] = imageView;  
67.         }  
68.         return true;  
69.     }  
70.    
71.     private Resources getResources() {  
72.         // TODO Auto-generated method stub  
73.         return null;  
74.     }  
75.    
76.     public int getCount() {  
77.         return mImageIds.length;  
78.     }  
79.    
80.     public Object getItem(int position) {  
81.         return position;  
82.     }  
83.    
84.     public long getItemId(int position) {  
85.         return position;  
86.     }  
87.    
88.     public View getView(int position, View convertView, ViewGroup parent) {  
89.         return mImages[position];  
90.     }  
91.    
92.     public float getScale(boolean focused, int offset) {  
93.         return Math.max(0, 1.0f / (float) Math.pow(2, Math.abs(offset)));  
94.     }  
95.    
96. }  

activity_02_gallery.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.     <com.mahaochen.app.uisharing.example02.GalleryFlow   
7.         android:layout_width="match_parent"  
8.         android:layout_height="match_parent"  
9.         android:id="@+id/activity_01_galleryFlow"/>  
10.   
11. </LinearLayout>  

 

演示效果截图：