[Android UI] case 01 Cover Flow3D (Gallery + BaseAdapter) and 01coverflow3d

[Android UI] case 01 Cover Flow3D (Gallery + BaseAdapter) and 01coverflow3d

This example describes how to implement CoverFlow3D. First, we will introduce Cover Flow. Cover Flow is Apple's first method of displaying the covers of multiple songs on a 3D interface.

This case is taken from network routing. Finally, although the effects of different machines are different, the results are indeed excellent.
[For more information, see http://blog.csdn.net/mahoking]
The demo project in this case contains Activity (CoverFlowActivity), GalleryFlow (GalleryFlow), BaseAdapter (ImageAdapter), and layout file activity_02_gallery.xml.

 

CoverFlowActivity

import android.app.Activity;import android.os.Bundle;public class CoverFlowActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState); setContentView(R.layout.activity_02_gallery);Integer[] images = { R.drawable.image01, R.drawable.image02,R.drawable.image03};ImageAdapter adapter = new ImageAdapter(this, images);adapter.createReflectedImages();GalleryFlow galleryFlow = (GalleryFlow) findViewById(R.id.activity_01_galleryFlow);galleryFlow.setAdapter(adapter);}}

Gallery is an android Image Browsing component (not just an image, you can use an adapter). The Chinese meaning of Gallery is also the meaning of the Gallery, which means to arrange the image in a row and then slide it manually. This article is just an introduction. If you want to learn more about Gallery, you need to keep yourself updated.

GalleryFlow gallery continuously calls the getChildStaticTransformation method when dragging an image. In this method, use Camera to rotate the Z axis.

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; import android. widget. imageView; public class GalleryFlow extends Gallery {private Camera mCamera = new Camera (); private int mMaxRotationAngle = 60; private int mMaxZoom =-120; 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);} public Int getMaxRotationAngle () {return mMaxRotationAngle;} public void setMaxRotationAngle (int maxRotationAngle) {mMaxRotationAngle = maxRotationAngle;} public int getMaxZoom () {return mMaxZoom;} public void setMaxZoom (int maxZoom) {mMaxZoom = maxZoom;} private int getCenterOfCoverflow () {return (getWidth ()-getPaddingLeft ()-getPaddingRight ()/2 + getPaddingLeft ();} private static int getCenterOfView (V Iew view) {return view. getLeft () + view. getWidth ()/2 ;}@ Overrideprotected 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);} e Lse {rotationAngle = (int) (float) (mCoveflowCenter-childCenter)/childWidth) * mMaxRotationAngle); if (Math. abs (rotationAngle)> mMaxRotationAngle) {rotationAngle = (rotationAngle <0 )? -MMaxRotationAngle: mMaxRotationAngle;} transformImageBitmap (ImageView) child, t, rotationAngle);} return true ;}@ Overrideprotected void onSizeChanged (int w, int h, int oldw, int oldh) {mCoveflowCenter = getCenterOfCoverflow (); super. onSizeChanged (w, h, oldw, oldh);} private void transformImageBitmap (ImageView child, Transformation t, int rotationAngle) {mCamera. save (); final Matrix imageMatrix = t. getM Atrix (); final int imageHeight = child. getLayoutParams (). height; final int imageWidth = child. getLayoutParams (). width; final int rotation = Math. abs (rotationAngle); // forward the camera angle on the Z axis. The actual effect is to enlarge the image. // If the image is moved on the Y axis, the image is moved up and down; on the X axis, the image is moved left and right. MCamera. translate (0.0f, 0.0f, 1001_f); // As the angle of the view gets less, zoom inif (rotation <mMaxRotationAngle) {float zoomAmount = (float) (mMaxZoom + (rotation * 1.5); mCamera. translate (0.0f, 0.0f, zoomAmount);} // rotate on the Y axis, and flip the corresponding image vertically to the inside. // If the image is rotated on the X axis, the image is reversed horizontally. MCamera. rotateY (rotationAngle); mCamera. getMatrix (imageMatrix); imageMatrix. preTranslate (-(imageWidth/2),-(imageHeight/2); imageMatrix. postTranslate (imageWidth/2), (imageHeight/2); mCamera. restore ();}}

ImageAdapter

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.PorterDuff.Mode;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 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() {        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();             Matrix matrix = new Matrix();            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);            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 shader = new LinearGradient(0, originalImage                    .getHeight(), 0, bitmapWithReflection.getHeight()                    + reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);            paint.setShader(shader);            paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));            canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()                    + reflectionGap, paint);            ImageView imageView = new ImageView(mContext);            imageView.setImageBitmap(bitmapWithReflection);            imageView.setLayoutParams(new GalleryFlow.LayoutParams(180*2, 240*2));//            imageView.setLayoutParams(new GalleryFlow.LayoutParams(180*4, 240*4));//          imageView.setScaleType(ScaleType.MATRIX);            mImages[index++] = imageView;        }        return true;    }     private Resources getResources() {        // TODO Auto-generated method stub        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)));    } }

Activity_02_gallery.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <com.mahaochen.app.uisharing.example02.GalleryFlow         android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/activity_01_galleryFlow"/></LinearLayout>

 

Demo effect:

 

 

For some problems that android inherits the BaseAdapter class, this program is used to drag and drop an image, that is, Gallery.

Because your getCount () returns mImageIds. length is 5;
Therefore, getView (int position,...) is automatically called five times. Generates 5 views. These five views are the five views you see in Galley.
The first call, position = 0.
Every second call, position = 1,
...
Last time, position = 4.
Write imageview. setImageResource (mImageIds [position]) in your getView (int position,...) method;
Because each time the position is different, you can place your five images in sequence.