Android Streaming layout: flexboxlayout usage analysis (i)

Flexboxlayout is Google's official open source one can easily and quickly create a flexible flow layout, its purpose is to use our common layout pattern, help us to achieve a good proportion of the UI area, such as three column layout, can be very simple implementation. It supports very many property settings and is easy to use.

Github:https://github.com/google/flexbox-layout

First introduce the library:

dependencies {    compile ' com.google.android:flexbox:0.2.2 '}

the control is then declared in the layout file:

<com.google.android.flexbox.flexboxlayout    android:layout_width= "match_parent"    android:layout_height = "Wrap_content"    app:flexdirection= "row"    app:flexwrap= "wrap"    app:justifycontent= "Flex_start" >    <textview        style= "@style/textviewstyle"        android:text= "Who am I? "/>    <textview        style=" @style/textviewstyle "        android:text=" Where do I come from? "/>    <textview        style=" @style/textviewstyle "        android:text=" where will I go? "/>    <textview        style=" @style/textviewstyle "        android:text=" to is or not to be, "/>    < TextView        style= "@style/textviewstyle"        android:text= "that's the question."/>    <textview        style= "@style/textviewstyle"        android:text= "hum, mortal! "/></com.google.android.flexbox.flexboxlayout>

Among them, Textviewstyle is as follows:

    <style name= "Textviewstyle" >        <item name= "Android:layout_width" >wrap_content</item>        <item name= "Android:layout_height" >wrap_content</item>        <item name= "Android:background" >@ drawable/round_corner_rect</item>        <item name= "android:gravity" >center</item>        <item Name= "android:padding" >10dp</item>        <item name= "Android:layout_margin" >5dp</item>    </style>

After the code has been set up, the layout displays

I am, what situation, did not show all Ah, also crowded in a row, then temporarily remove a few view to see it, remove the last three and then look at it,

Well, the display is normal, but at first glance, there is nothing ah, actually, this is because you do not set the reason for the attribute, the first is the focus, the property settings. Specific properties, you can view the source code, the following is a look at the different attributes of how to use.

1.flexDirection properties, specific what is the use of first do not know, a look at the effect, the code is as follows:

        <attr name= "Flexdirection" >            <enum name= "row" value= "0"/>            <enum name= "Row_reverse" value= "1"/ >            <enum name= "column" value= "2"/>            <enum name= "Column_reverse" value= "3"/>        </attr >

to set the current Flexdirection property for Flexboxlayout, different values produce the following differences:

(1) When setting the value to row:

No difference from the above figure, the default Flexdirection value is row.

(2) When set to Row_reverse:

Found no, there are changes, the first and third position upside down, explain what, layout started in a different direction

The remaining two are not difficult to understand, as follows:

(3) When set to column:

(4) When set to Column_reverse:

The comparison of the above 4 images shows that the Flexdirection property is set Flexbodlayout to draw the spindle direction,

The row spindle is horizontally oriented, and the direction of drawing is from left to right;

The Row_reverse spindle is horizontally oriented and the direction of drawing is from right to left;

The column spindle is in the vertical direction and the direction is drawn from top to bottom;

The Column_reverse spindle is vertically oriented and draws from bottom to top.

2.flexWrap Properties, the code is as follows

        <attr name= "Flexwrap" >            <enum name= "nowrap" value= "0"/>            <enum name= "wrap" value= "1"/>            <enum name= "Wrap_reverse" value= "2"/>        </attr>

set the current flexboxlayout for theFlexwrapproperties, different values produce the following differences:
When you set this property, you will find that, according to the above layout, no matter what parameters are not changed, why? Is this attribute useless, don't worry, set a few sub-view to try again, at that time not commented out 3, now open it, come in handy.

(1) When setting nowrap, the effect is as follows

There is still a problem with the view display, it seems that the default value of this property is it.

(2) When set to wrap, the effect is as follows

Hey yo I finally have made a bright change in my eyes, change the line, found it?! Ha ha...

(3) When set to Wrap_reverse, look at:

It's changing again! Is that the starting position of the drawing has changed.

The overall understanding of what this property is doing. To be clear is to declare whether flexboxlayout support multiple lines, and nowrap is not supported, the default is this, and the other 2 support multiple lines, just draw the beginning of a different position.

