Android 滑动效果进阶篇（六）—— 倒影效果

妖狐艹你老母 2022-08-24 11:08 189阅读 0赞

原文地址：[http://blog.csdn.net/ithomer/article/details/7483169][http_blog.csdn.net_ithomer_article_details_7483169] 作者：[阳光岛主][Link 1]

上篇介绍了使用Animation实现3D动画旋转翻页效果，现在介绍图片倒影实现，先看效果图

![1334997966_3030.png][]

本示例主要通过自定义Gallery和ImageAdapter（继承自BaseAdapter）实现

**1、倒影绘制**

ImageAdapter继承自BaseAdapter，详细实现可见 [Android 滑动效果入门篇（二）—— Gallery][Android _ Gallery] 这里重点介绍倒影原理及实现

倒影原理：

倒影效果是主要由原图+间距+倒影三部分组成，高度大约为原图的3/2（原图为1、倒影为1/2）

原图，就是我们看到了最开始的图片

间距，是原图与倒影之间的间隙，如：reflectionGap = 4;

倒影，是原图下半部分1/2高度，通过矩阵变换matrix.preScale(1, -1); 获取倒立图片，然后再加上线性遮罩和阴影实现

倒影实现：

**\[java\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  /\*\* 反射倒影 \*/  
2.  **public** **boolean** createReflectedImages() \{  
3.      **final** **int** reflectionGap = 4;  
4.      **int** index = 0;  
5.      **for** (Map<String, Object> map : list) \{  
6.          Integer id = (Integer) map.get("image");  
7.          Bitmap originalImage = BitmapFactory.decodeResource(mContext.getResources(), id);   // 获取原始图片  
8.          **int** width = originalImage.getWidth();  
9.          **int** height = originalImage.getHeight();  
10.   
11.         Matrix matrix = **new** Matrix();  
12.         matrix.preScale(1, -1);         // 图片矩阵变换（从低部向顶部的倒影）  
13.         Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0, height/2, width, height/2, matrix, **false**);   // 截取原图下半部分  
14.         Bitmap bitmapWithReflection = Bitmap.createBitmap(width, (height + height / 2), Config.ARGB\_8888);          // 创建倒影图片（高度为原图3/2）  
15.   
16.         Canvas canvas = **new** Canvas(bitmapWithReflection);   // 绘制倒影图（原图 + 间距 + 倒影）  
17.         canvas.drawBitmap(originalImage, 0, 0, **null**);       // 绘制原图  
18.         Paint paint = **new** Paint();  
19.         canvas.drawRect(0, height, width, height + reflectionGap, paint);       // 绘制原图与倒影的间距  
20.         canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, **null**);    // 绘制倒影图  
21.   
22.         paint = **new** Paint();  
23.         LinearGradient shader = **new** LinearGradient(0, originalImage.getHeight(), 0, bitmapWithReflection.getHeight() + reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);  
24.         paint.setShader(shader);    // 线性渐变效果  
25.         paint.setXfermode(**new** PorterDuffXfermode(Mode.DST\_IN));     // 倒影遮罩效果  
26.         canvas.drawRect(0, height, width, bitmapWithReflection.getHeight() + reflectionGap, paint);     // 绘制倒影的阴影效果  
27.   
28.         ImageView imageView = **new** ImageView(mContext);  
29.         imageView.setImageBitmap(bitmapWithReflection);     // 设置倒影图片  
30.         imageView.setLayoutParams(**new** myGallery.LayoutParams(180, 240));  
31.         imageView.setScaleType(ScaleType.MATRIX);  
32.         mImages\[index++\] = imageView;  
33.     \}  
34.     **return** **true**;  
35. \}

2、myGallery

自定义Gallery来实现倒影图片的浏览与选择

**\[java\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

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

3、Activity

Activity中，主要实现自定义Gallery的图片填充ImageAdapter、myGallery选择事件监听、点击事件监听

**\[java\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  **private** **void** initRes()\{  
2.      tvTitle = (TextView) findViewById(R.id.tvTitle);  
3.      gallery = (myGallery) findViewById(R.id.mygallery);     // 获取自定义的myGallery控件  
4.    
5.      adapter = **new** ImageAdapter(**this**);     
6.      adapter.createReflectedImages();    // 创建倒影效果  
7.      gallery.setAdapter(adapter);  
8.        
9.      gallery.setOnItemSelectedListener(**new** OnItemSelectedListener() \{    // 设置选择事件监听  
10.         @Override  
11.         **public** **void** onItemSelected(AdapterView<?> parent, View view, **int** position, **long** id) \{  
12.             tvTitle.setText(adapter.titles\[position\]);  
13.         \}  
14.   
15.         @Override  
16.         **public** **void** onNothingSelected(AdapterView<?> parent) \{  
17.         \}  
18.     \});  
19.   
20.     gallery.setOnItemClickListener(**new** OnItemClickListener() \{          // 设置点击事件监听  
21.         @Override  
22.         **public** **void** onItemClick(AdapterView<?> parent, View view, **int** position, **long** id) \{  
23.             Toast.makeText(Main.**this**, "img " + (position+1) + " selected", Toast.LENGTH\_SHORT).show();  
24.         \}  
25.     \});  
26. \}

main.xml布局文件中，通过实现自定义的myGallery，来显示图片集合

**\[html\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  **<?****xml** version="1.0" encoding="utf-8"**?>**  
2.  **<****RelativeLayout** xmlns:android="http://schemas.android.com/apk/res/android"  
3.      android:layout\_width="fill\_parent"  
4.      android:layout\_height="fill\_parent"  
5.      android:orientation="vertical" **>**  
6.      **<****TextView**  
7.          android:id="@+id/tvTitle"  
8.          android:layout\_width="wrap\_content"  
9.          android:layout\_height="wrap\_content"  
10.         android:layout\_centerHorizontal="true"  
11.         android:textSize="16sp" **/>**  
12.       
13.     **<****com.homer.reflect.myGallery**  
14.         android:id="@+id/mygallery"  
15.         android:layout\_width="fill\_parent"  
16.         android:layout\_height="wrap\_content"  
17.         android:layout\_below="@id/tvTitle"  
18.         android:layout\_marginTop="10dip" **/>**  
19. **</****RelativeLayout****>**

[http_blog.csdn.net_ithomer_article_details_7483169]: http://blog.csdn.net/ithomer/article/details/7483169
[Link 1]: http://my.csdn.net/sunboy_2050
[1334997966_3030.png]: https://img-my.csdn.net/uploads/201204/21/1334997966_3030.png
[Android _ Gallery]: http://blog.csdn.net/sunboy_2050/article/details/7442556
[view plain]: http://blog.csdn.net/ithomer/article/details/7483169#