Android uses gallery to implement 3D albums (with +demo source code) _android

Today because to do a set boot screen function, the main is to allow users to set up their own screen, the application layer needs to do to allow users to choose the boot screen image function. So you need to do a simple picture browsing selection program. Finally, Gallery is selected as the basic control. Add some flashy elements to make a 3D sliding effect. Here is a demo example screenshot:

This effect on the Internet has been a lot of people to do it, but this time need to use, so I also practiced a bit (here's an example I also based on some information on the Internet to write). Deliberately found a few beautiful pictures for everyone to raise eye-pleasing, O (∩_∩) o ha! Here is a brief description of some of the key code that needs to be done by a friend of the thing to look at. This article is a practical article, theoretical analysis is not much.

1. Heavy Duty Gallery Class
Because of the need to add reflection and 3D switch effect, so we need to overload the gallery class, there are two methods we need to rewrite, one is onsizechanged (), the other is getchildstatictransformation (). Let's look at what onsizechanged () needs to do.

Copy Code code as follows:

protected void onsizechanged (int w, int h, int oldw, int oldh)
{
To override the center of a calculation rotation
Mcoveflowcenter = Getcenterofcoverflow ();
Super.onsizechanged (W, H, OLDW, OLDH);
}

The main thing to do above is to recalculate the center of rotation when changing the size of a sliding switch. When the picture position is computed, it is recalculated.

Copy Code code as follows:

Protected Boolean getchildstatictransformation (View Child, Transformation trans)
{
The center point 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)
{
Right in the middle of the Childview
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;
}
The image is processed according to the offset angle, which appears to have a different effect.
Transformimagebitmap ((ImageView) Child, trans, rotationangle);
}

return true;
}

The above is heavy load gallery, need to pay attention to deal with things, in fact, the main is to do graphic changes, the picture inside the image oblique display is here to deal with the results, the purpose is to make people look like three-dimensional.

2. Write Adapter Adapter
Many of the controls we use involve adapters, which is a middleware used to bind data sources and target controls. Here we need to overload the Baseadapter as our gallery adapter. Mainly processing source image, add reflection, generate new data source picture.

Copy Code code 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");
Get the original picture
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 picture data, save memory
Originalimage.recycle ();

int mwidth = Minibitmap.getwidth ();
int mheight = Minibitmap.getheight ();
Matrix matrix = new Matrix ();
Image matrix Transformation (reflection from lower part to top)
Matrix.prescale (1,-1);
Intercept the lower part of the original
Bitmap reflectionimage = Bitmap.createbitmap (minibitmap, 0, MHEIGHT/2, mwidth, MHEIGHT/2, Matrix, false);
Create a reflection picture (height is original 3/2)
Bitmap bitmapwithreflection = Bitmap.createbitmap (mwidth, Mheight + mheight/2), config.argb_8888);
Draw Reflection (original image + spacing + reflection)
Canvas Canvas = new Canvas (bitmapwithreflection);
Drawing artwork
Canvas.drawbitmap (minibitmap, 0, 0, NULL);
Paint Paint = new Paint ();
Draw the spacing between the original and the reflection
Canvas.drawrect (0, Mheight, mwidth, Mheight + reflectiongap, paint);
Draw a reflection of a picture
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);
Shadow Mask Effect
Paint.setxfermode (New Porterduffxfermode (mode.dst_in));
Draw Shadow Effect of reflection
Canvas.drawrect (0, Mheight, Mwidth, bitmapwithreflection.getheight () + reflectiongap, paint);
ImageView ImageView = new ImageView (mcontext);
Set up a reflection picture
Imageview.setimagebitmap (bitmapwithreflection);
Imageview.setlayoutparams (new Galleryview.layoutparams (int) (width * scale),
(int) (Mheight * 3/2.0 + reflectiongap));
Imageview.setscaletype (Scaletype.matrix);
mimages[index++] = ImageView;
}
return true;
}

The above is actually a picture processing process, the main thing to do is to generate a reflection, the effect of the image underneath there is a reflection. is to use the above algorithm to generate. When we add a picture to the adapter, we will process the original image of the adapter and add the reflection effect. This we can call the processing when the picture is initialized, the specific code can see the code relation inside the demo.

The concrete picture slides the process, gallery will help us to handle well, we want to do actually is provides the special effects the picture data source, as well as handles the 3D display the change effect, finally will provide the view as the display image to gallery uses to display.

Today is mainly about how to implement the gallery 3D display switch, the demo code is based on some of the online off-the-shelf results, thanks to these developers to share the results. The following is a demo download, not clear to download the demo, run to see the effect and then analyze the code. The code is not much, and it's not very complicated.

Gallery3d Example code: Click to download