Android Foldinglayout Folding Layout principle and implementation (i)

Reprint please indicate source: http://blog.csdn.net/lmj623565791/article/details/44278417. This article is from: "Zhang Hongyang's Blog"

1. Overview

Inadvertently turned to the foldinglayout introduction of the blog, as well as the GitHub address. Feel very nice, so spent a bit of time to study and write, this blog will take you from the main principle of analysis, step-by-step implementation of our foldinglayout. Of course. Assuming you're capable, you can directly download the code on GitHub to learn.

The blog is basically divided into the following sections:

1, matrix of setpolytopoly use

2. Use gradients and shadows on the picture

3, the preliminary implementation of the Foldinglayout, finished the picture folding display (can control the number of folds, including shadow painting)

4, the introduction of gestures, fingers can be able to foldinglayout folding

5, combined with drawerlayout to achieve fold-type side slip

6, combined with slidingpanelayout to achieve fold-type side slip

OK, paste the following part of the:

Change the map corresponding to the above 3, sister good ~

OK, corresponding to the above 4.

Accordingly the above 5.

Ok. Selected part of the picture, or too much space.

So next, we will follow the order of study down ~ ~ ~

2, matrix of Setpolytopoly use

Want to implement folding. The most important thing is the principle of its core. So the first step we need to understand is how to put a normal display of the picture, so that it can be offset display.

The essence, in fact, lies in the matrix's setpolytopoly approach.

