Android 用CoverFlow的效果

我们还是先来看看效果图有多么的好看吧



       此类是从Gallery继承过来的,用法自然也就和Gallery一样了，程序的背景是一个xml陪的渐变背景,具体可以参看另外一篇”渐变背景”的文章。图片的倒影效果是适用了ReflectionImage控件,具体可以参看上一篇博文.

       先看代码吧,看了代码什么都明白了

Java代码：

1. package eoe.view;
   
2. 
   
3. import android.content.Context;
   
4. import android.graphics.Camera;
   
5. import android.graphics.Matrix;
   
6. import android.util.AttributeSet;
   
7. import android.view.View;
   
8. import android.view.animation.Transformation;
   
9. import android.widget.Gallery;
   
10. import android.widget.ImageView;
    
11. 
    
12. public class CoverFlow extends Gallery {
    
13. 
    
14. private Camera mCamera = new Camera();
    
15. private int mMaxRotationAngle = 50;
    
16. private int mMaxZoom = -380;
    
17. private int mCoveflowCenter;
    
18. private boolean mAlphaMode = true;
    
19. private boolean mCircleMode = false;
    
20. 
    
21. public CoverFlow(Context context) {
    
22. super(context);
    
23. this.setStaticTransformationsEnabled(true);
    
24. }
    
25. public CoverFlow(Context context, AttributeSet attrs) {
    
26. super(context, attrs);
    
27. this.setStaticTransformationsEnabled(true);
    
28. }
    
29. public CoverFlow(Context context, AttributeSet attrs, int defStyle) {
    
30. super(context, attrs, defStyle);
    
31. this.setStaticTransformationsEnabled(true);
    
32. }
    
33. public int getMaxRotationAngle() {
    
34. return mMaxRotationAngle;
    
35. }
    
36. public void setMaxRotationAngle(int maxRotationAngle) {
    
37. mMaxRotationAngle = maxRotationAngle;
    
38. }
    
39. public boolean getCircleMode() {
    
40. return mCircleMode;
    
41. }
    
42. public void setCircleMode(boolean isCircle) {
    
43. mCircleMode = isCircle;
    
44. }
    
45. public boolean getAlphaMode() {
    
46. return mAlphaMode;
    
47. }
    
48. public void setAlphaMode(boolean isAlpha) {
    
49. mAlphaMode = isAlpha;
    
50. }
    
51. public int getMaxZoom() {
    
52. return mMaxZoom;
    
53. }
    
54. public void setMaxZoom(int maxZoom) {
    
55. mMaxZoom = maxZoom;
    
56. }
    
57. private int getCenterOfCoverflow() {
    
58. return (getWidth() - getPaddingLeft() - getPaddingRight()) / 2+ getPaddingLeft();
    
59. }
    
60. private static int getCenterOfView(View view) {
    
61. return view.getLeft() + view.getWidth() / 2;
    
62. }
    
63. protected boolean getChildStaticTransformation(View child, Transformation t) {
    
64. final int childCenter = getCenterOfView(child);
    
65. final int childWidth = child.getWidth();
    
66. int rotationAngle = 0;
    
67. t.clear();
    
68. t.setTransformationType(Transformation.TYPE_MATRIX);
    
69. if (childCenter == mCoveflowCenter) {
    
70. transformImageBitmap((ImageView) child, t, 0);
    
71. } else {
    
72. rotationAngle = (int) (((float) (mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle);
    
73. if (Math.abs(rotationAngle) > mMaxRotationAngle) {
    
74. rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle: mMaxRotationAngle;
    
75. }
    
76. transformImageBitmap((ImageView) child, t, rotationAngle);
    
77. }
    
78. return true;
    
79. }
    
80. /**
    
81. * 这就是所谓的在大小的布局时,这一观点已经发生了改变。如果
    
82. * 你只是添加到视图层次,有人叫你旧的观念
    
83. * 价值观为0。
    
84. *
    
85. * @param w
    
86. * Current width of this view.
    
87. * @param h
    
88. * Current height of this view.
    
89. * @param oldw
    
90. * Old width of this view.
    
91. * @param oldh
    
92. * Old height of this view.
    
93. */
    
94. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    
95. mCoveflowCenter = getCenterOfCoverflow();
    
96. super.onSizeChanged(w, h, oldw, oldh);
    
97. }
    
98. /**
    
99. * 把图像位图的角度通过
    
100. *
     
101. * @param imageView
     
102. * ImageView the ImageView whose bitmap we want to rotate
     
103. * @param t
     
104. * transformation
     
105. * @param rotationAngle
     
106. * the Angle by which to rotate the Bitmap
     
107. */
     
108. private void transformImageBitmap(ImageView child, Transformation t,
     
109. int rotationAngle) {
     
110. mCamera.save();
     
111. final Matrix imageMatrix = t.getMatrix();
     
112. final int imageHeight = child.getLayoutParams().height;
     
113. final int imageWidth = child.getLayoutParams().width;
     
114. final int rotation = Math.abs(rotationAngle);
     
115. mCamera.translate(0.0f, 0.0f, 100.0f);
     
116. 
     
117. // 如视图的角度更少,放大
     
118. if (rotation <= mMaxRotationAngle) {
     
119. float zoomAmount = (float) (mMaxZoom + (rotation * 1.5));
     
120. mCamera.translate(0.0f, 0.0f, zoomAmount);
     
121. if (mCircleMode) {
     
122. if (rotation < 40)
     
123. mCamera.translate(0.0f, 155, 0.0f);
     
124. else
     
125. mCamera.translate(0.0f, (255 - rotation * 2.5f), 0.0f);
     
126. }
     
127. if (mAlphaMode) {
     
128. ((ImageView) (child)).setAlpha((int) (255 - rotation * 2.5));
     
129. }
     
130. }
     
131. mCamera.rotateY(rotationAngle);
     
132. mCamera.getMatrix(imageMatrix);
     
133. imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));
     
134. imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));
     
