伪3D图片浏览效果

//////////////////

/**
 * 仅仅实现了图片的倒影效果还不够，
 * 因为在coverflow中图片切换是有旋转和缩放效果的，
 * 而自带的gallery中并没有实现。因此，我们扩展自带的gallery，
 * 实现自己的galleryflow。
 * 在原gallery类中，
 * 提供了一个方法getChildStaticTransformation()以实现对图片的变换。
 * 我们通过覆写这个方法并在其中调用自定义的
 * transformImageBitmap(“每个图片与gallery中心的距离”)方法，
 * ，即可实现每个图片做相应的旋转和缩放。其中使用了camera和matrix用于视图变换。
 * 具体可参考代码注释。*/
@SuppressWarnings("deprecation")
public class GalleryFlow extends Gallery {
  /**
     * Graphics Camera used for transforming the matrix of ImageViews
     */
    private Camera mCamera = new Camera();

    /**
     * The maximum angle the Child ImageView will be rotated by
     */
    private int mMaxRotationAngle = 60;

    /**
     * The maximum zoom on the centre Child
     */
    private int mMaxZoom = -120;

    /**
     * The Centre of the Coverflow
     */
    private int mCoveflowCenter;

    //
public GalleryFlow(Context context) {
        super(context);
        this.setStaticTransformationsEnabled(true);
}

public GalleryFlow(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.setStaticTransformationsEnabled(true);
}

public GalleryFlow(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        this.setStaticTransformationsEnabled(true);
}
    //
/**
 * Get the max rotational angle of the image
 *
 * @return the mMaxRotationAngle
 */
public int getMaxRotationAngle() {
        return mMaxRotationAngle;
}

/**
 * Set the max rotational angle of each image
 *
 * @param maxRotationAngle
 *            the mMaxRotationAngle to set
 */
public void setMaxRotationAngle(int maxRotationAngle) {
        mMaxRotationAngle = maxRotationAngle;
}

/**
 * Get the Max zoom of the centre image
 *
 * @return the mMaxZoom
 */
public int getMaxZoom() {
        return mMaxZoom;
}

/**
 * Set the max zoom of the centre image
 *
 * @param maxZoom
 *            the mMaxZoom to set
 */
public void setMaxZoom(int maxZoom) {
        mMaxZoom = maxZoom;
}

/**
 * Get the Centre of the Coverflow
 *
 * @return The centre of this Coverflow.
 */
private int getCenterOfCoverflow() {
        return (getWidth() - getPaddingLeft() - getPaddingRight()) / 2
                        + getPaddingLeft();
}

/**
 * Get the Centre of the View
 *
 * @return The centre of the given view.
 */
private static int getCenterOfView(View view) {
        return view.getLeft() + view.getWidth() / 2;
}

/**
 * {@inheritDoc}
 *
 * @see #setStaticTransformationsEnabled(boolean)
 */
protected boolean getChildStaticTransformation(View child, Transformation t) {

        final int childCenter = getCenterOfView(child);
        final int childWidth = child.getWidth();
        int rotationAngle = 0;

        t.clear();
        t.setTransformationType(Transformation.TYPE_MATRIX);

        if (childCenter == mCoveflowCenter) {
                transformImageBitmap((ImageView) child, t, 0);
        } else {
                rotationAngle = (int) (((float) (mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle);
                if (Math.abs(rotationAngle) > mMaxRotationAngle) {
                        rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle
                                        : mMaxRotationAngle;
                }
                transformImageBitmap((ImageView) child, t, rotationAngle);
        }

        return true;
}

/**
 * This is called during layout when the size of this view has changed. If
 * you were just added to the view hierarchy, you're called with the old
 * values of 0.
 *
 * @param w
 *            Current width of this view.
 * @param h
 *            Current height of this view.
 * @param oldw
 *            Old width of this view.
 * @param oldh
 *            Old height of this view.
 */
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        mCoveflowCenter = getCenterOfCoverflow();
        super.onSizeChanged(w, h, oldw, oldh);
}

/**
 * Transform the Image Bitmap by the Angle passed
 *
 * @param imageView
 *            ImageView the ImageView whose bitmap we want to rotate
 * @param t
 *            transformation
 * @param rotationAngle
 *            the Angle by which to rotate the Bitmap
 */
private void transformImageBitmap(ImageView 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);

        // 在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) {
                float zoomAmount = (float) (mMaxZoom + (rotation * 1.5));
                mCamera.translate(0.0f, 0.0f, zoomAmount);
        }

