Androidfoldinglayout Folding Layout principle and implementation (i) (reprint)

The principle and realization of androidfoldinglayout folding layout (i.)

Reprint please indicate source: http://blog.csdn.net/lmj623565791/article/details/44278417, this article 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 took a little time to study and write, this blog will take you from the most basic principles of analysis, step by step to achieve our foldinglayout, of course, if you are competent, 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, the completion of the picture folding display (can control the number of folds, including shadow drawing)

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

5, combined with drawerlayout to achieve folding sliding

6, combined with slidingpanelayout to achieve folding sliding

OK, paste the following part of the:

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

OK, corresponding to the above 4.

Corresponds to the above 5.

OK, select a part of the chart, otherwise too much space.

So next, we're going to go down in order.

2, matrix of Setpolytopoly use

To achieve folding, the most important thing is the principle of its core, then the first step we have to understand is how to put a normal display of the picture, so that it can be offset display.

In fact, the essence lies in the Matrix's Setpolytopoly method.

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, and the transformation from SRC to DST, the first transformation point can be made by Srcindex and Dstindex, and it is possible to set bit 0. The pointcount represents a supported number of points for the converted coordinates, which supports up to 4.

If you don't understand it, 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 Polytopolyview, we load a picture, initialize our matrix, note the SRC and DST two arrays, SRC is the 4 vertices of the normal situation slice. DST modifies the y-coordinate of the two points on the right side of the picture slightly.

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:

If you've already drawn a little more than four DST points on paper, you're not a stranger to this result.

Can see us through the matrix.setpolytopoly to achieve the tilt of the picture, then introduced to the collapse of the case, assuming folding two times, we have ideas, consider, no words, continue to look down.

3. Introduction of Shadows

In fact, the shadow should be achieved after the initial folding, this demonstration is actually more convenient, but in order to reduce the simplicity of its understanding, we first extract the shadow to say.

Let's say we want to add a shadow now, and hopefully this is:

You can see that we have added a little shadow to the left, how to achieve it?

Mainly using LinearGradient, we add a layer from black to transparent from left to right.

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 brush, we set a gradient for the brush shader, the shader parameter is

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

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

Here you might ask, this is a 0.5-pixel area with a gradient, no yes, yes, it goes on we're going to use Setlocalmatrix (mshadowgradientmatrix);

Mshadowgradientmatrix and coordinates are enlarged by Mbitmap. GetWidth (), which means that the area where the gradient is now set is (0.5f*mbitmap. getwidth (), 0) The size of the half image, then the second half of the picture?

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

About shader, Setlocalmatrix and other usages can also be consulted: Android Bitmapshader Real-combat realization of round, rounded pictures

4, the initial realization of folding

After understanding the principle and the drawing of the shadow, the next step is to learn the actual folding, our goal effect is:

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

Now actually everyone and will be simple tilt and add shadow, then the only difficulty is how to divide a picture into a lot of fast, I believe that each piece of folding everyone will.

In fact, we can draw the graph several times, such as the first draw downward tilt, the second draw the net tilt, so it is similar to our implementation of Title 2, only need to use Setpolytopoly.

So many times, every time the display is definitely not an entire picture, such as the first time, I just want to show the first piece, so we also need cliprect cooperation, speaking of this, 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, the 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;//when folded, the width of each block Mtranslatedisperflod = mtranslatedis/mnumoffolds;//initialization 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 of the vertical axis reduction, using the Pythagorean theorem to calculate the int depth = (int) math.sqrt (mflodwidth * mflodwidth-mtranslatedisperflod * mtranslatedisperflod)/2;//conversion point float[] src = new Flo  at[num_of_point];float[] DST = new float[num_of_point];/** * Each block of the original, corresponding to each block after folding, the direction of the upper left, right, bottom right, bottom left, everyone on the paper draw their own */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 ();}}}

The simple explanation, not to draw the shadow of the part, in fact, folding is:

1, initialize the conversion point, here the note is very clear, we'd better draw on the paper, mark each variable.

2, for Matrix.setpolytopoly

3, the use of the matrix when drawing, and Cliprect control display area (this area is also very simple, 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, for space reasons, 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,

and Drawerlayout and so on to apply to the slide.

For a similar effect, be sure to take out a manuscript pen to draw a picture, otherwise it is difficult to understand.

Source: Download

Group number: 429757068

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

Original link This article by Bean John Blog Backup expert remote One click release

Androidfoldinglayout Folding Layout principle and implementation (i) (reprint)