135. mCamera.restore();
     
136. }
     
137. }

复制代码

       这个就是 CoverFlow类,说明几点

       1. 成员函数

       mCamera是用来做类3D效果处理,比如z轴方向上的平移,绕y轴的旋转等
       mMaxRotationAngle是图片绕y轴最大旋转角度,也就是屏幕最边上那两张图片的旋转角度
       mMaxZoom是图片在z轴平移的距离,视觉上看起来就是放大缩小的效果.
       其他的变量都可以无视

       也就是说把这个属性设成 true的时候每次 viewGroup(看Gallery的源码就可以看到它是从 ViewGroup间接继承过来的)在重新画它的 child的时候都会促发 getChildStaticTransformation这个函数,所以我们只需要在这个函数里面去加上旋转和放大的操作就可以了

       其他的 getter和 setter函数都可以无视

Java代码：

1. package eoe.hello;
   
2. 
   
3. 
   
4. import com.hello.R;
   
5. import com.myview.*;
   
6. import android.app.Activity;
   
7. import android.content.Context;
   
8. import android.graphics.drawable.BitmapDrawable;
   
9. import android.os.Bundle;
   
10. import android.view.View;
    
11. import android.view.ViewGroup;
    
12. import android.widget.BaseAdapter;
    
13. import android.widget.ImageView;
    
14. 
    
15. 
    
16. public class HelloAndroid extends Activity {
    
17. /** Called when the activity is first created. */
    
18. @Override
    
19. public void onCreate(Bundle savedInstanceState) {
    
20. super.onCreate(savedInstanceState);
    
21. 
    
22. CoverFlow cf = new CoverFlow(this);
    
23. cf.setBackgroundResource(R.drawable.shape);
    
24. cf.setAdapter(new ImageAdapter(this));
    
25. ImageAdapter imageAdapter = new ImageAdapter(this);
    
26. cf.setAdapter(imageAdapter);
    
27. // cf.setAlphaMode(false);
    
28. // cf.setCircleMode(false);
    
29. // cf.setSelection(3, true);
    
30. cf.setAnimationDuration(1000);
    
31. setContentView(cf);
    
32. }
    
33. 
    
34. public class ImageAdapter extends BaseAdapter {
    
35. int mGalleryItemBackground;
    
36. private Context mContext;
    
37. private Integer[] mImageIds = {
    
38. R.drawable.a,
    
39. R.drawable.b,
    
40. R.drawable.d,
    
41. R.drawable.e,
    
42. R.drawable.c};
    
43. 
    
44. public ImageAdapter(Context c) {
    
45. mContext = c;
    
46. }
    
47. public int getCount() {
    
48. return mImageIds.length;
    
49. }
    
50. public Object getItem(int position) {
    
51. return position;
    
52. }
    
53. public long getItemId(int position) {
    
54. return position;
    
55. }
    
56. public View getView(int position, View convertView, ViewGroup parent) {
    
57. ReflectionImage i = new ReflectionImage(mContext);
    
58. 
    
59. i.setImageResource(mImageIds[position]);
    
60. i.setLayoutParams(new CoverFlow.LayoutParams(96, 76));
    
61. i.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
    
62. // 确保我们设置的抗锯齿否则我们得到jaggies
    
63. BitmapDrawable drawable = (BitmapDrawable) i.getDrawable();
    
64. drawable.setAntiAlias(true);
    
65. return i;
    
66. }
    
67. 
    
68. public float getScale(boolean focused, int offset) {
    
69. return Math.max(0, 1.0f / (float) Math.pow(2, Math.abs(offset)));
    
70. }
    
71. }
    
72. }

复制代码

       BitmapDrawable drawable = (BitmapDrawable) i.getDrawable(); drawable.setAntiAlias(true);是保证图片绕Y旋转了以后不会出现锯齿.