Android FlexboxLayout使用体验

概述

FlexboxLayout是Google新推出的针对流式布局的控件,
记得之前有流式布局的需求时,都是使用的blazsolar/FlowLayout,或者hongyangAndroid/FlowLayout,
后两种实现方式都差不多,都是通过自定义ViewGroup来达到效果.

相关实现

Android TagFlowLayout完全解析 一款针对Tag的布局
Google发布flexbox-layout 能替代FlowLayout吗?
一个FlowLayout带你学会自定义ViewGroup
如上几种效果都是流式控件的实现案例,其中前两种都是出自Hongyang大神的博客(使用了Adapter模式).细读源码可以学到不少好东西.而后一篇增加了Gravity属性支持,并且增加了行之间的分割线的绘制,从中可以学到很多关于自定义 ViewGroup 的相关知识.

FlexboxLayout

但是呢,今天我们来看一下FlexboxLayout这个全新的控件,他提供了很全面的属性来满足我们的自定义需求,在最新的更新中,新增了对divider的支持,可以说功能更加全面.此控件的所有好用的功能都提供了自定义属性支持,下面我们来分别看一下其属性介绍

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="FlexboxLayout">
    <!--内容排列方向,类似 LinearLayout 的 vertical 和 horizontal-->
    <attr name="flexDirection">
    </attr>
    <!--内容的排列方式,是单行还是多行-->
    <attr name="flexWrap">
    </attr>
    <!--在主轴上的对齐方式(默认是x轴),左对齐...,两端对齐-->
    <attr name="justifyContent">
    </attr>
    <!--在交叉轴上的对齐方式(默认是Y轴),起点...,占满 container-->
    <attr name="alignItems">
    </attr>
    <!--定义每一行在 container 中的对齐方式-->
    <attr name="alignContent">
    </attr>
    <!-- divider 的样式-->
    <attr format="reference" name="dividerDrawable"/>
    <!--横向 divider 的样式-->
    <attr format="reference" name="dividerDrawableHorizontal"/>
    <!--纵向 divider 的样式-->
    <attr format="reference" name="dividerDrawableVertical"/>
    <!-- divider 的显示位置, none|beginning|middle|end -->
    <attr name="showDivider">
    </attr>
    <!--横向 divider 显示位置-->
    <attr name="showDividerHorizontal">
    </attr>
    <!--纵向 divider 显示位置-->
    <attr name="showDividerVertical">
    </attr>
  </declare-styleable>
  <declare-styleable name="FlexboxLayout_Layout">
    <!-- item 的排列顺序,从小到大,默认为 1 -->
    <attr format="integer" name="layout_order"/>
    <!--和 LinearLayout 中的 weight 属性类似,默认为 0 ,当 item 的layout_flexGrow 属性都为 1 时，则它们将等分剩余空间-->
    <attr format="float" name="layout_flexGrow"/>
    <!--缩小比例，默认为 1 ,当 item 的 layout_flexShrink 属性都为 1 并且空间不足时，都将等比例缩小-->
    <attr format="float" name="layout_flexShrink"/>
    <!--在分配多余空间之前, item 在主轴上占据的空间,默认为 auto -->
    <attr format="fraction" name="layout_flexBasisPercent"/>
    <!--允许单个子元素有与其他子元素不一样的对齐方式，可覆盖 alignItems 属性,默认为 auto ,表示继承父元素的 alignItems 属性，如果没有父元素，则等同于  stretch -->
    <attr name="layout_alignSelf">
    </attr>
    <!-- item 的最小宽度-->
    <attr format="dimension" name="layout_minWidth"/>
    <!-- item 的最小高度-->
    <attr format="dimension" name="layout_minHeight"/>
    <!-- item 的最大宽度-->
    <attr format="dimension" name="layout_maxWidth"/>
    <!-- item 的最大高度-->
    <attr format="dimension" name="layout_maxHeight"/>
    <!-- item 是否在 flex line 的第一个,默认为 false -->
    <attr format="boolean" name="layout_wrapBefore"/>
  </declare-styleable>
</resources>

所有属性的用处说完了,这个控件也就没什么好说的,在深入一些可以读读源码,完整效果官方Demo也十分的详细.