        // 在Y轴上旋转，对应图片竖向向里翻转。
        // 如果在X轴上旋转，则对应图片横向向里翻转。
        mCamera.rotateY(rotationAngle);
        mCamera.getMatrix(imageMatrix);
        //
        //个人的理解如下：
//        preTranslate相当于在对图像进行任何矩阵变换前先进行preTranslate，postTranslate相反，进行所有变换后再执行postTranlate。
//        这俩句的意思是：在做任何变换前，先将整个图像从图像的中心点移动到原点（(0,0)点），执行变换完毕后再将图像从原点移动到之前的中心点。
//        如果不加这俩句，任何变换将以图像的原点为变换中心点，加了之后，任何变换都将以图像的中心点为变换中心点。
//        举个例子，对图像进行旋转，需要俩个参数：一个是旋转的角度，另一个是旋转中心的坐标。旋转中心的坐标影响旋转的效果。这个能明白吗？你拿一根棍子，拿着棍子的一端进行旋转和拿在棍子中间旋转，是不一样的。preTranslate和postTranslate执行后对图像本身不会有影响，影响的是对图像进行变换时的旋转轴。
//        说了这么多有点绕，其实就是矩阵变换的知识。
        //
        imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));
        imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));
        mCamera.restore();
}
   
}

///////////////////////////////////////

 

/**
 * 要使用gallery，我们必须首先给其指定一个adapter。
 * 在这里，我们实现了一个自定义的ImageAdapter，
 * 为图片制作倒影效果。传入参数为context和
 * 程序内drawable中的图片ID数组。
 * 之后调用其中的createReflectedImages()
 * 方法分别创造每一个图像的倒影效果，生成对应的ImageView数组，
 * 最后在getView()中返回。*/
public class ImageAdapter extends BaseAdapter {
 //
 int mGalleryItemBackground;
 private Context mContext;
 private Integer[] mImageIds ;
 private ImageView[] mImages;
 
 //
 public ImageAdapter(Context c, Integer[] ImageIds) {
  mContext = c;
  mImageIds = ImageIds;
  mImages = new ImageView[mImageIds.length];
  }
 //
 public boolean createReflectedImages() {
  // The gap we want between the reflection and the original image
  final int reflectionGap = 4;

  int index = 0;
  for (int imageId : mImageIds) {
  Bitmap originalImage = BitmapFactory.decodeResource(
  mContext.getResources(), imageId);
  int width = originalImage.getWidth();
  int height = originalImage.getHeight();

  // This will not scale but will flip on the Y axis
  Matrix matrix = new Matrix();
  matrix.preScale(1, -1);

  // Create a Bitmap with the flip matrix applied to it.
  // We only want the bottom half of the image
  Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,
  height / 2, width, height / 2, matrix, false);

  // Create a new bitmap with same width but taller to fit
  // reflection
  Bitmap bitmapWithReflection = Bitmap.createBitmap(width,
  (height + height / 2), Config.ARGB_8888);

  // Create a new Canvas with the bitmap that's big enough for
  // the image plus gap plus reflection
  Canvas canvas = new Canvas(bitmapWithReflection);
  // Draw in the original image
  canvas.drawBitmap(originalImage, 0, 0, null);
  // Draw in the gap
  Paint deafaultPaint = new Paint();
  canvas.drawRect(0, height, width, height + reflectionGap,
  deafaultPaint);
  // Draw in the reflection
  canvas.drawBitmap(reflectionImage, 0, height + reflectionGap,
  null);

  // Create a shader that is a linear gradient that covers the
  // reflection
  Paint paint = new Paint();
  LinearGradient shader = new LinearGradient(0,
  originalImage.getHeight(), 0,
  bitmapWithReflection.getHeight() + reflectionGap,
  0x70ffffff, 0x00ffffff, TileMode.CLAMP);
  // Set the paint to use this shader (linear gradient)
  paint.setShader(shader);
  // Set the Transfer mode to be porter duff and destination in
  paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
  // Draw a rectangle using the paint with our linear gradient
  canvas.drawRect(0, height, width,
  bitmapWithReflection.getHeight() + reflectionGap, paint);

  ImageView imageView = new ImageView(mContext);
 /////锯齿问题/////
  BitmapDrawable bd = new BitmapDrawable(bitmapWithReflection);
  bd.setAntiAlias(true);  
  //////////  
//  imageView.setImageBitmap(bitmapWithReflection);
  ///锯齿问题//////
  imageView.setImageDrawable(bd);
  
  imageView
  .setLayoutParams(new GalleryFlow.LayoutParams(160, 240));
  // imageView.setScaleType(ScaleType.MATRIX);
  mImages[index++] = imageView;

  }
  return true;
  }
 //
 @Override
 public int getCount() {
  return mImageIds.length;
 }

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

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

 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
  // Use this code if you want to load from resources
  /*
  * ImageView i = new ImageView(mContext);
  * i.setImageResource(mImageIds[position]); i.setLayoutParams(new
  * CoverFlow.LayoutParams(350,350));
  * i.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
  *
  * //Make sure we set anti-aliasing otherwise we get jaggies
  * BitmapDrawable drawable = (BitmapDrawable) i.getDrawable();
  * drawable.setAntiAlias(true); return i;
  */

  return mImages[position];
 }

 //
 /**
 * Returns the size (0.0f to 1.0f) of the views depending on the
 * 'offset' to the center.
 */
 public float getScale(boolean focused, int offset) {
 /* Formula: 1 / (2 ^ offset) */
 return Math.max(0, 1.0f / (float) Math.pow(2, Math.abs(offset)));
 }

 //
 
 
}