public boolean setpolytopoly (float[] src, int srcindex,  

Simply take a look at the parameters of the method, SRC represents the coordinates before the transformation, DST represents the transformed coordinates, the transformation from SRC to DST, the first point of the transformation can be made by Srcindex and Dstindex, and it is generally possible to set bit 0. Pointcount represents the number of points supported for the converted coordinates. Supports up to 4.

Assuming the ambiguity is OK, here's a simple example to take you through:

Package Com.zhy.sample.folderlayout;import Android.app.activity;import Android.content.context;import Android.graphics.bitmap;import Android.graphics.bitmapfactory;import Android.graphics.canvas;import Android.graphics.matrix;import Android.os.bundle;import Android.view.view;public class MatrixPolyToPolyActivity Extends activity{@Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (New Polytopolyview (This));} Class Polytopolyview extends View{private Bitmap mbitmap;private Matrix mmatrix;public Polytopolyview (context context) { Super (context); Mbitmap = Bitmapfactory.decoderesource (Getresources (), R.drawable.tanyan); Mmatrix = new Matrix (); float[] src = {0, 0,//mbitmap.getwidth (), 0,//mbitmap.getwidth (), Mbitmap.getheight (),//0, Mbitmap.getheight ()};float [] dst = {0, 0,//mbitmap.getwidth (), 100,//mbitmap.getwidth (), Mbitmap.getheight ()-100,//0, Mbitmap.getheight ()};mMat Rix.setpolytopoly (SRC, 0, DST, 0, src.length >> 1);} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas); Canvas.drawbitmap (Mbitmap, Mmatrix, NULL);}}} 

We have written a polytopolyview as the main view of our activity.

In the Polytopolyview. We loaded a picture, initialized our matrix, note the SRC and DST two arrays, SRC is the 4 vertices of the normal case slice. DST makes a slight change to the y-coordinate of the two points on the right side of the picture.

You can mark the position of SRC and DST four points slightly on the paper.

At the end of the day we ondraw the image, the effect is:

Assuming you've drawn four points of DST on paper, you're not a stranger to this result.

To be able to see that we achieved the tilt of the picture through Matrix.setpolytopoly, then introduced into the folding case. Assume folded two times. Do you have any ideas, think about it. No words. Keep looking down.

3. Introduction of Shadows

The fact that the shadows should be done after the initial folding is actually more convenient. But in order to reduce the simplicity of its understanding, we first extract the shadow to say.

Suppose we want to add shadows now, hopefully this:

Can see our left side added a little shadow, how to achieve it?

The main use of lineargradient. Let's add a layer from left to right to a gradient from black to transparent.

public class Matrixpolytopolywithshadowactivity extends activity{@Overrideprotected void OnCreate (Bundle Savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (new Polytopolyview (This));} Class Polytopolyview extends View{private Bitmap mbitmap;private Matrix mmatrix;private Paint mshadowpaint;private Matrix mshadowgradientmatrix;private lineargradient mshadowgradientshader;public Polytopolyview (context context) { Super (context); Mbitmap = Bitmapfactory.decoderesource (Getresources (), R.drawable.tanyan); Mmatrix = new Matrix (); Mshadowpaint = new Paint (); Mshadowpaint.setstyle (style.fill); mshadowgradientshader = new LinearGradient (0, 0, 0.5f, 0, Color.Black, Color.transparent, Tilemode.clamp); Mshadowpaint.setshader (Mshadowgradientshader); Mshadowgradientmatrix = new Matrix (); Mshadowgradientmatrix.setscale (Mbitmap.getwidth (), 1); Mshadowgradientshader.setlocalmatrix (Mshadowgradientmatrix); Mshadowpaint.setalpha ((int) (0.9*255));} @Overrideprotected void OnDraw (canvas canvas) {Super.ondrAW (canvas); Canvas.save (); float[] src =//...; float[] DST =//...; Mmatrix.setpolytopoly (SRC, 0, DST, 0, src.length >> 1); Canvas.concat (Mmatrix); Canvas.drawbitmap (mbitmap, 0, 0,                                                                                                                        NULL);//Draw Shadow Canvas.drawrect (0, 0, mbitmap.getwidth (), Mbitmap.getheight (), mshadowpaint); Canvas.restore ();}}}

Focus on Mshadowpaint,mshadowgradientshader,mshadowgradientmatrix one is a paintbrush. We have set a gradient shader for the brush, and this shader has a number of parameters

New LinearGradient (0, 0, 0.5f, 0,color. BLACK, Color. TRANSPARENT, Tilemode. CLAMP);

Beginning (0. 0), end point (0.5f,0), color from black to transparent, mode clamp. That is, stretching the last pixel.

Here you may ask, this is the 0.5-pixel region set the gradient, incorrect AH. Well. Yes. Continue to look at the next we used Setlocalmatrix (mshadowgradientmatrix);

Mshadowgradientmatrix and coordinates are enlarged by Mbitmap. GetWidth () times. This means that the area where the gradient is now set is (0.5f*mbitmap. getwidth (), 0) The size of the half-sheet. What about the second half of the picture?

The latter half of the application clamp mode, stretching transparent.

About shader, Setlocalmatrix and other use methods can also be used: Android bitmapshader real-life realization of round, rounded pictures

4, the initial realization of folding

Understanding of the principle and the drawing of Shadows. The next step is to learn to really fold. Our goal effect is:

Sister folded into 8 parts, and the scope of the shadow is: each sink to the left and right sides, the left side of the black translucent cover. A short distance from the right side of the black to the transparent shadow (everyone can look at it carefully).

Now in fact everyone and will simply tilt the picture and join the shadow, then the only difficulty is how to divide a picture into very much faster, I believe that each piece of folding everyone.

In fact we are able to draw the graph multiple times. For example, the first draw is tilted downward, and the second draws the net tilt; This is similar to our implementation of Title 2, and only requires the use of setpolytopoly.

Then draw multiple times. Each display is definitely not an entire picture, for example, for the first time. I just want to show the first piece, so we need to cliprect the match. Should and the Secret ~ ~ ~

Package Com.zhy.sample.folderlayout;import Android.app.activity;import Android.content.context;import Android.graphics.bitmap;import Android.graphics.bitmapfactory;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.lineargradient;import Android.graphics.matrix;import Android.graphics.paint;import Android.graphics.paint.style;import Android.graphics.shader.tilemode;import Android.os.bundle;import Android.view.view;public class Simpleuseactivity extends activity{@Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (new Polytopolyview (This));} Class Polytopolyview extends view{private static final int num_of_point = 8;/** * The total width of the picture after folding */private int mtranslatedis;/ * * The total width after folding is proportional to the original width */private float mfactor = 0.8f;/** * Number of folding blocks */private int mnumoffolds = 8;private matrix[] Mmatrices = new Matrix[mnumoffolds];p rivate Bitmap mbitmap;/** * Draw black Transparent area */private paint msolidpaint;/** * Draw Shadow */private paint MShadowpaint;private Matrix mshadowgradientmatrix;private lineargradient mshadowgradientshader;/*** * The width of each block */ private int mflodwidth;/** * when folded. Width of each block */private int mtranslatedisperflod;public Polytopolyview (context context) {super (context); Mbitmap = Bitmapfactory.decoderesource (Getresources (), R.drawable.tanyan);//Total width after folding Mtranslatedis = (int) (Mbitmap.getwidth () * mfactor);//The width of each block mflodwidth = Mbitmap.getwidth ()/mnumoffolds;//folded, width of each block Mtranslatedisperflod = Mtranslatedis/ mnumoffolds;//Initialize matrixfor (int i = 0; i < Mnumoffolds; i++) {mmatrices[i] = new Matrix ();}  Msolidpaint = new Paint (), int alpha = (int) (255 * mfactor * 0.8f); Msolidpaint.setcolor (Color.argb ((int) (alpha*0.8f), 0, 0, 0)); mshadowpaint = new Paint (); Mshadowpaint.setstyle (style.fill); mshadowgradientshader = new LinearGradient (0, 0, 0.5f, 0,color.black, Color.transparent, Tilemode.clamp); Mshadowpaint.setshader (Mshadowgradientshader); Mshadowgradientmatrix = new Matrix (); Mshadowgradientmatrix.setscale (mflodwidth, 1); mShAdowgradientshader.setlocalmatrix (Mshadowgradientmatrix); Mshadowpaint.setalpha (alpha);//The height at which the longitudinal axis is reduced. Use the Pythagorean theorem to calculate the int depth = (int) math.sqrt (mflodwidth * mflodwidth-mtranslatedisperflod * mtranslatedisperflod)/2;//conversion Point float[ ] src = new float[num_of_point];float[] DST = new float[num_of_point];/** * Each block of the original. Corresponding folding each block, the direction of the upper left, upper right, bottom right, bottom left, we draw on the paper */for (int i = 0; i < Mnumoffolds; i++) {Src[0] = i * mflodwidth;src[1] = 0;src[2] =  Src[0] + mflodwidth;src[3] = 0;src[4] = src[2];src[5] = Mbitmap.getheight (); src[6] = src[0];src[7] = Src[5];boolean IsEven = i% 2 = = 0;dst[0] = i * mtranslatedisperflod;dst[1] = IsEven? 0:DEPTH;DST[2] = dst[0] + mtranslatedisperflod;dst[3] = IsEven? DEPTH:0;DST[4] = dst[2];d st[5] = IsEven? Mbitmap.getheight ()-Depth:mBitmap.getHeight ();d st[6] = dst[0];d st[7] = IsEven? Mbitmap.getheight (): Mbitmap.getheight ()-Depth;//setpolytopolymmatrices[i].setpolytopoly (src, 0, DST, 0, Src.length >> 1);}} @Overrideprotected void OnDraw (canvas canvas) {Super.ondraw (CanvAS);//Draw mnumoffolds times for (int i = 0; i < Mnumoffolds; i++) {canvas.save ();//Apply Matrix to Canvascanvas.concat (mmatrices[i ]);//control the size of the display canvas.cliprect (mflodwidth * I, 0, mflodwidth * i + mflodwidth,mbitmap.getheight ());// Draw the picture Canvas.drawbitmap (mbitmap, 0, 0, NULL);//move to Draw Shadow Canvas.translate (Mflodwidth * i, 0); if (i% 2 = = 0) {//Draw black cover Canvas.dra Wrect (0, 0, Mflodwidth, Mbitmap.getheight (), msolidpaint);} else{//Draw Shadow Canvas.drawrect (0, 0, Mflodwidth, Mbitmap.getheight (), mshadowpaint);} Canvas.restore ();}}}

Simply explain the part of the shadow that is drawn without the tube. In fact, folding is:

1, initialize the conversion point. The gaze here speaks very clearly. It's best to draw on the paper and mark each variable.

2, for Matrix.setpolytopoly

3. Use the matrix when drawing. and Cliprect Control display area (this area is also very easy, the first piece of the original image to the last piece), it is best to draw bitmap.

Shadow Here you can change a bright point of the picture to see ~ ~

Well, because of the space, the rest will continue in the next article, and the next one will show how to fold the simple picture into a folding effect on all controls within a layout, as well as introducing gestures,

Combine with drawerlayout and so on to the side slip.

For similar effects. Be sure to take out a pen to draw a picture. Otherwise it is very difficult to clarify.

Source code: Download

Public number please scan (First time notice blog, video, etc.):

Android Foldinglayout Folding Layout principle and implementation (i)