http://blog.csdn.net/sunboy_2050/article/details/7483169


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

Android 滑动效果进阶篇（六）—— 倒影效果_第1张图片

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


1、倒影绘制

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

倒影原理：

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

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

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

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


倒影实现：

[java] view plain copy print ?
  1. /**反射倒影*/
  2. publicbooleancreateReflectedImages(){
  3. finalintreflectionGap=4;
  4. intindex=0;
  5. for(Map<String,Object>map:list){
  6. Integerid=(Integer)map.get("image");
  7. BitmaporiginalImage=BitmapFactory.decodeResource(mContext.getResources(),id);//获取原始图片
  8. intwidth=originalImage.getWidth();
  9. intheight=originalImage.getHeight();
  11. Matrixmatrix=newMatrix();
  12. matrix.preScale(1,-1);//图片矩阵变换（从低部向顶部的倒影）
  13. BitmapreflectionImage=Bitmap.createBitmap(originalImage,0,height/2,width,height/2,matrix,false);//截取原图下半部分
  14. BitmapbitmapWithReflection=Bitmap.createBitmap(width,(height+height/2),Config.ARGB_8888);//创建倒影图片（高度为原图3/2）
  16. Canvascanvas=newCanvas(bitmapWithReflection);//绘制倒影图（原图+间距+倒影）
  17. canvas.drawBitmap(originalImage,0,0,null);//绘制原图
  18. Paintpaint=newPaint();
  19. canvas.drawRect(0,height,width,height+reflectionGap,paint);//绘制原图与倒影的间距
  20. canvas.drawBitmap(reflectionImage,0,height+reflectionGap,null);//绘制倒影图
  22. paint=newPaint();
  23. LinearGradientshader=newLinearGradient(0,originalImage.getHeight(),0,bitmapWithReflection.getHeight()+reflectionGap,0x70ffffff,0x00ffffff,TileMode.CLAMP);
  24. paint.setShader(shader);//线性渐变效果
  25. paint.setXfermode(newPorterDuffXfermode(Mode.DST_IN));//倒影遮罩效果
  26. canvas.drawRect(0,height,width,bitmapWithReflection.getHeight()+reflectionGap,paint);//绘制倒影的阴影效果
  28. ImageViewimageView=newImageView(mContext);
  29. imageView.setImageBitmap(bitmapWithReflection);//设置倒影图片
  30. imageView.setLayoutParams(newmyGallery.LayoutParams(180,240));
  31. imageView.setScaleType(ScaleType.MATRIX);
  32. mImages[index++]=imageView;
  33. }
  34. returntrue;
  35. }

2、myGallery

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

