Use of Android Flexbox layout in detail

Keywords: Android Google Attribute xml

For those who study React Native or the front-end, they must know something about Flexbox, because it is a layout scheme of CSS in the front-end domain. Now google has open source Flexbox-like project called Flexbox layout, so android can also use Flexbox layout to achieve a layout similar to the front-end Flexbox.

Firstly, Flexbox layout has five layout attributes: flexDirection, flexWrap, justifyContent, alignItems and alignContent. These five layout attributes correspond to different parameters to achieve unused layout effect. Specifically as follows:

1. The flexDirection attribute determines the orientation of the spindle (i.e. the direction of the project arrangement).
The corresponding parameters and effect charts are as follows:

  • row (default): the spindle is horizontal, starting at the left.
  • row-reverse: The spindle is horizontal, starting at the right.
  • column: The main axis is in the vertical direction, starting at the upper edge.
  • Colum-reverse: The spindle is vertical, starting at the lower edge.

The example code is as follows, and we're going to change app:flexDirection to achieve different effects.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flexDirection="row_reverse">

        <TextView
            android:id="@+id/textview1"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color1"
            android:text="textview1"/>

        <TextView
            android:id="@+id/textview2"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color2"
            android:text="textview2"/>

        <TextView
            android:id="@+id/textview3"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color3"
            android:text="textview3"/>

        <TextView
            android:id="@+id/textview4"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color4"
            android:text="textview4"/>

        <TextView
            android:id="@+id/textview5"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color5"
            android:text="textview5"/>

        <TextView
            android:id="@+id/textview6"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color5"
            android:text="textview6"/>

    </com.google.android.flexbox.FlexboxLayout>

</RelativeLayout>

1. When the parameter of flexDirection is column, that is app:flexDirection= "column":

2. When the parameter of flexDirection is column, that is app:flexDirection= "column_reverse":

3. When the parameter of flexDirection is column, that is app:flexDirection= "row":

4. When the parameter of flexDirection is column, that is app:flexDirection= "row_reverse":

2. Flex Wrap, like Linear Layout by default, does not have line breaks, but the flexWrap attribute supports line breaks. The corresponding parameters and effect charts are as follows:

  • Norap: No line change
  • wrap: change lines in the normal direction
  • wrap-reverse: wrap in the opposite direction

The example code 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flexWrap="wrap">

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color1"
            android:text="textview1"/>

        <TextView
            android:id="@+id/textview2"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color2"
            android:text="textview2"/>

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color3"
            android:text="textview3"/>

        <TextView
            android:id="@+id/textview4"
            android:layout_width="150dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color4"
            android:text="textview4"/>

        <TextView
            android:id="@+id/textview5"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color5"
            android:text="textview5"/>

        <TextView
            android:id="@+id/textview6"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color5"
            android:text="textview6"/>

    </com.google.android.flexbox.FlexboxLayout>

</RelativeLayout>

We achieved different results by modifying app:flexWrap="wrap"

1. When the parameter of flexWrap is wrap, that is app:flexWrap= "wrap":

2. When the parameter of flexWrap is nowrap, that is app:flexWrap= "nowrap":

3. When the parameter of flexWrap is wrap_reverse, that is app:flexWrap= "wrap_reverse":

3. The justifyContent attribute defines how the project aligns on the main axis. It's okay to see that the explanation is a little vague. The effect map will be clear at a glance. The parameters and meanings of justifyContent are as follows:

  • flex_start (default): left alignment
  • flex-end: right alignment
  • center:Centralization
  • space-between: Alignment at both ends, equal spacing between projects
  • space-around: Each project has equal spacing on both sides. So the interval between projects is twice as large as the interval between projects and borders.

The example code 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:justifyContent="flex_start">

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color1"
            android:text="textview1"/>

        <TextView
            android:id="@+id/textview2"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color2"
            android:text="textview2"/>

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color3"
            android:text="textview3"/>

    </com.google.android.flexbox.FlexboxLayout>

</RelativeLayout>

1. When the parameter of justifyContent is flex_start, that is app:justifyContent= "flex_start":

2. When the parameter of justifyContent is flex_end, that is app:justifyContent= "flex_end":

3. When the parameter of justifyContent is center, that is app:justifyContent= "center":

4. When the parameter of justifyContent is space_around, app:justifyContent= "space_around":

5. When the parameter of justifyContent is space-between, that is app:justifyContent= "space-between":

4. The alignItems attribute defines how items are aligned on the countershaft. (By default, the main axis is a straight line from left to right, while the corresponding sub-axis is a line from top to bottom). The parameters and meanings of alignItems are as follows:

  • flex-start: Start alignment of cross axes.
  • flex-end: end alignment of cross axes.
  • center: The midpoint alignment of the intersection axis.
  • baseline: baseline alignment of the first line of text of the project.
  • stretch (default): If the project is not set to height or set to auto, it will occupy the height of the entire container.

The example code 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:alignItems="flex_start">

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color1"
            android:text="textview1"/>

        <TextView
            android:id="@+id/textview2"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color2"
            android:text="textview2"/>

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color3"
            android:text="textview3"/>

    </com.google.android.flexbox.FlexboxLayout>

</RelativeLayout>

1. When the parameter of alignItems is stretch, that is app:alignItems= "stretch":

2. When the parameter of alignItems is flex_start, that is app:alignItems= "flex_start":

3. When the parameter of alignItems is flex_end, that is app:alignItems= "flex_end":

4. When the parameter of alignItems is center, that is app:alignItems= "center":

