Skip to content

RecyclerView.md

Latest commit

 

History

History
81 lines (66 loc) · 4.53 KB

RecyclerView.md

File metadata and controls

81 lines (66 loc) · 4.53 KB

RecyclerView integration

With the latest alpha version of the release, Flexbox can now be used inside the RecyclerView as a LayoutManager (FlexboxLayoutManager). That means now you can use Flexbox with a large number of items in a scrollable container!

FlexboxLayoutManager in action

Supported attributes / features comparison

Due to some characteristics of the RecyclerView, some Flexbox attributes are not available/not implemented to the FlexboxLayoutManager. Here is a quick overview of the attributes/features comparison between the two containers.

Attribute / Feature FlexboxLayout FlexboxLayoutManager (RecyclerView)
flexDirection Check Check
flexWrap Check Check (except wrap_reverse)
justifyContent Check Check
alignItems Check Check
alignContent Check -
layout_order Check -
layout_flexGrow Check Check
layout_flexShrink Check Check
layout_alignSelf Check Check
layout_flexBasisPercent Check Check
layout_(min/max)Width Check Check
layout_(min/max)Height Check Check
layout_wrapBefore Check Check
Divider Check Check
View recycling - Check
Scrolling *1 Check

*1 Partially possible by wrapping it with ScrollView. But it isn't likely to work with large set of views inside the layout. Because it doesn't consider view recycling.

Setting Flexbox attributes

You can set the attributes through Java code instead of settings those from XML for the FlexboxLayoutManager. For example when you want change the flexDirection and justifyContent:

FlexboxLayoutManager layoutManager = new FlexboxLayoutManager();
layoutManager.setFlexDirection(FlexDirection.COLUMN);
layoutManager.setJustifyContent(JustifyContent.FLEX_END);

or for the attributes for the children of the FlexboxLayoutManager you can do like:

mImageView.setImageDrawable(drawable);
ViewGroup.LayoutParams lp = mImageView.getLayoutParams();
if (lp instanceof FlexboxLayoutManager.LayoutParams) {
    FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams)
            mImageView.getLayoutParams();
    flexboxLp.setFlexGrow(1.0f);
    flexboxLp.setAlignSelf(AlignSelf.FLEX_END);
}

Backward-incompatible changes from the 0.2.x versions

FlexboxLayout can still be used as the same way, but there are some backward-incompatible changes introduced.

  • Now Flexbox specific constants are now defined in each individual class such as:

    • FlexboxLayout.FLEX_DIRECTION_ROW -> FlexDirection.ROW
    • FlexboxLayout.FLEX_WRAP_WRAP -> FlexWrap.WRAP
    • FlexboxLayout.JUSTIFY_CONTENT_FLEX_START -> JustifyContent.FLEX_START
    • FlexboxLayout.ALIGN_ITEMS_FLEX_START -> AlignItems.FLEX_START
    • FlexboxLayout.ALIGN_CONTENT_FLEX_START -> AlignContent.FLEX_START

    including other values (such as FLEX_END, STRETCH) are now moved to each individual class.

Sample code

The code for the new FlexboxLayoutManager hasn't merged to the master branch yet, since it's not as stable as the existing FlexboxLayout. But you can still reference some sample code using the FlexboxLayoutManager inside the RecyclerView in the dev_recyclerview branch such as: