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

来源：互联网发布：手机版project软件编辑：程序博客网时间：2024/06/07 02:14

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

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

1、倒影绘制

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

倒影原理：

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

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

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

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

倒影实现：

双击代码全选1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/** 反射倒影 */
publicbooleancreateReflectedImages() {     
    finalintreflectionGap = 4;    
    intindex = 0;    
    for(Map<String, Object> map : list) {     
        Integer id = (Integer) map.get("image");    
        Bitmap originalImage = BitmapFactory.decodeResource(mContext.getResources(), id);   // 获取原始图片     
        intwidth = originalImage.getWidth();     
        intheight = originalImage.getHeight();     
          
        Matrix matrix = newMatrix();    
        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);          // 创建倒影图片（高度为原图3/2）     
          
        Canvas canvas = newCanvas(bitmapWithReflection);  // 绘制倒影图（原图 + 间距 + 倒影）     
        canvas.drawBitmap(originalImage,0,0,null);      // 绘制原图     
        Paint paint = newPaint();    
        canvas.drawRect(0, height, width, height + reflectionGap, paint);       // 绘制原图与倒影的间距     
        canvas.drawBitmap(reflectionImage,0, height + reflectionGap, null);   // 绘制倒影图     
          
        paint = newPaint();    
        LinearGradient shader = newLinearGradient(0, originalImage.getHeight(), 0, bitmapWithReflection.getHeight() + reflectionGap, 0x70ffffff,0x00ffffff, TileMode.CLAMP);     
        paint.setShader(shader);   // 线性渐变效果     
        paint.setXfermode(newPorterDuffXfermode(Mode.DST_IN));    // 倒影遮罩效果     
        canvas.drawRect(0, height, width, bitmapWithReflection.getHeight() + reflectionGap, paint);     // 绘制倒影的阴影效果     
          
        ImageView imageView = newImageView(mContext);    
        imageView.setImageBitmap(bitmapWithReflection);    // 设置倒影图片     
        imageView.setLayoutParams(newmyGallery.LayoutParams(180,240));    
        imageView.setScaleType(ScaleType.MATRIX);    
        mImages[index++] = imageView;     
    }    
    returntrue;    
}

2、myGallery

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

双击代码全选1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
publicclassmyGallery extendsGallery {     
          
    privateCamera mCamera = newCamera();    
    privateintmMaxRotationAngle = 60;    // 最大旋转角度 60     
    privateintmMaxZoom = -120;    
    privateintmCoveflowCenter;     
          
    publicmyGallery(Context context) {     
        super(context);    
        this.setStaticTransformationsEnabled(true);    
    }    
          
    publicmyGallery(Context context, AttributeSet attrs) {     
        super(context, attrs);     
        this.setStaticTransformationsEnabled(true);    
    }    
          
    publicmyGallery(Context context, AttributeSet attrs, intdefStyle) {     
        super(context, attrs, defStyle);     
        this.setStaticTransformationsEnabled(true);    
    }    
          
    publicintgetMaxRotationAngle() {     
        returnmMaxRotationAngle;    
    }    
          
    publicvoidsetMaxRotationAngle(intmaxRotationAngle) {     
        mMaxRotationAngle = maxRotationAngle;     
    }    
          
    publicintgetMaxZoom() {     
        returnmMaxZoom;    
    }    
          
    publicvoidsetMaxZoom(intmaxZoom) {     
        mMaxZoom = maxZoom;     
    }    
          
    /** 获取Gallery的中心x */
    privateintgetCenterOfCoverflow() {     
        return(getWidth() - getPaddingLeft() - getPaddingRight()) / 2+ getPaddingLeft();     
    }    
          
    /** 获取View的中心x */
    privatestaticint getCenterOfView(View view) {     
        returnview.getLeft() + view.getWidth() / 2;    
    }    
          
    @Override
    protectedvoidonSizeChanged(intw,inth,intoldw,intoldh) {     
        mCoveflowCenter = getCenterOfCoverflow();     
        super.onSizeChanged(w, h, oldw, oldh);     
    }    
          
    @Override
    protectedbooleangetChildStaticTransformation(View child, Transformation trans) {     
        finalintchildCenter = getCenterOfView(child);     
        finalintchildWidth = child.getWidth();     
        introtationAngle = 0;    
          
        trans.clear();    
        trans.setTransformationType(Transformation.TYPE_BOTH);     // alpha 和 matrix 都变换     
          
        if(childCenter == mCoveflowCenter) {   // 正中间的childView     
            transformImageBitmap((ImageView) child, trans, 0);      
        }else{       // 两侧的childView     
            rotationAngle = (int) ( ( (float) (mCoveflowCenter - childCenter) / childWidth ) * mMaxRotationAngle );     
            if(Math.abs(rotationAngle) > mMaxRotationAngle) {     
                rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle : mMaxRotationAngle;     
            }    
            transformImageBitmap((ImageView) child, trans, rotationAngle);     
        }    
          
        returntrue;    
    }    
          
    privatevoidtransformImageBitmap(ImageView child, Transformation trans, introtationAngle) {     
        mCamera.save();    
                  
        finalMatrix imageMatrix = trans.getMatrix();     
        finalintimageHeight = child.getLayoutParams().height;     
        finalintimageWidth = child.getLayoutParams().width;     
        finalintrotation = Math.abs(rotationAngle);     
          
        // 在Z轴上正向移动camera的视角，实际效果为放大图片; 如果在Y轴上移动，则图片上下移动; X轴上对应图片左右移动。     
        mCamera.translate(0.0f,0.0f,100.0f);    
          
        // As the angle of the view gets less, zoom in     
        if(rotation < mMaxRotationAngle) {     
            floatzoomAmount = (float) (mMaxZoom + (rotation * 1.5));    
            mCamera.translate(0.0f,0.0f, zoomAmount);     
        }    
          
        mCamera.rotateY(rotationAngle);    // rotationAngle 为正，沿y轴向内旋转； 为负，沿y轴向外旋转     
                  
        mCamera.getMatrix(imageMatrix);    
        imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));    
        imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));    
                  
        mCamera.restore();    
    }    
}

3、Activity

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

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

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

双击代码全选1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xmlversion="1.0"encoding="utf-8"?>    
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">    
    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:textSize="16sp"/>    
              
    <com.homer.reflect.myGallery
        android:id="@+id/mygallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tvTitle"
        android:layout_marginTop="10dip"/>    
</RelativeLayout>

源码下载