////////////////////////////////////////////////

 

public class ImageBiz {
 private ImageDao dao;

 public ImageBiz(Context context) {
  dao = new ImageDao(context);
 }

 /**
  * 查询sd卡上的所有图片信息
  *
  * @return
  */
 public ArrayList<ImageInfo> getImages() {
  return dao.getImages();
 }

 /**
  * 根据图片id 获取图片
  *
  * @param id
  * @return
  */
 public Bitmap getBitmap(int id) {
  return dao.getBitmap(id);
 }

 /**
  * 根据图片的id 获取缩略图
  *
  * @param id
  * @return
  */
 public Bitmap getThumbnail(int id) {
  return dao.getThumbnail(id);
 }
}

/////////////////////////

 

public class ImageDao {
 private ContentResolver cr;

 public ImageDao(Context context) {
  cr = context.getContentResolver();
 }

 /**
  * 查询sd卡上的所有图片信息
  *
  * @return
  */
 public ArrayList<ImageInfo> getImages() {
  ArrayList<ImageInfo> images = null;
  Cursor c = cr.query(Media.EXTERNAL_CONTENT_URI, new String[] {
    Media._ID, Media.TITLE }, null, null, null);
  if (c != null) {
   images = new ArrayList<ImageInfo>();
   while (c.moveToNext()) {
    ImageInfo img = new ImageInfo();
    img.setId(c.getInt(c.getColumnIndex(Media._ID)));
    img.setTitle(c.getString(c.getColumnIndex(Media.TITLE)));

    images.add(img);
   }
   c.close();
  }

  return images;
 }

 /**
  * 根据图片id 获取图片
  *
  * @param id
  * @return
  */
 public Bitmap getBitmap(int id) {
  Uri uri = ContentUris.withAppendedId(Media.EXTERNAL_CONTENT_URI, id);
  try {
   return Media.getBitmap(cr, uri);
  } catch (FileNotFoundException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }

  return null;
 }

 /**
  * 根据图片的id 获取缩略图
  *
  * @param id
  * @return
  */
 public Bitmap getThumbnail(int id) {
  return Thumbnails.getThumbnail(cr, id, Thumbnails.MICRO_KIND, null);
 }
}

//////////////////////////////////

 

public class ImageInfo {
 private int id;
 private String title;

 public int getId() {
  return id;
 }

 public void setId(int id) {
  this.id = id;
 }

 public String getTitle() {
  return title;
 }

 public void setTitle(String title) {
  this.title = title;
 }

}

//////////////////////////////////////

 

public class MainActivity extends Activity {
 ImageView imageView;
 private ImageBiz biz;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  //
//  final Integer[] images = { R.drawable.a, R.drawable.b,
//                R.drawable.c, R.drawable.d, R.drawable.e,
//                R.drawable.f, R.drawable.g, R.drawable.h,
//                R.drawable.i, R.drawable.j, R.drawable.k, R.drawable.l };
  final Integer[]integers= biz.getImages().toArray(new Integer[biz.getImages().size()]);
        ImageAdapter adapter = new ImageAdapter(this, integers);
        adapter.createReflectedImages();

        GalleryFlow gallery = (GalleryFlow) findViewById(R.id.gallery_flow);
        gallery.setAdapter(adapter);
  //
        imageView=(ImageView)findViewById(R.id.imageView);
        gallery.setOnItemSelectedListener(new OnItemSelectedListener() {

   @Override
   public void onItemSelected(AdapterView<?> parent, View view,
     int position, long id) {
    // TODO Auto-generated method stub
    imageView.setImageResource(integers[position]);
   }

   @Override
   public void onNothingSelected(AdapterView<?> parent) {
    // TODO Auto-generated method stub
    
   }
         
         
  });
  //
  
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }

}