Reprint please indicate the address QuincySx: [www.jianshu.com/p/fbeb3808a]…

Introduction to the

FlexboxLayout is a layout launched by Google. Its function is similar to LinearLayout. If only its function is similar, then Google doesn’t need to launch it. And can be used seamlessly with RecyclerView, today we will introduce this layout a little bit

use

  1. Add the dependentThe compile 'com. Google. Android: flexbox: 0.3.0'

2. Use it in the layout

<com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
</com.google.android.flexbox.FlexboxLayout>
Copy the code

The latest version and usage of this layout can be seen on Github here

Note: 0.3.0 or above version can be used with RecyclerView

The main properties

FlexDirection properties

This property is similar to the orientation property of the LinearLayout, which controls whether the view displays landscape or vertical row: The default value is landscape row_reverse: columns are aligned horizontally, but from right to left: Column_reverse: In vertical order from bottom to top

FlexWrap properties

Nowrap: Does not wrap by default. Wrap: does not wrap, but the order is reversed

AlignItems properties

The default alignment for this control is the same height or width. If your alignment is horizontal, each child control will be the same width. If your alignment is vertical, each child control will have the same height and stretch: The default value indicates the same height or width of the child controls. Flex_start: left-aligned/up-aligned flex_end: right-aligned/down-aligned Center: centered based on the center line baseline: Align by content, which has a little bit of the same meaning as ConstraintLayout

JustifyContent properties

This property indicates how the controls are arranged on the main axis. If the controls cannot be arranged throughout the layout, flex_start: default value. The controls are all linked together and arranged above or below. Space_around: Controls are spread out, the first control and the last control are separated from the parent container space_between: encounters a property similar, the difference is that the first control and the last control are attached to the side of the parent container

AlignContent properties

This property is similar to the previous one, in that when line breaks are enabled, the main axis may change due to the display of multiple lines, so the effect will also change. This property is currently used for multi-axis cases. Flex_start: the default value for the whole controls to be aligned together at the top or bottom of the center: Space_around: Controls are spread out, with the first control and the last control separated from the parent container. Space_between: If a property is similar, the difference is that the first control and the last control are attached to the parent container