step1:新建项目MyGallery3D
step3:扩展Gallery,实现3D效果
step4:图片适配器 MyImageAdapter.java
step5:MyGallery3DActivity.java
step6:AndroidManifest.xml
step7:部署应用到模拟器,查看运行效果
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:部署应用到模拟器,查看运行效果