android之向Gallery中添加倒影3D效果

step1:新建项目MyGallery3D                                            

step2:设计应用的UI界面   /layout/gallery3d.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    >
    <cn.roco.gallery3d.MyGallery3D
    	android:id="@+id/gallery3D"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content"
    	android:layout_centerInParent="true"
    />
</LinearLayout>

step3:扩展Gallery,实现3D效果

MyGallery3D.java

package cn.roco.gallery3d;
import android.content.Context;
import android.graphics.Camera;
import android.graphics.Matrix;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Transformation;
import android.widget.Gallery;

public class MyGallery3D extends Gallery
{
    /**
     * The camera class is used to 3D transformation matrix.
     * 相机类
     */
    private Camera mCamera = new Camera();
    
    /**
     * The max rotation angle.
     * 最大转动角度
     */
    private int mMaxRotationAngle = 45;   
    
    /**
     * The max zoom value (Z axis).
     * 最大缩放值
     */
    private int mMaxZoom = -120;
    
    /**
     * The center of the gallery.
     * 半径值
     */
    private int mCoveflowCenter = 0;
    
    public MyGallery3D(Context context)
    {
    	super(context);
        //支持转换 ,执行getChildStaticTransformation方法
        this.setStaticTransformationsEnabled(true);
    }
    
    public MyGallery3D(Context context, AttributeSet attrs)
    {
        super(context,attrs);
        //支持转换 ,执行getChildStaticTransformation方法
        this.setStaticTransformationsEnabled(true);
    }
    
    public MyGallery3D(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        
        // Enable set transformation.
        this.setStaticTransformationsEnabled(true);
        // Enable set the children drawing order.
        this.setChildrenDrawingOrderEnabled(true);
    }
    
    public int getMaxRotationAngle()
    {
        return mMaxRotationAngle;
    }
    
    public void setMaxRotationAngle(int maxRotationAngle)
    {
        mMaxRotationAngle = maxRotationAngle;
    }
    
    public int getMaxZoom()
    {
        return mMaxZoom;
    }
    
    public void setMaxZoom(int maxZoom)
    {
        mMaxZoom = maxZoom;
    }
    