5. When the parameter of alignItems is baseline, that is app:alignItems= "baseline":

5. The alignContent attribute defines the alignment of multiple axes. If the project has only one axis, the attribute does not work. Its attributes are as follows:

  • flex-start: aligned with the starting point of the intersection axis.
  • flex-end: aligned with the end of the intersection axis.
  • center: Align with the midpoint of the intersection axis.
  • space-between: Average distribution of spacing between axes aligned with both ends of the intersection axis
  • space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as that between axes and frames.
  • (Default value): The axis occupies the entire intersection axis.

The example code 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:flexWrap="wrap"
        app:alignContent="flex_start">

        <TextView
            android:id="@+id/textview1"
            android:layout_width="50dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color1"
            android:text="textview1"/>

        <TextView
            android:id="@+id/textview2"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color2"
            android:text="textview2"/>

        <TextView
            android:id="@+id/textview3"
            android:layout_width="90dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color3"
            android:text="textview3"/>

        <TextView
            android:id="@+id/textview4"
            android:layout_width="60dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color1"
            android:text="textview4"/>

        <TextView
            android:id="@+id/textview5"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color2"
            android:text="textview5"/>

        <TextView
            android:id="@+id/textview6"
            android:layout_width="90dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:background="@color/color3"
            android:text="textview6"/>

    </com.google.android.flexbox.FlexboxLayout>

</RelativeLayout>

1. When the alignContent parameter is stretch, that is app:alignContent= "stretch":

2. When the parameter of alignContent is flex_start, that is app:alignContent= "flex_start":

3. When the parameter of alignContent is flex_end, that is app:alignContent= "flex_end":

4. When the alignContent parameter is center, that is app:alignContent= "center":

5. When the parameter of alignContent is space_around, that is app:alignContent= "space_around":

6. When the parameter of alignContent is space_between, that is app:alignContent= "space_between":

In addition to these main attributes, there are other attributes:
1. layout_flexGrow (representing the weight attribute of the element)

     <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/color1"
            app:layout_flexGrow="2"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:background="@color/color2"
            app:layout_flexGrow="1"/>
    </com.google.android.flexbox.FlexboxLayout>

2. layout_flexShrink

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="300dp"
        android:layout_height="wrap_content">

        <TextView
            id="@+id/text1"
            android:layout_width="400dp"
            android:layout_height="48dp"
            app:layout_flexShrink="2"
            android:background="@color/color1"/>

        <TextView
            id="@+id/text2"
            app:layout_flexShrink="1"
            android:layout_width="300dp"
            android:layout_height="48dp"
            android:background="@color/color2"/>
    </com.google.android.flexbox.FlexboxLayout>

Because of the insufficient width of the total 300dp, text1 was reduced by two-thirds and text2 by one-third.

3. layout_order (can control the order of ranking, negative value in front, positive disaster, in order from small to large)

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="100dp"
            android:layout_height="48dp"
            app:layout_order="2"
            android:text="color1"
            android:gravity="center"
            android:background="@color/color1"/>

        <TextView
            android:layout_width="100dp"
            android:layout_height="48dp"
            app:layout_order="1"
            android:text="color2"
            android:gravity="center"
            android:background="@color/color2"/>

    </com.google.android.flexbox.FlexboxLayout>

4. layout_flexBasisPercent (attribute defines the main size spindle space occupied by sub-elements before allocating redundant space. Browsers calculate whether there is redundant space on the spindle according to this attribute. Its default value is auto, which is the original size of the child element. )

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flexWrap="wrap">

        <TextView
            android:id="@+id/flexbox"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="text1"
            android:gravity="center"
            android:background="@color/color1"/>

        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="text2"
            android:gravity="center"
            app:layout_flexBasisPercent="50%"
            android:background="@color/color2"/>

    </com.google.android.flexbox.FlexboxLayout>

5. layout_alignSelf (Attribute allows a single child element to have a different alignment from other child elements, which can override the alignItems attribute. The default value is auto, which means that the alignItems attribute of the parent element is inherited. If there is no parent element, it is equivalent to stretch. )

  • auto (default)
  • flex_start
  • flex_end
  • center
  • baseline
  • stretch
    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:alignItems="flex_start">

        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="text1"
            android:gravity="center"
            android:background="@color/color1"/>

        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="text2"
            android:gravity="center"
            app:layout_alignSelf="center"
            android:background="@color/color2"/>

        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="text2"
            android:gravity="center"
            android:background="@color/color3"/>

    </com.google.android.flexbox.FlexboxLayout>

Finally, Flexbox Layout Manager, which is also the latest feature of FlexBox Layout. We used to use third-party libraries to implement most of the things we didn't realize when we used streaming layout. Now with this, we can easily implement streaming layout and Flexbox Layout Manager.
Like Linear Layout Manager and others, it can be loaded with RecyclerView, that is, it can load multiple data easily without all loading at once. Using Flexbox Layout Manager is simple and no different from general layout controllers. The example code is as follows:

  RecyclerView recycler_view=......
  FlexboxLayoutManager flexboxLayoutManager=new 
  FlexboxLayoutManager(this);
  flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);
  recycler_view.setLayoutManager(flexboxLayoutManager);
  mainAdapter=new MainAdapter(this);
  recycler_view.setAdapter(mainAdapter);

We can set various attributes of FlexBox Layout through Flexbox Layout Manager, and the Main Adapter above is no different from the ordinary Adadapter.

Posted by Redneckheaven on Sun, 09 Jun 2019 17:09:27 -0700

Hot Keywords

©2024 Programmer Group