Android上的Flexbox布局

splash 5年前
   <h3>简介</h3>    <p>最近Google开源了一个叫 flex-box 的库,它的思路是参照的 <strong>CSS的Flex布局</strong> 设计的,所以属性基本都是和CSS上的Flex布局保持一致,但因为是两个不同的平台,所以减少了几个不适用于Android的属性,新增了几个属性,具体我们下面会说到。</p>    <h3>关于CSS的Flex布局</h3>    <p>在了解Google开源的 <strong>flex-box</strong> ,我觉得有必要先了解下 <strong>CSS的Flex布局</strong> ,这有助于我们理解那些属性定义。关于这方面的知识,可以阅读这篇博客。下面我们只是简要的了解下,具体属性我们放到讲解Google的 <strong>flex-box</strong> 中去说明。</p>    <pre>  //这段文字说明,来源于上面说到的博客  采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。  容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。  项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/8b402883445b842ca38727fc09f60d00.png"></p>    <p style="text-align: center;">img</p>    <h3>关于Google的flexbox-layout</h3>    <p>注意:以下文中用到的flexbox-layout指的是Google开源的库,Flex指的是CSS中的Flex布局。</p>    <p>首先我们需要知道的是,flexbox-layout的基本概念和Flex是一样的,最外面的这层布局称为 <strong>容器</strong> ,在flexbox-layout指的是 com.google.android.flexbox.FlexboxLayout ,里面的子元素称为 <strong>项目</strong> 。容器默认存在两条轴,其中水平(这里是就上面的概念图而言,因为主轴的方向是可以指定的)的这条轴称为 <strong>主轴</strong> (个人理解,可以存在多条,具体原因后面讲),垂直的这条称为 <strong>交叉轴</strong> 。其他属性比如 start , end 等等也是一样的,具体可以看上面的基本概念图。</p>    <p>下面我们着重讲下flexbox-layout支持的属性,因为它既支持容器属性,也支持项目属性,所以我们分成两个篇幅来说明。</p>    <p>注意:以下属性设置的具体效果请参照说明文档和Demo, <a href="/misc/goto?guid=4959746529077926276" rel="nofollow,noindex">github地址</a></p>    <p>容器属性</p>    <ul>     <li> <p>flexDirection</p> <p>这个属性用于确定 <strong>主轴方向</strong> ,可选的值有:</p>      <ol>       <li>row 水平方向,起点在左边。默认值</li>       <li>row_revers 水平方向,起点在右边。</li>       <li>column 垂直方向,起点在上边。</li>       <li>column_reverse 垂直方向,起点在下边。</li>      </ol> </li>    </ul>    <p> </p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/0ac377493a33869f2829c4b1d3d70100.png"></p>    <p style="text-align: center;"> </p>    <ul>     <li>flexWrap</li>    </ul>    <p>这个属性控制容器是单行还是自动换行,以及主轴的方向,可选的值有:</p>    <p>关于 wrap 和 wrap-reverse 的区别:</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/6215cf568af888a6442517b68a2825d8.jpg"></p>    <p> </p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/4a8a486060e81a05895277c987af5c96.jpg"></p>    <ol>     <li>nowrap 单行。默认值</li>     <li>wrap 自动换行,第一行在上方</li>     <li>wrap-reverse 自动换行,第一行在下方</li>    </ol>    <p>justifyContent</p>    <p>这个属性控制项目在主轴上的对齐方式,可选的值有:</p>    <p>注意:具体的对齐方式与主轴的方向有关,下面的说明是基于默认值</p>    <p>关于 space_between 和 space_around 的样式如下:</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/04f0d371b9d08744bdb04906af761823.png"></p>    <p> </p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/3fb46f663165c571e87e12192445b592.png"></p>    <ol>     <li>flex_start 左对齐,默认值</li>     <li>flex_end 右对齐</li>     <li>center 居中对齐</li>     <li>space_between 两端对齐,项目之间的间隔相等</li>     <li>space_around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍</li>    </ol>    <ul>     <li> <h3>alignItems</h3> </li>    </ul>    <p>这个属性定义项目在交叉轴上的对齐方式,可选的值有:</p>    <p>注意:具体的对齐方式与主轴的方向有关</p>    <p>关于 stretch 和 baseline 的样式如下:</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/22ee1d62ff60146cadd3b8a97026eefe.png" alt="Android上的Flexbox布局" width="415" height="604"></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/0b011da4e89eb64b4f14cdec5eb9a943.png"></p>    <ol>     <li>stretch 占满整个容器高度,默认值</li>     <li>flex_start 交叉轴的起点对齐</li>     <li>flex_end 交叉轴的终点对齐</li>     <li>center 居中对齐</li>     <li>baseline 项目的第一行文字的基线对齐</li>    </ol>    <ul>     <li> <p>alignContent</p> <p>这个属性控制容器的多条主轴的对齐方式,这也是我们前面提到的 <strong> 主轴可以有多条,当 flexWrap:wrap|wrapreverse </strong> 。可选的值有:</p> <p>注意:只有一条主轴,该属性不起作用</p> <p>这里需要注意区别下和 alignItems 的区别, alignContent 是多条主轴基于交叉轴的对齐方式,而后者是项目基于交叉轴的对齐方式,一个是轴,一个是项目。</p>      <ol>       <li>stretch 占满整个交叉轴,默认值</li>       <li>flex_start 与交叉轴的起点对齐</li>       <li>flex_end 与交叉轴的终点对齐</li>       <li>center 与交叉轴的中心对齐</li>       <li>space_between 与交叉轴两端对齐,轴线之间的间隔平均分布</li>       <li>space_around 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍</li>      </ol> </li>     <li> <p>showDividerHorizontal</p> </li>     <li> <p>dividerDrawableHorizontal</p> </li>     <li> <p>showDividerVertical</p> </li>     <li> <p>dividerDrawableVertical</p> </li>     <li> <p>showDivider</p> </li>     <li> <p>dividerDrawable</p> <p>这几个属性都是跟分隔符有关,具体用法可以看文档。</p> </li>    </ul>    <p>项目属性</p>    <ul>     <li> <p>layout_order(integer)</p> <p>这个属性可以改变项目的排列顺序,默认值为 1 。</p> </li>     <li> <p>layout_flexGrow(float)</p> <p>这个属性定义项目基于当前行的放大比例,默认值为 0 。这个属性类似 LinearLayout 中的 layout_weight 属性,如果当前行只有一个项目的 layout_flexGrow 为正值,则该项目将占满当前行剩余的空间,下面的效果是三个相同大小的项目,其中一个 layout_flexGrow 为正值的效果:</p> </li>    </ul>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/fb56557f80203ac0be8b6bd1adb1560e.png"></p>    <p style="text-align: center;"> </p>    <p>如果存在多个 layout_flexGrow 为正值的情况,则这几个项目则会按设置的值为比例占用当前行剩余的空间,下面的效果是三个相同大小的项目,其中两个项目设置 layout_flexGrow:1 的效果:</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/017447c21a98793031cfa2cb97d940d5.png"></p>    <ul>     <li> <p>layout_flexShrink(float)</p> <p>这个属性定义了项目的缩小比例,默认为 1 ,即如果当前行空间不足,该项目缩小的方式。</p> <p>如果所有项目的 layout_flexShrink 属性都为1,当空间不足时,都将等比例缩小。如果一个项目的 layout_flexShrink 属性为0,其他项目都为1,则空间不足时,前者不缩小。</p> <p>个人理解,注意:要设置 flexWrap:nowrap 为单行</p> </li>     <li> <p>layout_alignSelf</p> <p>该属性允许单个项目与其他项目不一样的基于交叉轴的对齐方式。默认值为 auto ,即按照容器的 alignItems 属性,设置其他值,则会覆盖容器的值,可选的值:</p>      <ol>       <li>auto 默认值</li>       <li>flex_start</li>       <li>flex_end</li>       <li>center</li>       <li>baseline</li>       <li>stretch</li>      </ol> </li>     <li> <p>layout_flexBasisPercent(fraction)</p> <p>这个属性设置项目长度相对于容器的百分比,如果设置了这个值,则从 layout_width 或 layout_height 指定的长度会被覆盖,需要注意的是,这个属性只在容器长度确定的情况下有效,即 MeasureSpec.EXACTLY 。默认值为 -1 ,表示不设置。</p> </li>     <li> <p>layout_minWidth/ <strong>layout_minHeight</strong> (dimension)</p> </li>     <li> <p>layout_maxWidth/ <strong>layout_maxHeight</strong> (dimension)</p> <p>这些属性设置对项目的最大最小限制</p> </li>     <li> <p>layout_wrapBefore(boolean)</p> <p>这个属性默认值为 false ,如果设置为 true ,则该项目将强制成为当前行的第一个项目,会忽略 flex_wrap:nowrap 设置。</p> </li>    </ul>    <h3>应用实例</h3>    <ol>     <li> <p>底部按钮</p> </li>    </ol>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/2a68c5f68f6bd76548828f9b7a1008e7.png" style="font-size:13px; line-height:1.6"></p>    <p> </p>    <p>2.流式布局</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/a62a3255dca22416fbf015e90c5dd8c4.png"></p>    <p> </p>    <p> </p>    <p>来自:https://juejin.im/post/58dde21461ff4b006b0b0cc4</p>    <p> </p>