    @Override
    protected int getChildDrawingOrder(int childCount, int i)
    {
        // Current selected index.
        int selectedIndex = getSelectedItemPosition() - getFirstVisiblePosition();
        if (selectedIndex < 0) 
        {
            return i;
        }
        
        if (i < selectedIndex)
        {
            return i;
        }
        else if (i >= selectedIndex)
        {
            return childCount - 1 - i + selectedIndex;
        }
        else
        {
            return i;
        }
    }
    
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh)
    {
        mCoveflowCenter = getCenterOfCoverflow();
        super.onSizeChanged(w, h, oldw, oldh);
    }
    
    private int getCenterOfView(View view)
    {
        return view.getLeft() + view.getWidth() / 2;
    }
    //控制gallery中每个图片的旋转(重写的gallery中方法)
    @Override
    protected boolean getChildStaticTransformation(View child, Transformation t)
    {
//        super.getChildStaticTransformation(child, t);
        //取得当前子view的半径值
        final int childCenter = getCenterOfView(child);
        final int childWidth  = child.getWidth();
        //旋转角度
        int rotationAngle = 0;
        //重置转换状态
        t.clear();
        //设置转换类型
        t.setTransformationType(Transformation.TYPE_MATRIX);
        
        // If the child is in the center, we do not rotate it.
        //如果图片位于中心位置不需要进行旋转
        if (childCenter == mCoveflowCenter)
        {
            transformImageBitmap(child, t, 0);
        }
        else
        {
            // Calculate the rotation angle.
        	//根据图片在gallery中的位置来计算图片的旋转角度
            rotationAngle = (int)(((float)(mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle);
            
            // Make the angle is not bigger than maximum.
            /*如果旋转角度绝对值大于最大旋转角度返回
            	（-mMaxRotationAngle或mMaxRotationAngle;）*/
            if (Math.abs(rotationAngle) > mMaxRotationAngle)
            {
                rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle : mMaxRotationAngle;
            }
            transformImageBitmap(child, t, rotationAngle);
        }
        return true;
    }
    
    private int getCenterOfCoverflow()
    {
        return (getWidth() - getPaddingLeft() - getPaddingRight()) / 2 + getPaddingLeft();
    }
    
    private void transformImageBitmap(View child, Transformation t, int rotationAngle)
    {
    	//对效果进行保存
        mCamera.save();
        
        final Matrix imageMatrix = t.getMatrix();
        //图片高度
        final int imageHeight = child.getLayoutParams().height;
        //图片宽度
        final int imageWidth  = child.getLayoutParams().width;
        //返回旋转角度的绝对值
        final int rotation    = Math.abs(rotationAngle);
        
        // Zoom on Z axis.
        /**
         * 在Z轴上正向移动camera的视角，实际效果为放大图片。
                              如果在Y轴上移动，则图片上下移动；X轴上对应图片左右移动。
         */
        mCamera.translate(0.0f, 0.0f, 100.0f);
        
        if (rotation < mMaxRotationAngle)
        {
            float zoomAmount = (float)(mMaxZoom + (rotation * 1.5f));
            mCamera.translate(0.0f, 0.0f, zoomAmount);
        }
        
        // Rotate the camera on Y axis.
        /**
         * 在Y轴上旋转，对应图片竖向向里翻转。
                             如果在X轴上旋转，则对应图片横向向里翻转。
         */
        mCamera.rotateY(rotationAngle);
        // Get the matrix from the camera, in fact, the matrix is S (scale) transformation.
        mCamera.getMatrix(imageMatrix);
        
        /***
         *   第一，先在Z轴上平称，其实就是得到一个缩放矩阵变换，我这里简写为 S。
         	  第二，是利用camera这个类来生成matrix，其实mCamera.rotateY就是围绕Y轴旋转。
        	       这里生成了一个旋转矩阵，记为 R 。经过这两步，此时调用mCamera.getMatrix(imageMatrix);
        	      从Camera中得到matrix，此时这个矩阵中包含了S * R。
         * 第三
         * 由于这里涉及到旋转与缩放，缩放操作其实应该是针对Child中点进行了，这里就是作一个平衡操作，
         * 我们必须是先平移，再缩放，再平移回原来位置，所以，我们最终的矩阵变换应该是这样的：
           M = T * （S * R） * T1   （这里在T1表示与T相反）。
         */
        // The matrix final is T2 * S * T1, first translate the center point to (0, 0), 
        // then scale, and then translate the center point to its original point.
        // T * S * T
       
        // (T2 * S) * T1
        imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));
        // S * T1
        imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));
       
        mCamera.restore();
    }
}

step4:图片适配器    MyImageAdapter.java

package cn.roco.gallery3d;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.Shader.TileMode;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

public class MyImageAdapter extends BaseAdapter {
	int mGalleryItemBackground;
	private Context mContext;
	private Integer[] mImageIds;
	private ImageView[] mImages;

	public MyImageAdapter(Context c, Integer[] ImageIds) {
		mContext = c;
		mImageIds = ImageIds;
		mImages = new ImageView[mImageIds.length];
	}

	/**
	 * 创建倒影效果
	 * 
	 * @return
	 */
	public boolean createReflectedImages() {
		// 倒影图和原图之间的距离
		final int reflectionGap = 4;
		int index = 0;
		for (int imageId : mImageIds) {
			// 返回原图解码之后的bitmap对象
			Bitmap originalImage = BitmapFactory.decodeResource(
					mContext.getResources(), imageId);
			int width = originalImage.getWidth();
			int height = originalImage.getHeight();
			// 创建矩阵对象
			Matrix matrix = new Matrix();

			// 指定一个角度以0,0为坐标进行旋转
			// matrix.setRotate(30);

			// 指定矩阵(x轴不变，y轴相反)
			// 1表示放大比例，不放大也不缩小。  
			// -1表示在y轴上相反，即旋转180度
			matrix.preScale(1, -1);
			
			// 将矩阵应用到该原图之中，返回一个宽度不变，高度为原图1/2的倒影位图
			Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,
					height / 2, width, height / 2, matrix, false);

			//创建一个最终效果的图，即源图 + 间隙 + 倒影。
			Bitmap bitmapWithReflection = Bitmap.createBitmap(width, (height
					+ height / 2 + reflectionGap), Config.ARGB_8888);

			// 将上面创建的位图初始化到画布
			Canvas canvas = new Canvas(bitmapWithReflection);
			canvas.drawBitmap(originalImage, 0, 0, null);

			Paint deafaultPaint = new Paint();
			canvas.drawRect(0, height, width, height + reflectionGap,
					deafaultPaint);
			canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);

