Android Development Play Flexboxlayout layout

Before this, I have seriously studied the great God of the Android custom ViewGroup real-FlowLayout, according to the idea of the great God wrote a flow layout, all things are difficult people will not be difficult, When you can customize the flow layout, you will feel that this thing is very simple. If you have seen the article, you should know that the custom flow layout is still very troublesome, but Google this year, open source a new container, is this flexboxlayout, if you play the front-end development or play RN, Will think this flexboxlayout is really simple, OK, then we will take a look at the use of this flexboxlayout today! First look at the display effect:

OK, let's see how this stuff is going to come true!

1. Introduction of the Project

Before using, of course, the introduction of the first, Google on GitHub Open source of this control, the address is as follows:

Https://github.com/google/flexbox-layout

OK, the following methods are introduced in the project:

Add the following line to the module's Gradle file:

Compile ' com.google.android:flexbox:0.2.3 '

The version number is the most recent version number at the time this article was published.

It can be used after the introduction.

2. Basic usage

According to our demo on GitHub, we can see that flexboxlayout only needs to wrap up our child controls in the process of using the container, and the main layout file is as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><relativelayout xmlns:android= "http://schemas.android.com/apk/res/ Android "xmlns:app=" Http://schemas.android.com/apk/res-auto "xmlns:tools=" Http://schemas.android.com/tools "Andro Id:layout_width= "Match_parent" android:layout_height= "Match_parent" tools:context= " Org.lenve.flexbox.MainActivity "> <com.google.android.flexbox.flexboxlayout android:layout_width=" Match_par Ent "android:layout_height=" wrap_content "app:flexwrap=" wrap "> <textview android:lay            Out_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_margin= "8DP" android:background= "@drawable/tv_bg" android:padding= "8DP" android:text= "1. Flowers of land and grass"/> < TextView android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android : layout_margin= "8DP" android:background= "@drawable/tV_BG "android:padding=" 8DP "android:text=" 2. Cute people "/> <textview android:layou T_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_margin= "8DP" a ndroid:background= "@drawable/tv_bg" android:padding= "8DP" android:text= "3. Jin Tao yuanming alone love chrysanthemum"/> <t Extview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android: Layout_margin= "8DP" android:background= "@drawable/tv_bg" android:padding= "8DP" Android:te Xt= "4. From Li Tanglai"/> <textview android:layout_width= "wrap_content" android:layout_height= "wrap _content "android:layout_margin=" 8DP "android:background=" @drawable/tv_bg "Android:paddin            G= "8DP" android:text= "5. The world loves peony"/> <textview android:layout_width= "Wrap_content" Android:layout_height= "Wrap_content" android:layout_margin= "8DP" android:background= "@drawable/tv_bg" Android :p adding= "8DP" android:text= "6. To the alone love Lotus out of the mud and not dye"/> <textview android:layout_width= "Wrap_cont Ent "android:layout_height=" wrap_content "android:layout_margin=" 8DP "android:background=            "@drawable/tv_bg" android:padding= "8DP" android:text= "7. Zhuo Qinglian without demon"/> <textview             Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_margin= "8DP"        android:background= "@drawable/tv_bg" android:padding= "8DP" android:text= "8. In-line external straight"/>            <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_content"            Android:layout_margin= "8DP" android:background= "@drawable/tv_bg" android:padding= "8DP" Android:text= "9. Concise"/&GT <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" and Roid:layout_margin= "8DP" android:background= "@drawable/tv_bg" android:padding= "8DP" Andro Id:text= "10."/> <textview android:layout_width= "Wrap_content" android:layout_height = "Wrap_content" android:layout_margin= "8DP" android:background= "@drawable/tv_bg" Android: padding= "8DP" android:text= "11. Kingston net Planting"/> </com.google.android.flexbox.flexboxlayout></relativelayo Ut>

The display effect is the picture we put out above.

3. Introduction to Parent Container properties

The Flexwrap property represents a newline or not, the default is nowrap, which means no line break, wrap for wrap, and a wrap_reverse for the secondary axis reversal, the meaning of the secondary axis.