[java] view plain copy print ?
  1. publicclassmyGalleryextendsGallery{
  3. privateCameramCamera=newCamera();
  4. privateintmMaxRotationAngle=60;//最大旋转角度60
  5. privateintmMaxZoom=-120;
  6. privateintmCoveflowCenter;
  8. publicmyGallery(Contextcontext){
  9. super(context);
  10. this.setStaticTransformationsEnabled(true);
  11. }
  13. publicmyGallery(Contextcontext,AttributeSetattrs){
  14. super(context,attrs);
  15. this.setStaticTransformationsEnabled(true);
  16. }
  18. publicmyGallery(Contextcontext,AttributeSetattrs,intdefStyle){
  19. super(context,attrs,defStyle);
  20. this.setStaticTransformationsEnabled(true);
  21. }
  23. publicintgetMaxRotationAngle(){
  24. returnmMaxRotationAngle;
  25. }
  27. publicvoidsetMaxRotationAngle(intmaxRotationAngle){
  28. mMaxRotationAngle=maxRotationAngle;
  29. }
  31. publicintgetMaxZoom(){
  32. returnmMaxZoom;
  33. }
  35. publicvoidsetMaxZoom(intmaxZoom){
  36. mMaxZoom=maxZoom;
  37. }
  39. /**获取Gallery的中心x*/
  40. privateintgetCenterOfCoverflow(){
  41. return(getWidth()-getPaddingLeft()-getPaddingRight())/2+getPaddingLeft();
  42. }
  44. /**获取View的中心x*/
  45. privatestaticintgetCenterOfView(Viewview){
  46. returnview.getLeft()+view.getWidth()/2;
  47. }
  49. @Override
  50. protectedvoidonSizeChanged(intw,inth,intoldw,intoldh){
  51. mCoveflowCenter=getCenterOfCoverflow();
  52. super.onSizeChanged(w,h,oldw,oldh);
  53. }
  55. @Override
  56. protectedbooleangetChildStaticTransformation(Viewchild,Transformationtrans){
  57. finalintchildCenter=getCenterOfView(child);
  58. finalintchildWidth=child.getWidth();
  59. introtationAngle=0;
  61. trans.clear();
  62. trans.setTransformationType(Transformation.TYPE_BOTH);//alpha和matrix都变换
  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. }
  74. returntrue;
  75. }
  77. privatevoidtransformImageBitmap(ImageViewchild,Transformationtrans,introtationAngle){
  78. mCamera.save();
  80. finalMatriximageMatrix=trans.getMatrix();
  81. finalintimageHeight=child.getLayoutParams().height;
  82. finalintimageWidth=child.getLayoutParams().width;
  83. finalintrotation=Math.abs(rotationAngle);
  85. //在Z轴上正向移动camera的视角，实际效果为放大图片;如果在Y轴上移动，则图片上下移动;X轴上对应图片左右移动。
  86. mCamera.translate(0.0f,0.0f,100.0f);
  88. //Astheangleoftheviewgetsless,zoomin
  89. if(rotation<mMaxRotationAngle){
  90. floatzoomAmount=(float)(mMaxZoom+(rotation*1.5));
  91. mCamera.translate(0.0f,0.0f,zoomAmount);
  92. }
  94. mCamera.rotateY(rotationAngle);//rotationAngle为正，沿y轴向内旋转；为负，沿y轴向外旋转
  96. mCamera.getMatrix(imageMatrix);
  97. imageMatrix.preTranslate(-(imageWidth/2),-(imageHeight/2));
  98. imageMatrix.postTranslate((imageWidth/2),(imageHeight/2));
  100. mCamera.restore();
  101. }
  102. }

3、Activity

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

[java] view plain copy print ?
  1. privatevoidinitRes(){
  2. tvTitle=(TextView)findViewById(R.id.tvTitle);
  3. gallery=(myGallery)findViewById(R.id.mygallery);//获取自定义的myGallery控件
  5. adapter=newImageAdapter(this);
  6. adapter.createReflectedImages();//创建倒影效果
  7. gallery.setAdapter(adapter);
  9. gallery.setOnItemSelectedListener(newOnItemSelectedListener(){//设置选择事件监听
  10. @Override
  11. publicvoidonItemSelected(AdapterView<?>parent,Viewview,intposition,longid){
  12. tvTitle.setText(adapter.titles[position]);
  13. }
  15. @Override
  16. publicvoidonNothingSelected(AdapterView<?>parent){
  17. }
  18. });
  20. gallery.setOnItemClickListener(newOnItemClickListener(){//设置点击事件监听
  21. @Override
  22. publicvoidonItemClick(AdapterView<?>parent,Viewview,intposition,longid){
  23. Toast.makeText(Main.this,"img"+(position+1)+"selected",Toast.LENGTH_SHORT).show();
  24. }
  25. });
  26. }

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

[html] view plain copy print ?
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <RelativeLayoutxmlns: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"/>
  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>


源码下载



参考推荐：

Android实现图片的倒影效果

Android中图片倒影、圆角效果重绘


更多相关文章

  1. 利用多张图片实现动态图
  2. android读取大图片并缓存
  3. Android多媒体学习二：检索Android的图片库，并显示
  4. Android工作学习笔记之图片自适应imageview属性android:scaleTyp
  5. android图片压缩总结
  6. 从网络获取图片，并缓存到SD卡
  7. ionic3 图片选取imagepicker以及camera汉化
  8. Android修改图片颜色-转成灰度图

随机推荐

  1. 关于android图片的传输，android图片传输方
  2. android中发生OOM探究及解决
  3. Unity3D For Android 开发教程【转http:/
  4. Android(安卓)Things学习的一点体验
  5. Android Q (十七) Android Q 行为变更：以
  6. android 图片处理 （滤镜，图片位置）
  7. 报道：Android成为96%的新手机恶意软件的宿
  8. Android(安卓)Studio底边栏选项不见了，如
  9. android App设计的工具＋灵感
  10. Android中Http传递参数json参数请求数据