			Paint paint = new Paint();
			/**创建LinearGradient，从而给定一个由上到下的渐变色。
			 * 参数一:为渐变起初点坐标x位置， 参数二:为y轴位置， 参数三和四:分辨对应渐变终点， 最后参数为平铺方式，
			 * 这里设置为镜像Gradient是基于Shader类，所以我们通过Paint的setShader方法来设置这个渐变
			 */
			LinearGradient shader = new LinearGradient(0,
					originalImage.getHeight(), 0,
					bitmapWithReflection.getHeight() + reflectionGap,
					0x70ffffff, 0x00ffffff, TileMode.MIRROR);
			// 设置阴影
			paint.setShader(shader);
			paint.setXfermode(new PorterDuffXfermode(
					android.graphics.PorterDuff.Mode.DST_IN));
			// 用已经定义好的画笔构建一个矩形阴影渐变效果
			canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()
					+ reflectionGap, paint);

			// 创建一个ImageView用来显示已经画好的bitmapWithReflection
			ImageView imageView = new ImageView(mContext);
			imageView.setImageBitmap(bitmapWithReflection);
			// 设置imageView大小 ，也就是最终显示的图片大小
			imageView.setLayoutParams(new MyGallery3D.LayoutParams(300, 400));
			// imageView.setScaleType(ScaleType.MATRIX);
			mImages[index++] = imageView;
		}
		return true;
	}

	@SuppressWarnings("unused")
	private Resources getResources() {
		return null;
	}

	public int getCount() {
		return mImageIds.length;
	}

	public Object getItem(int position) {
		return position;
	}

	public long getItemId(int position) {
		return position;
	}

	public View getView(int position, View convertView, ViewGroup parent) {
		return mImages[position];
	}

	public float getScale(boolean focused, int offset) {
		return Math.max(0, 1.0f / (float) Math.pow(2, Math.abs(offset)));
	}
}

step5:MyGallery3DActivity.java

package cn.roco.gallery3d;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Toast;
import cn.roco.gallery3d.MyGallery3D;
import cn.roco.gallery3d.MyImageAdapter;

public class MyGallery3DActivity extends Activity {
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		setContentView(R.layout.gallery3d);

		Integer[] images = { R.drawable.beautiful_000,
				R.drawable.beautiful_001, R.drawable.beautiful_002,
				R.drawable.beautiful_003, R.drawable.beautiful_004,
				R.drawable.beautiful_005, R.drawable.beautiful_006,
				R.drawable.beautiful_007, R.drawable.beautiful_008,
				R.drawable.beautiful_009, R.drawable.beautiful_010, };

		MyImageAdapter adapter = new MyImageAdapter(this, images);
		adapter.createReflectedImages();// 创建倒影效果
		MyGallery3D galleryFlow = (MyGallery3D) this
				.findViewById(R.id.gallery3D);
		galleryFlow.setFadingEdgeLength(0);
		galleryFlow.setSpacing(-100); // 图片之间的间距
		galleryFlow.setAdapter(adapter);

		galleryFlow.setOnItemClickListener(new OnItemClickListener() {
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				Toast.makeText(getApplicationContext(),
						String.valueOf(position), Toast.LENGTH_SHORT).show();
			}

		});
		galleryFlow.setSelection(1);
	}
}

step6:AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="cn.roco.gallery3d"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="8" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name="MyGallery3DActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

step7:部署应用到模拟器，查看运行效果