Flexdirection represents the direction of the child elements, the direction of the elements are arranged in the direction of the spindle, the property has four kinds of values, different values corresponding to the different main sub-axis, see the following picture:

The default is row, so if I give Flexwrap the Wrap_reverse property, the effect is as follows:

Vice-axis inversion, because the flexdirection default is row, that is, the secondary axis is vertical direction, vice-axis inversion, that is, vertical direction inverted display. Similarly, if I set the Flexdirection property to column, the corresponding spindle direction is vertical downward, this time the control will be displayed as follows:

I will not test the other values.

justifycontent indicates that the control is aligned along the spindle, there are five kinds of values, by default you see the control is left-aligned (Flex_start), and the center of the Spindle is aligned (center):

Right alignment of spindle (flex_end):

Justified, the spacing between the child elements is equal, but the two ends of the child elements are 0 (space_between) between the left and right sides of each other:

The distance between the two ends of the child element is equal, and the distance between all child elements is equal (Space_around):

Aligncontent represents the alignment direction of the control on the secondary axis (for multiline elements), and the default value is stretch, which means it fills the entire sub-axis, because I set the height of the flexboxlayout to the contents of the package above, so this property may not see the effect , here I changed the height of the flexboxlayout to Match_parent, and we'll look at the effect:

Code:

    <com.google.android.flexbox.flexboxlayout        android:layout_width= "match_parent"        android:layout_height = "Match_parent"        app:aligncontent= "Stretch"        app:flexwrap= "wrap";

Effect:

You see that the system automatically magnifies the height of the child elements to fill the parent container.

Align with the start of the secondary axis (Flex_start):

Code:

    <com.google.android.flexbox.flexboxlayout        android:layout_width= "match_parent"        android:layout_height = "Match_parent"        app:aligncontent= "Flex_start"        app:flexwrap= "wrap";

Align with the secondary axis end point (flex_end):

    <com.google.android.flexbox.flexboxlayout        android:layout_width= "match_parent"        android:layout_height = "Match_parent"        app:aligncontent= "flex_end"        app:flexwrap= "wrap";

There are also two values, namely Space_around and Space_between, and the meaning is the same as above, which is not mentioned here.

Alignitems is also a description of the alignment of elements on the secondary axis (for single row), the attribute meaning is basically the same as above, just a baseline, representing the baseline alignment, the rest of the properties are not described.

This is all about the properties of the parent container, so what are the attributes of the child elements?

4. Introduction to child element properties

App:layout_order= "2"

This represents the priority of the child element, the default value is 1, and the larger the value, the more it is displayed.

app:layout_flexgrow= "2"

This is similar to the weight attribute, which is a sample code:

    <com.google.android.flexbox.flexboxlayout        android:layout_width= "300DP"        android:layout_height= "Wrap_ Content ">        <textview            android:layout_width=" 0DP "            android:layout_height=" 48DP "            android: background= "@color/colorprimary"            app:layout_flexgrow= "2"/>        <textview            android:layout_width= " 0DP "            android:layout_height=" 48DP "            android:background=" @color/coloraccent "            app:layout_flexgrow=" 1 "/>    </com.google.android.flexbox.FlexboxLayout>

Display effect:

app:layout_flexshrink= "2"

Represents the scale of a child control when there is insufficient space, and 0 means no scaling, such as the following line of code:

    <com.google.android.flexbox.flexboxlayout        android:layout_width= "300DP"        android:layout_height= "Wrap_ Content ">        <textview            android:layout_width=" 300DP "            android:layout_height=" 48DP "            app:layout _flexshrink= "2"            android:background= "@color/colorprimary"/>        <textview            app:layout_flexshrink= " 1 "            android:layout_width=" 100DP "            android:layout_height=" 48DP "            android:background=" @color/ Coloraccent "/>    </com.google.android.flexbox.FlexboxLayout>

The total width of the parent container is 300DP, resulting in two child elements adding up to 400, exceeding 100DP, the total need to reduce 100DP, according to the Flexshrink property, the first TextView reduced by 100 two-thirds, the second TextView reduced 100 of One-third.

Ok, the above is a basic use of flexboxlayout, more information please refer to Https://github.com/google/flexbox-layout

Above.

Android Development Play Flexboxlayout layout