Android slide effect (Part 6)-reflection effect

In the previous article, we introduced how to use animation to rotate pages in 3D animation. Now we will introduce how to implement image reflection first.

This example is implemented by customizing gallery and imageadapter (inherited from baseadapter ).

1. Reflection Rendering

Imageadapter inherits from baseadapter, detailed implementation of visible Android sliding effect (2) -- gallery here focuses on the reflection principle and implementation

Reflection principle:

The reflection effect is mainly composed of the source image + spacing + reflection. The height is about 3/2 of the source image (the source image is 1 and the reflection is 1/2)

The source image is the first image we see.

The gap between the source image and the reflection, for example, reflectiongap = 4;

Reflection: the bottom half of the source image is 1/2 height. The matrix is transformed into matrix. prescale (1,-1); the inverted image is obtained, followed by a linear mask and shadow.

Reflection implementation:

/** Reflection **/<br/> Public Boolean createreflectedimages () {<br/> final int reflectiongap = 4; <br/> int Index = 0; <br/> for (Map <string, Object> map: List) {<br/> integer id = (integer) map. get ("image"); <br/> bitmap originalimage = bitmapfactory. decoderesource (mcontext. getresources (), ID); // obtain the original image <br/> int width = originalimage. getwidth (); <br/> int Height = originalimage. getheight (); </P> <p> matrix = new matrix (); <br/> matrix. prescale (1,-1); // image matrix transformation (reflection from low to top) <br/> bitmap reflectionimage = bitmap. createbitmap (originalimage, 0, height/2, width, height/2, matrix, false); // capture the lower half of the source image <br/> bitmap bitmapwithreflection = bitmap. createbitmap (width, (height + height/2), config. argb_8888); // create a reflection image (the height is 3/2 of the source image) </P> <p> canvas = new canvas (bitmapwithreflection ); // draw the image reflection (source image + spacing + reflection) <br/> canvas. drawbitmap (originalimage, 0, 0, null); // draw the source image <br/> paint = new paint (); <br/> canvas. drawrect (0, height, width, height + reflectiongap, paint); // draw the spacing between the source image and the reflection <br/> canvas. drawbitmap (reflectionimage, 0, height + reflectiongap, null); // draw a reflection chart </P> <p> paint = new paint (); <br/> lineargradient shader = new lineargradient (0, originalimage. getheight (), 0, bitmapwithreflection. getheight () + reflectiongap, 0x70ffffff, 0x00ffffff, tilemode. clamp); <br/> paint. setshader (shader); // linear gradient effect <br/> paint. setxfermode (New porterduduxfermode (mode. dst_in); // shadow mask effect <br/> canvas. drawrect (0, height, width, bitmapwithreflection. getheight () + reflectiongap, paint); // draw the shadow effect of the reflection </P> <p> imageview = new imageview (mcontext); <br/> imageview. setimagebitmap (bitmapwithreflection); // sets the image to be reflected. <br/> imageview. setlayoutparams (New mygallery. layoutparams (180,240); <br/> imageview. setscaletype (scaletype. matrix); <br/> mimages [index ++] = imageview; <br/>}< br/> return true; <br/>}

2. mygallery

Customize gallery to browse and select reflected images

Public class mygallery extends gallery {</P> <p> private camera mcamera = new camera (); <br/> private int mmaxrotationangle = 60; // Maximum Rotation Angle 60 <br/> private int mmaxzoom =-120; <br/> private int mcoveflowcenter; </P> <p> Public mygallery (context) {<br/> super (context); <br/> This. setstatictransformationsenabled (true); <br/>}</P> <p> Public mygallery (context, attributeset attrs) {<br/> super (Co Ntext, attrs); <br/> This. setstatictransformationsenabled (true); <br/>}</P> <p> Public mygallery (context, attributeset attrs, int defstyle) {<br/> super (context, attrs, defstyle); <br/> This. setstatictransformationsenabled (true); <br/>}</P> <p> Public int getmaxrotationangle () {<br/> return mmaxrotationangle; <br/>}</P> <p> Public void setmaxrotationangle (INT maxrotationangle) {<br/> mmaxrotationa Ngle = maxrotationangle; <br/>}</P> <p> Public int getmaxzoom () {<br/> return mmaxzoom; <br/>}</P> <p> Public void setmaxzoom (INT maxzoom) {<br/> mmaxzoom = maxzoom; <br/>}</P> <p>/** obtain the gallery center x */<br/> private int getcenterofcoverflow () {<br/> return (getwidth ()-getpaddingleft ()-getpaddingright ()/2 + getpaddingleft (); <br/>}</P> <p>/** obtain the center X of the view */<br/> Private Static int getcenterofview (Vie W view) {<br/> return view. getleft () + view. getwidth ()/2; <br/>}</P> <p> @ override <br/> protected void onsizechanged (int w, int H, int oldw, int oldh) {<br/> mcoveflowcenter = getcenterofcoverflow (); <br/> super. onsizechanged (W, H, oldw, oldh); <br/>}</P> <p> @ override <br/> protected Boolean getchildstatictransformation (view child, transformation trans) {<br/> final int childcenter = getcenterofview (Child); <br/> final int childwidth = child. getwidth (); <br/> int rotationangle = 0; </P> <p> trans. clear (); <br/> trans. settransformationtype (transformation. type_both); // Both alpha and Matrix Transform </P> <p> If (childcenter = mcoveflowcenter) {// childview in the middle <br/> transformimagebitmap (imageview) child, trans, 0); <br/>} else {// childview on both sides <br/> rotationangle = (INT) (float) (mcoveflowcenter-childcenter) /Childwidth) * mmaxrotationangle); <br/> If (math. Abs (rotationangle)> mmaxrotationangle) {<br/> rotationangle = (rotationangle <0 )? -Mmaxrotationangle: mmaxrotationangle; <br/>}< br/> transformimagebitmap (imageview) Child, trans, rotationangle ); <br/>}</P> <p> return true; <br/>}</P> <p> private void transformimagebitmap (imageview child, transformation trans, int rotationangle) {<br/> mcamera. save (); </P> <p> final matrix imagematrix = trans. getmatrix (); <br/> final int imageheight = child. getlayoutparams (). height; <br/> final int IMA Gewidth = child. getlayoutparams (). width; <br/> final int rotation = math. ABS (rotationangle); </P> <p> // move the camera angle of view forward on the Z axis. The actual effect is to enlarge the image. If it moves on the Y axis, it moves up and down; move the image left and right on the X axis. <Br/> mcamera. translate (0.0f, 0.0f, 1001_f); </P> <p> // as the angle of the view gets less, zoom in <br/> If (rotation <mmaxrotationangle) {<br/> float zoomamount = (float) (mmaxzoom + (rotation * 1.5); <br/> mcamera. translate (0.0f, 0.0f, zoomamount); <br/>}</P> <p> mcamera. rotatey (rotationangle); // The rotationangle is positive and rotates inward along the Y axis. It is negative and rotates outward along the Y axis. </P> <p> mcamera. getmatrix (imagematrix); <br/> imagematrix. pretranslate (-(imagewidth/2),-(imageheight/2); <br/> imagematrix. posttranslate (imagewidth/2), (imageheight/2); </P> <p> mcamera. restore (); <br/>}< br/>}
3. Activity

Activity, mainly implement custom gallery image filling imageadapter, mygallery select event listening, click event listening

Private void initres () {<br/> tvtitle = (textview) findviewbyid (R. id. tvtitle); <br/> gallery = (mygallery) findviewbyid (R. id. mygallery); // obtain the custom mygallery Control </P> <p> adapter = new imageadapter (this); <br/> adapter. createreflectedimages (); // creates a reflection effect <br/> Gallery. setadapter (adapter); </P> <p> Gallery. setonitemselectedlistener (New onitemselectedlistener () {// set the selection event listener <br/> @ override <br/> Public void onitemselec Ted (adapterview <?> Parent, view, int position, long ID) {<br/> tvtitle. settext (adapter. titles [position]); <br/>}</P> <p> @ override <br/> Public void onnothingselected (adapterview <?> Parent) {<br/>}< br/>}); </P> <p> Gallery. setonitemclicklistener (New onitemclicklistener () {// set the Click Event listener <br/> @ override <br/> Public void onitemclick (adapterview <?> Parent, view, int position, long ID) {<br/> toast. maketext (main. this, "IMG" + (Position + 1) + "selected", toast. length_short ). show (); <br/>}< br/>}); <br/>}

In the main. xml layout file, you can customize mygallery to display the image set.

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: Orientation = "vertical"> <br/> <textview <br/> Android: id = "@ + ID/tvtitle" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: layout_centerhorizontal = "true" <br/> Android: textsize = "16sp"/> </P> <p> <COM. homer. reflect. mygallery <br/> Android: Id = "@ + ID/mygallery" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content" <br/> Android: layout_below = "@ ID/tvtitle" <br/> Android: layout_margintop = "10dip"/> <br/> </relativelayout>

Source code download

Reference recommendations:

Android implements image reflection

Image reflection, rounded corner effect re-painting in Android