3.justifyContent Zodiac, the code is as follows:

        <attr name= "Justifycontent" >            <enum name= "Flex_start" value= "0"/>            <enum name= "Flex_end" value = "1"/>            <enum name= "center" value= "2"/>            <enum name= "Space_between" value= "3"/>            <enum Name= "Space_around" value= "4"/>        </attr>

for the use of this attribute, there is an official description:

        <!--            omitting Flex-flow property since it's reflected in the parent flex container.            Set the Flexdirection and/or Flexwrap to the parent flex container explicitly if you want to use the            flex-flow Simila R-to-the-web.         -

The general meaning, is to use with flexdirection,flexwrap, do not know right, or see it.

(1) When set to Flex_start:

It's normal, that means the default is this one value.

(2) Flex_end:

Hey, change, run to the left, it seems to be left to Zima

(3) Center:

Well, that's the center display.

(4) Space_between:

This looks like it's aligned on both sides, and that's how it works!

(5) Space_around:

This can be seen as a combination of (3) and (4), centered and spaced at a distance from the edge!

Here, you should be able to understand in general that the function of this property is to adjust the alignment of the child view relative to the parent layout.

4.alignItems Properties: The code is as follows

        <attr name= "Alignitems" >            <enum name= "Flex_start" value= "0"/>            <enum name= "Flex_end" value= "1" />            <enum name= "center" value= "2"/>            <enum name= "Baseline" value= "3"/>            <enum name= " Stretch "value=" 4 "/>        </att

The current property is what to do, but according to the items in the name, it should be related to the sub-view, the following hit look at the effect (in advance, in accordance with the current layout, you will find what this thing, how did not change, it is not, according to my many textual research, This property probably might not work after the parent layout flexboxlayout Setting the value, which is determined by the height.

(1) Flex_start:

As you can see from the diagram, after the height is determined, the rows and rows are spaced and appear to be of equal size, and the starting position of the drawing begins at the top of the entire area.

(2) Flex_end:

It can be said that the opposite of Flex_start is that the position of the drawing starts at the bottom end, that is, the bottom begins to draw, and the rows and rows are spaced and identical.

(3) Center:

This shows that the overall drawing area of the child view is in the center position.

(4) Baseline:

This is the same effect as the Flex_start.

(5) Stretch:

In this case, the height is full, indicating that this value is the meaning, no matter how high your parent layout, all the height of the child view must be the same as you!

With the instructions above, the Alignitems property can be interpreted as setting the row properties, the line interval, the height of the row, and the regional planning of the line drawing.

5.alignContent attributes, the code is as follows:

        <attr name= "Aligncontent" >            <enum name= "Flex_start" value= "0"/>            <enum name= "Flex_end" value= " 1 "/>            <enum name=" center "value=" 2 "/>            <enum name=" Space_between "value=" 3 "/>            <enum Name= "Space_around" value= "4"/>            <enum name= "Stretch" value= "5"/>        </attr>

no wordy, no forcing, direct (note: This property does not seem to beAlignitems Common, may also open the wrong way, can self-verify）

(1)Flex_start:

It's normal, I don't see anything coming!

(2)flex_end:

Something is wrong, the drawing area starts at the bottom and can be seen as drawing the area occupied from the bottom.

(3)Center:

The drawing area occupies the middle position, and we want to be in the core zone.

(4) Space_between:

The entire drawing area is occupied, and the upper and lower cannot be left blank, that is, from start to finish.

(5) Space_around:

Occupy the entire area, left blank, meaning that, keep a bit of position, the rest of you are full.

(6) Stretch:

Occupy the entire area, and the row is high, all rows are filled with the entire parent layout height, simply say, how old are you, how big we are.

The above found that this attribute is for the sub-view of the line of adjustment, that is, the overall adjustment of the fill view.

Summary description:

(1) Flexdirection: Determines how the view is plotted

(2) Flexwrap: Whether to support multi-line display

(3) Justifycontent: Adjust the alignment of the view relative to the parent layout

(4) Alignitems: Child View Drawing method, in addition to stretch the entire value, the rest is calculated according to the formula between travel and row spacing to determine the child view of the drawing

(5) Aligncontent: The setting of the content drawing area.

The above are in the flexdirection= "row" under the cut, which for the case of indeterminate height alignitems and aligncontent No practical significance, bright !

Android Streaming layout: flexboxlayout usage analysis (i)