Android uses Gallery to implement 3D album (with renderings + Demo source code)

Today, I am mainly talking about how to implement 3D display switching of Gallery. Many Demo code is based on some existing online effects. Thanks to the developers who shared the results.

Today, you need to set the boot screen, which allows you to set your boot screen. The application layer needs to enable you to select the boot screen image. Therefore, you need to make a simple picture browsing selection program. Finally, Gallery is selected as the basic control. Some dazzling elements are added for 3D sliding. The following is a Demo:

 

This effect has already been made by many people on the Internet, but it is only used this time, so I have also put it into practice (here I also compile it based on some materials on the Internet ). I specially found several beautiful pictures to raise my eye for everyone! The following is a brief description of some key code. If you need to do this, you can check it out. This article is a practical article with few theoretical analyses.

1. Reload the Gallery class
Because we need to add reflection and 3D switching effects, we need to reload the Gallery class. There are two methods we need to rewrite, one is onSizeChanged (), and the other is getChildStaticTransformation (). Next let's take a look at what onSizeChanged () needs to do.

Copy codeThe Code is as follows:
Protected void onSizeChanged (int w, int h, int oldw, int oldh)
{
// Rewrite the computing rotation center
MCoveflowCenter = getCenterOfCoverflow ();
Super. onSizeChanged (w, h, oldw, oldh );
}

The main task above is to rotate the center of the change when the size is changed and re-calculate the sliding switch. When the image position is calculated below, it is recalculated.

Copy codeThe Code is as follows:
Protected boolean getChildStaticTransformation (View child, Transformation trans)
{
// The center and width of the image
Final int childCenter = getCenterOfView (child );
Final int childWidth = child. getWidth ();
Int rotationAngle = 0;

Trans. clear ();
Trans. setTransformationType (Transformation. TYPE_BOTH); // Both alpha and matrix Transform

If (childCenter = mCoveflowCenter)
{
// ChildView in the middle
TransformImageBitmap (ImageView) child, trans, 0 );
}
Else
{
// ChildView on both sides
RotationAngle = (int) (float) (mCoveflowCenter-childCenter)/childWidth) * mMaxRotationAngle );
If (Math. abs (rotationAngle)> mMaxRotationAngle)
{
RotationAngle = (rotationAngle <0 )? -MMaxRotationAngle: mMaxRotationAngle;
}
// Process the image according to the offset angle, and it looks 3D.
TransformImageBitmap (ImageView) child, trans, rotationAngle );
}

Return true;
}

The above is what you need to pay attention to when reload Gallery. In fact, it is mainly to make graphical changes. The picture in it is displayed in a oblique way, which is the result of processing here. The purpose is to make people look stereoscopic.

2. Compile the Adapter
Many controls involve adapters, which are a middleware used to bind data sources and target controls. Here we need to overload BaseAdapter as our Gallery adapter. It mainly processes the source image and adds the reflection to generate a new data source image.

Copy codeThe Code is as follows:
Public boolean createReflectedForAdapter ()
{
Final int reflectionGap = 4;
Final int Height = 200;
Int index = 0;
For (Map <String, Object> map: list)
{
Integer id = (Integer) map. get ("image ");
// Obtain the original image
Bitmap originalImage = BitmapFactory. decodeResource (mContext. getResources (), id );
Int width = originalImage. getWidth ();
Int height = originalImage. getHeight ();
Float scale = Height/(float) height;

Matrix sMatrix = new Matrix ();
SMatrix. postScale (scale, scale );
Bitmap miniBitmap = Bitmap. createBitmap (originalImage, 0, 0,
OriginalImage. getWidth (), originalImage. getHeight (), sMatrix, true );

// Whether the original image data is used to save memory
OriginalImage. recycle ();

Int mwidth = miniBitmap. getWidth ();
Int mheight = miniBitmap. getHeight ();
Matrix matrix = new Matrix ();
// Image matrix transformation (reflection from low to top)
Matrix. preScale (1,-1 );
// Truncate the lower half of the source Image
Bitmap reflectionImage = Bitmap. createBitmap (miniBitmap, 0, mheight/2, mwidth, mheight/2, matrix, false );
// Create a reflection image (the height is 3/2 of the original image)
Bitmap bitmapWithReflection = Bitmap. createBitmap (mwidth, (mheight + mheight/2), Config. ARGB_8888 );
// Draw a reflection chart (source image + spacing + reflection)
Canvas canvas = new Canvas (bitmapWithReflection );
// Draw the source Image
Canvas. drawBitmap (miniBitmap, 0, 0, null );
Paint paint = new Paint ();
// Draw the distance between the source image and the reflection.
Canvas. drawRect (0, mheight, mwidth, mheight + reflectionGap, paint );
// Draw a reflection chart
Canvas. drawBitmap (reflectionImage, 0, mheight + reflectionGap, null );

Paint = new Paint ();
// Linear gradient effect
LinearGradient shader = new LinearGradient (0, miniBitmap. getHeight (), 0, bitmapWithReflection. getHeight ()
+ ReflectionGap, 0x70ffffff, 0x00ffffff, TileMode. CLAMP );
Paint. setShader (shader );
// Reflection mask effect
Paint. setXfermode (new porterduxfermode (Mode. DST_IN ));
// Draw the shadow effect of the reflection.
Canvas. drawRect (0, mheight, mwidth, bitmapWithReflection. getHeight () + reflectionGap, paint );
ImageView imageView = new ImageView (mContext );
// Sets the image reflection.
ImageView. setImageBitmap (bitmapWithReflection );
ImageView. setLayoutParams (new GalleryView. LayoutParams (int) (width * scale ),
(Int) (mheight x 3/2.0 + reflectionGap )));
ImageView. setScaleType (ScaleType. MATRIX );
MImages [index ++] = imageView;
}
Return true;
}

The above is actually an image processing process. The main thing we do is to generate a reflection, which has a reflection under it. Is generated using the above algorithm. When adding images to the adapter, We will process native images that are suitable for reflection. This can be called during image initialization. For specific code, you can view the code relationship in the Demo.

Gallery will help us deal with the specific image slide process. What we need to do is to provide image data sources with special effects added and to handle changes in 3D display, in the end, View is provided as the display image to Gallery for display.

Today, I am mainly talking about how to implement 3D display switching of Gallery. Many Demo code is based on some existing online effects. Thanks to the developers who shared the results. Below is the Demo download. If you are not clear about it, you can download the Demo, run it to see the effect, and analyze the code. There are not many codes, and it is not very complicated.

 

Gallery3D sample code: Click to download