30分钟快速上手笔记FlexboxLayout

Github 官网入手

概述

FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android.

Installtion

默认使用AndroidX

dependencies {
    implementation 'com.google.android:flexbox:2.0.1'
}

AndroidX

dependencies {
    implementation 'com.google.android:flexbox:1.0.0'
}

基本属性上手

不用配置环境下载(😢我丫配置环境打包花了斤2个小时), 打包好的Apk 官方demo-playground-debug.apk 下载,跟着官方app操作一下基本上手

子View属性

下载以上Demo直接跟着官网Demo修改体验一下马上入门

分割线设置

  • showDividerHorizontal (one or more of none | beginning | middle | end)

  • dividerDrawableHorizontal (reference to a drawable)

    • Puts horizontal dividers between flex lines (or flex items when flexDirection is set to column or column_rebase).
  • showDividerVertical (one or more of none | beginning | middle | end)

  • dividerDrawableVertical (reference to a drawable)

    • Puts vertical dividers between flex items (or flex lines when flexDirection is set to column or column_rebase).
  • showDivider (one or more of none | beginning | middle | end)

  • dividerDrawable (reference to a drawable)

    • Shorthand for setting both horizontal and vertical dividers. Note that if used with other attributes (such as justifyContent="space_around" or alignContent="space_between" … etc) for putting spaces between flex lines or flex items, you may see unexpected spaces. Please avoid using these at the same time.

    案例:

    res/drawable/divider.xml

    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <size
          android:width="8dp"
          android:height="12dp" />
      <solid android:color="#44A444" />
    </shape> 

    使用

    <com.google.android.flexbox.FlexboxLayout 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"
      app:alignContent="flex_start"
      app:alignItems="flex_start"
      app:flexWrap="wrap"
      app:showDivider="beginning|middle"
      app:dividerDrawable="@drawable/divider" >

FlexboxLayoutManager

In RecyclerView

RecyclerView recyclerView = (RecyclerView) context.findViewById(R.id.recyclerview);
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(context);
layoutManager.setFlexDirection(FlexDirection.COLUMN);
layoutManager.setJustifyContent(JustifyContent.FLEX_END);
recyclerView.setLayoutManager(layoutManager);

设置子View

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

Recycle复用View

FlexBoxLayout vs FlexboxLayoutManager

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

踩坑记录

附录