Android FlexboxLayout布局

news2024/9/25 19:19:39

FlexboxLayout 布局

  • 一、简介
  • 二、使用
  • 三、功能详解
    • FlexboxLayout属性
      • flexWrap
      • flexDirection
      • alignItems
      • justifyContent
      • alignContent
      • dividerDrawableHorizontal、showDividerHorizontal
      • dividerDrawableVertical、showDividerVertical
      • dividerDrawable、showDivider
      • maxLine
    • FlexboxLayout子控件属性
      • layout_order
      • layout_flexGrow
      • layout_flexShrink
      • layout_flexBasisPercent
      • layout_wrapBefore
      • layout_minWidth、layout_maxWidth、layout_minHeight、layout_maxHeight
      • layout_alignSelf
    • FlexboxLayout在RecyclerView应用（FlexboxLayoutManager）

一、简介

FlexboxLayout 是2016年 Google I/O 上开源的一个布局控件，FlexBoxLayout是为Android带来了与 CSS Flexible Box Layout Module （CSS 弹性盒子）相似功能的开源布局控件。
FlexboxLayout 官方开源项目地址：https://github.com/google/flexbox-layout

二、使用

在项目的build.gradle引入flexbox：

implementation 'com.google.android.flexbox:flexbox:3.0.0'

从1.1.0开始，该库预计将与AndroidX一起使用。如果还没有迁移到AndroidX，需使用1.0.0版本，如果使用1.1.0或更高版本，需迁移到AndroidX；
从2.0.0开始，FlexboxLayout的alignItems和alignContext的默认值已从stretch更改为flex_start；
从3.0.0开始，groupId更改为com.google.android.flexbox，且上传至google-maven。旧版本的groupId（com.google.android），可以从jcenter中引用，建议迁移至3.0.0；

在布局文件中添加flexbox:

<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:flexWrap="wrap">

    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="20dp"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:layout_width="60dip"
        android:layout_height="20dp"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3" />

    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />

</com.google.android.flexbox.FlexboxLayout>

显示效果如下：

三、功能详解

FlexboxLayout属性

flexWrap

控制是否换行和换行的方向

属性值：

  <attr name="flexWrap">
            <enum name="nowrap" value="0"/>
            <enum name="wrap" value="1"/>
            <enum name="wrap_reverse" value="2"/>
  </attr>

示例代码：

<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="200dip"
    android:background="#4A000000"
    app:flexWrap="nowrap">
    <!--    flexWrap属性控制是否换行和换行的方向-->
    <!--    app:flexWrap="nowrap"//默认 单行显示-->
    <!--    app:flexWrap="wrap"//超过当前行，自动换行显示-->
    <!--    app:flexWrap="wrap_reverse"//反向换行，当内容超过当前行，自动在换行到当前行上方显示-->
    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="20dp"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:layout_width="60dip"
        android:layout_height="20dp"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3" />

    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />

</com.google.android.flexbox.FlexboxLayout>

  • app:flexWrap="nowrap"
    默认，单行显示

  • app:flexWrap="wrap"
    超过当前行，自动换行显示

  • app:flexWrap="wrap_reverse"
    反向换行，当内容超过当前行，自动在换行到当前行上方显示

flexDirection

控制主轴的方向，子元素的排列按照轴线方向依次添加

属性值：

 <attr name="flexDirection">
     <enum name="row" value="0"/>
     <enum name="row_reverse" value="1"/>
     <enum name="column" value="2"/>
     <enum name="column_reverse" value="3"/>
</attr>

示例代码：

<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="200dip"
    android:background="#4A000000"
    app:flexDirection="row"
    app:flexWrap="wrap">
<!--  flexDirection属性控制主轴的方向，子元素的排列按照轴线方向依次添加-->
<!--  flexDirection="row"默认，主轴方向按水平方向排版（行排版），从左到右-->
<!--  flexDirection="row_reverse"主轴方向按水平方向反向排版（行反向排版），从右到左-->
<!--  flexDirection="column"主轴方向按竖直方向排版（列排版），从上到下-->
<!--  flexDirection="column_reverse"主轴方向按竖直方向反向排版（列反向排版），从下到上-->
  <TextView
      android:layout_width="100dp"
      android:layout_height="20dp"
      android:background="#00FF00"
      android:gravity="center"
      android:text="1" />

  <TextView
      android:layout_width="150dp"
      android:layout_height="20dp"
      android:background="#FFFF00"
      android:gravity="center"
      android:text="2" />

  <TextView
      android:layout_width="60dip"
      android:layout_height="20dp"
      android:background="#FF00FF"
      android:gravity="center"
      android:text="3" />

  <TextView
      android:layout_width="200dip"
      android:layout_height="20dp"
      android:background="#FF0000"
      android:gravity="center"
      android:text="4" />

</com.google.android.flexbox.FlexboxLayout>

  • app:flexDirection="row"
    默认，主轴方向按水平方向排版（行排版），从左到右

  • app:flexDirection="row_reverse"
    主轴方向按水平方向反向排版（行反向排版），从右到左

  • app:flexDirection="column"
    主轴方向按竖直方向排版（列排版），从上到下

  • app:flexDirection="column_reverse"
    主轴方向按竖直方向反向排版（列反向排版），从下到上

alignItems

控制每行轴线上对齐方式

属性值：

<attr name="alignItems">
    <enum name="flex_start" value="0"/>
    <enum name="flex_end" value="1"/>
    <enum name="center" value="2"/>
    <enum name="baseline" value="3"/>
    <enum name="stretch" value="4"/>
</attr>

示例代码：

<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="200dip"
    android:background="#4A000000"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:justifyContent="flex_start"
    app:alignContent="flex_start"
    app:alignItems="flex_start">
<!--    app:alignItems：控制每行轴线上对齐方式-->
<!--    app:alignItems="flex_start"//默认，每行子控件上下顶部对齐-->
<!--    app:alignItems="flex_end"//每行子控件上下底部对齐-->
<!--    app:alignItems="center"//每行子控件上下居中对齐-->
<!--    app:alignItems="baseline"//每行子控件中内容对齐-->
<!--    app:alignItems="stretch"//每行子控件以该行最大高度将每个子控件填充完成-->
    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:paddingTop="10dip"
        android:paddingBottom="20dip"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:layout_width="60dip"
        android:layout_height="wrap_content"
        android:paddingBottom="20dip"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3" />

    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />

</com.google.android.flexbox.FlexboxLayout>

类似于

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pqekIpWl-1683346777203)(null)]

  • app:alignItems="flex_start"
    默认，每行子控件上下顶部对齐

  • app:alignItems="flex_end"
    每行子控件上下底部对齐

  • app:alignItems="center"
    每行子控件上下居中对齐

  • app:alignItems="baseline"
    每行子控件中内容对齐

  • app:alignItems="stretch"
    每行子控件以该行最大高度将每个子控件填充完成

类似于 CSS Flexible Box Layout Module 中align-items：
图片来源

justifyContent

控制元素在主轴上的对齐方式，需要配合flexDirection或flexWrap属性来使用

属性值：

<attr name="justifyContent">
     <enum name="flex_start" value="0"/>
     <enum name="flex_end" value="1"/>
     <enum name="center" value="2"/>
     <enum name="space_between" value="3"/>
     <enum name="space_around" value="4"/>
     <enum name="space_evenly" value="5"/>
</attr>

示例代码：

<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="200dip"
    android:background="#4A000000"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:justifyContent="flex_start">
    <!--app:justifyContent 控制元素在主轴上的对齐方式，需要配合flexDirection或flexWrap属性来使用-->
    <!--app:justifyContent="flex_start"//默认，每行左对齐-->
    <!--app:justifyContent="flex_end"//每行右对齐-->
    <!--app:justifyContent="center"//每行居中对齐-->
    <!--app:justifyContent="space_between"//两端对齐-->
    <!--app:justifyContent="space_around"//每行分散对齐,每个控件左右间隔均相等，控件之间的间隔比控件与边框的间隔大一倍，因为每个控件均存在左右间隔-->
    <!--app:justifyContent="space_evenly"//每行均匀对齐，每行所有间隔均相等-->
    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="20dip"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:layout_width="60dip"
        android:layout_height="20dp"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3" />

    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />

</com.google.android.flexbox.FlexboxLayout>

  • app:justifyContent="flex_start"
    默认，每行左对齐

  • app:justifyContent="flex_end"
    每行右对齐

  • app:justifyContent="center"
    每行居中对齐

  • app:justifyContent="space_between"
    两端对齐

  • app:justifyContent="space_around"
    每行分散对齐,每个控件左右间隔均相等，控件之间的间隔比控件与边框的间隔大一倍，因为每个控件均存在左右间隔

  • app:justifyContent="space_evenly"
    每行均匀对齐，每行所有间隔均相等

alignContent

控制主轴对齐方式（纵向对齐），与justifyContent（横向对齐）对应

属性值：

<attr name="alignContent">
    <enum name="flex_start" value="0"/>
    <enum name="flex_end" value="1"/>
    <enum name="center" value="2"/>
    <enum name="space_between" value="3"/>
    <enum name="space_around" value="4"/>
    <enum name="stretch" value="5"/>
</attr>

示例代码：

<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="200dip"
    android:background="#4A000000"
    app:alignContent="flex_start"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:justifyContent="flex_start">
    <!--app:alignContent 控制主轴对齐方式（纵向对齐），与justifyContent（横向对齐）对应-->
    <!--    app:alignContent="flex_start"//默认，顶部对齐-->
    <!--    app:alignContent="flex_end"//底部对齐-->
    <!--    app:alignContent="center"//上下居中对齐-->
    <!--    app:alignContent="space_between"//上下两端对齐-->
    <!--    app:alignContent="space_around"//上下分散对齐,每行上下间隔均相等，每行之间的间隔比首行/尾行与边框的间隔大一倍，因为每行均存在上下间隔-->
    <!--    app:alignContent="stretch"//每行上下均分整个FlexboxLayout，需要app:alignItems="stretch"才有效,没有设置alignItems时，除首行紧贴边框，其他间隔相等-->
    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="20dp"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:layout_width="60dip"
        android:layout_height="20dp"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3" />

    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />

</com.google.android.flexbox.FlexboxLayout>

  • app:alignContent="flex_start"
    默认，顶部对齐

  • app:alignContent="flex_end"
    底部对齐

  • app:alignContent="center"
    上下居中对齐

  • app:alignContent="space_between"
    上下两端对齐

  • app:alignContent="space_around"
    上下分散对齐,每行上下间隔均相等，每行之间的间隔比首行/尾行与边框的间隔大一倍，因为每行均存在上下间隔

  • app:alignContent="stretch"
    每行上下均分整个FlexboxLayout，需要app:alignItems="stretch"才有效,没有设置alignItems时，除首行紧贴边框，其他间隔相等

    • 没有设置alignItems时：

    • 设置app:alignItems="stretch"时:

dividerDrawableHorizontal、showDividerHorizontal

dividerDrawableHorizontal:设置水平分隔线资源，配合showDividerHorizontal使用；showDividerHorizontal：设置水平分隔线显示方式

showDividerHorizontal属性值：

<attr name="showDividerHorizontal">
    <flag name="none" value="0"/>
    <flag name="beginning" value="1"/>
    <flag name="middle" value="2"/>
    <flag name="end" value="4"/>
</attr>

实例代码：

<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:background="#4A000000"
    android:layout_height="200dip"
    app:dividerDrawableHorizontal="@drawable/divider"
    app:flexWrap="wrap"
    app:showDividerHorizontal="none">
    <!--    app:dividerDrawableHorizontal：设置水平分隔线资源-->
    <!--    app:showDividerHorizontal：设置水平分隔线显示方式-->
    <!--    app:showDividerHorizontal="none"//默认，设置水平分隔线不显示-->
    <!--    app:showDividerHorizontal="beginning"//设置水平分隔线开始显示-->
    <!--    app:showDividerHorizontal="middle"//设置水平分隔线中间显示-->
    <!--    app:showDividerHorizontal="end"//设置水平分隔线结束显示-->

    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="20dp"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:layout_width="60dip"
        android:layout_height="20dip"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3" />

    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />


</com.google.android.flexbox.FlexboxLayout>

分隔线资源divider.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size
        android:width="10dip"
        android:height="10dip" />
    <solid android:color="#D1D1D1" />
</shape>

  • app:showDividerHorizontal="none"
    默认，设置水平分隔线不显示

  • app:showDividerHorizontal="beginning"
    设置水平分隔线开始显示

  • app:showDividerHorizontal="middle"
    设置水平分隔线中间显示

  • app:showDividerHorizontal="end"
    设置水平分隔线结束显示

  • 也可以组合使用，例如设置水平分隔线中间、结束显示：app:showDividerHorizontal="middle|end"

dividerDrawableVertical、showDividerVertical

dividerDrawableVertical:设置垂直分隔线资源，配合showDividerVertical使用；showDividerVertical：设置垂直分隔线显示方式

showDividerVertical属性值：

<attr name="showDividerVertical">
    <flag name="none" value="0"/>
    <flag name="beginning" value="1"/>
    <flag name="middle" value="2"/>
    <flag name="end" value="4"/>
</attr>

实例代码：

<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="200dip"
    android:background="#4A000000"
    app:flexWrap="wrap"
    app:dividerDrawableVertical="@drawable/divider"
    app:showDividerVertical="none">

    <!--    app:dividerDrawableVertical：设置垂直分隔线资源-->
    <!--    app:showDividerVertical ：设置垂直分隔线显示方式-->
    <!--    app:showDividerVertical="none"//默认，设置垂直分隔线不显示-->
    <!--    app:showDividerVertical="beginning"//设置垂直分隔线开始显示-->
    <!--    app:showDividerVertical="middle"//设置垂直分隔线中间显示-->
    <!--    app:showDividerVertical="end"//设置垂直分隔线结束显示-->


    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="20dp"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:layout_width="60dip"
        android:layout_height="20dip"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3" />

    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />


</com.google.android.flexbox.FlexboxLayout>

分隔线资源同上divider.xml：

  • app:showDividerVertical="none"
    默认，设置垂直分隔线不显示

  • app:showDividerVertical="beginning"
    设置垂直分隔线开始显示

  • app:showDividerVertical="middle"
    设置垂直分隔线中间显示

  • app:showDividerVertical="end"
    设置垂直分隔线结束显示

  • 也可以组合使用，例如设置垂直分隔线中间、结束显示：app:showDividerVertical="middle|end"

dividerDrawable、showDivider

dividerDrawable:设置水平和垂直分隔线资源，配合showDivider使用；showDivider：设置水平和垂直分隔线显示方式

showDivider属性值：

<attr name="showDivider">
    <flag name="none" value="0"/>
    <flag name="beginning" value="1"/>
    <flag name="middle" value="2"/>
    <flag name="end" value="4"/>
</attr>

实例代码：

<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="200dip"
    android:background="#4A000000"
    app:flexWrap="wrap"
    app:dividerDrawable="@drawable/divider"
    app:showDivider="none">
    <!--    app:dividerDrawable：设置水平和垂直分隔线资源-->
    <!--    app:showDivider：设置水平和垂直分隔线显示方式-->
    <!--    app:showDivider="none"//设置水平和垂直分隔线不显示-->
    <!--    app:showDivider="beginning"//设置水平和垂直分隔线开始显示-->
    <!--    app:showDivider="middle"//设置水平和垂直分隔线中间显示-->
    <!--    app:showDivider="end"//设置水平和垂直分隔线结束显示-->
    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="20dp"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:layout_width="60dip"
        android:layout_height="20dip"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3" />

    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />


</com.google.android.flexbox.FlexboxLayout>

分隔线资源同上divider.xml：

  • app:showDivider="none"
    默认，设置水平和垂直分隔线不显示

  • app:showDivider="beginning"
    设置水平和垂直分隔线开始显示

  • app:showDivider="middle"
    设置水平和垂直分隔线中间显示

  • app:showDivider="end"
    设置水平和垂直分隔线结束显示

  • 也可以组合使用，例如设置水平和垂直分隔线中间、结束显示：app:showDivider="middle|end"

maxLine

设置最大行数，只有flexWrap设置为wrap或wrap_reverse时，此属性才生效
示例代码：

<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:background="#4A000000"
    android:layout_height="200dip"
    app:flexWrap="wrap"
    app:maxLine="1">
    <!--    maxLine:设置最大行数，只有flexWrap设置为wrap或wrap_reverse时，此属性才生效-->
    <!--    app:maxLine="1":设置最大行数为1行-->
    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="20dp"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:layout_width="60dip"
        android:layout_height="20dip"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3" />

    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />


</com.google.android.flexbox.FlexboxLayout>
  • app:maxLine="1"
    设置最大行数为1行，只有flexWrap设置为wrap或wrap_reverse时，此属性才生效

FlexboxLayout子控件属性

layout_order

指定子元素排序优先级，值越小越排在前面，默认值为1，类型为int

例如“1” 原本在第一位，layout_order设置为2，则会在整个控件最后：

<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:background="#4A000000"
    android:layout_height="200dip"
    app:flexWrap="nowrap">
    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        app:layout_order="2"
        android:text="1" />
    <!--    app:layout_order="2"-->
    <!--    app:layout_order:指定子元素排序优先级，值越小越排在前面，默认值为1，类型为int-->
    <!--    例如“1” 原本在第一位，layout_order设置为2，则会在整个控件最后-->
    <TextView
        android:layout_width="150dp"
        android:layout_height="20dp"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />
    <TextView
        android:layout_width="60dip"
        android:layout_height="20dip"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3"/>
    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />
</com.google.android.flexbox.FlexboxLayout>

效果如下：

没有设置时：

layout_flexGrow

设置同一轴线剩余控件所占权重，类型为float
例如将“2”权重值layout_flexGrow设置为1，则会占满该行剩余空间：

<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:background="#4A000000"
    android:layout_height="200dip"
    app:flexWrap="nowrap">

    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="20dp"
        android:background="#FFFF00"
        android:gravity="center"
        app:layout_flexGrow="1"
        android:text="2" />
    <!--    app:layout_flexGrow="1"-->
    <!--    app:layout_flexGrow：设置同一轴线剩余控件所占权重，类型为float-->
    <!--    例如将“2”权重值layout_flexGrow设置为1，则会占满该行剩余空间-->
    <TextView
        android:layout_width="60dip"
        android:layout_height="20dip"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3"/>
    <TextView
        android:layout_width="20dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />


</com.google.android.flexbox.FlexboxLayout>

效果如下：

没有设置时：

layout_flexShrink

单个控件缩放比例，值越大缩放比例越大，如果设置了换行（flexWrap=“wrap或wrap_reverse”）则该属性无效，类型为float
例如将"2"缩放比例layout_flexShrink设置为2，则缩放更明显(双倍缩放)：

<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:background="#4A000000"
    android:layout_height="200dip"
    app:flexWrap="nowrap">

    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />
    <TextView
        android:layout_width="150dp"
        android:layout_height="20dp"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />
    <TextView
        android:layout_width="60dip"
        android:layout_height="20dip"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3"
        app:layout_flexShrink="2" />
    <!--    app:layout_flexShrink="2"-->
    <!--    app:layout_flexShrink:单个控件缩放比例，值越大缩放比例越大，如果设置了换行（flexWrap=“wrap或wrap_reverse”）则该属性无效，类型为float-->
    <!--    例如将"2"缩放比例layout_flexShrink设置为2，则缩放更明显(双倍缩放)-->
    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />


</com.google.android.flexbox.FlexboxLayout>

效果如下：

没有设置时：

layout_flexBasisPercent

设置控件宽度占用父控件宽度的百分比，设置后，该控件原有宽度失效，父控件需明确宽度，此设置才生效

例如 将“1” layout_flexBasisPercent设置为50%，则宽度正好是父控件一半:

<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:background="#4A000000"
    android:layout_height="200dip"
    app:flexWrap="wrap">
    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        app:layout_flexBasisPercent="50%"
        android:text="1" />
<!--    app:layout_flexBasisPercent="50%"-->
<!--    app:layout_flexBasisPercent:设置控件宽度占用父控件宽度的百分比，设置后，该控件原有宽度失效，父控件需明确宽度，此设置才生效-->
<!--    例如 将“1” layout_flexBasisPercent设置为50%，则宽度正好是父控件一半-->
    <TextView
        android:layout_width="150dp"
        android:layout_height="20dp"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />
    <TextView
        android:layout_width="60dip"
        android:layout_height="20dip"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3" />
    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />
</com.google.android.flexbox.FlexboxLayout>

效果如下：

layout_wrapBefore

设置控件是否强制换行，默认false，如果设置为true，则该控件强制换行展示

例如将"2",“4” layout_wrapBefore 设置为true，则该控件强制换行：

<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:background="#4A000000"
    android:layout_height="200dip"
    app:flexWrap="wrap">
    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />
    <TextView
        android:layout_width="150dp"
        android:layout_height="20dp"
        android:background="#FFFF00"
        android:gravity="center"
        app:layout_wrapBefore="true"
        android:text="2" />
    <!--    app:layout_wrapBefore="true"-->
    <!--    app:layout_wrapBefore:设置控件是否强制换行，默认false，如果设置为true，则该控件强制换行展示-->
    <!--    例如将"2","4" layout_wrapBefore 设置为true，则该控件强制换行-->
    <TextView
        android:layout_width="60dip"
        android:layout_height="20dip"
        android:background="#FF00FF"
        android:gravity="center"
        android:text="3" />
    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        app:layout_wrapBefore="true"
        android:text="4" />
</com.google.android.flexbox.FlexboxLayout>

效果如下：

layout_minWidth、layout_maxWidth、layout_minHeight、layout_maxHeight

layout_minWidth:设置该控件最小宽度，layout_maxWidth:设置该控件最大宽度
layout_minHeight:设置该控件最小高度，layout_maxHeight:设置该控件最大高度
例如，设置"3"的最大、最小宽度和高度都为90dip：

<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:background="#4A000000"
    android:layout_height="200dip"
    app:flexWrap="wrap">

    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />
    <TextView
        android:layout_width="150dp"
        android:layout_height="20dp"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:layout_width="60dip"
        android:layout_height="20dip"
        android:background="#FF00FF"
        android:gravity="center"
        app:layout_minWidth="90dip"
        app:layout_maxWidth="90dip"
        app:layout_minHeight="90dip"
        app:layout_maxHeight="90dip"
        android:text="3" />
    <!--    app:layout_minWidth:设置该控件最小宽度-->
    <!--    app:layout_maxWidth:设置该控件最大宽度-->
    <!--    app:layout_minHeight:设置该控件最小高度-->
    <!--    app:layout_maxHeight:设置该控件最大高度-->


    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        android:text="4" />

</com.google.android.flexbox.FlexboxLayout>

效果如下：

未设置时效果：

layout_alignSelf

设置单个控件的对齐方式，不同于app:alignItems是设置每行轴线上对齐方式

属性值：

<attr name="layout_alignSelf">
	<enum name="auto" value="-1"/>
	<enum name="flex_start" value="0"/>
	<enum name="flex_end" value="1"/>
	<enum name="center" value="2"/>
	<enum name="baseline" value="3"/>
	<enum name="stretch" value="4"/>
</attr>

示例代码：

<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:background="#4A000000"
    android:layout_height="200dip"
    app:alignItems="flex_end"
    app:flexWrap="wrap">

    <TextView
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:background="#00FF00"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:paddingTop="10dip"
        android:paddingBottom="20dip"
        android:background="#FFFF00"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:layout_width="60dip"
        android:layout_height="wrap_content"
        android:paddingBottom="20dip"
        android:background="#FF00FF"
        app:layout_alignSelf="auto"
        android:gravity="center"
        android:text="3" />

<!--    app:layout_alignSelf:设置单个控件的对齐方式，不同于app:alignItems是设置每行轴线上对齐方式-->
<!--    app:layout_alignSelf="auto"//默认，继承父元素的alignItems属性-->
<!--    app:layout_alignSelf="flex_start"//该控件顶部对齐-->
<!--    app:layout_alignSelf="flex_end"//该控件底部对齐-->
<!--    app:layout_alignSelf="center"//该控件居中对齐-->
<!--    app:layout_alignSelf="baseline"//该控件内容对齐-->
<!--    app:layout_alignSelf="stretch"//该控件控件以该行最大高度将控件填充完成-->

    <TextView
        android:layout_width="200dip"
        android:layout_height="20dp"
        android:background="#FF0000"
        android:gravity="center"
        app:layout_wrapBefore="true"
        android:text="4" />
</com.google.android.flexbox.FlexboxLayout>

实例代码效果如下：

  • app:layout_alignSelf="auto"
    默认，继承父元素的alignItems属性

  • app:layout_alignSelf="flex_start"
    该控件顶部对齐

  • app:layout_alignSelf="flex_end"
    该控件底部对齐

  • app:layout_alignSelf="center"
    该控件居中对齐

  • app:layout_alignSelf="baseline"
    该控件内容对齐

  • app:layout_alignSelf="stretch"
    该控件控件以该行最大高度将控件填充完成

FlexboxLayout在RecyclerView应用（FlexboxLayoutManager）

代码中设置RecyclerView的setLayoutManager为FlexboxLayoutManager，配置属性通过FlexboxLayoutManager设置即可：

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);

对于FlexboxLayout子控件属性设置方式如下：

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);
}

使用FlexboxLayoutManager优势是：RecyclerView有屏幕外部控件回收复用机制，相对于直接使用FlexboxLayout（大量的子控件时）减少内存消耗。
官方提供了一个在RecyclerView使用FlexboxLayout（FlexboxLayoutManager）可设置的属性对照表如下：

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/495336.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

简单理解Transformer注意力机制

简单理解Transformer注意力机制

这篇文章是对《动手深度学习》注意力机制部分的简单理解。 生物学中的注意力 生物学上的注意力有两种&#xff0c;一种是无意识的&#xff0c;零一种是有意识的。如下图1&#xff0c;由于红色的杯子比较突出&#xff0c;因此注意力不由自主指向了它。如下图2&#xff0c;由于…
阅读更多...
讯飞星火认知大模型 VS CHATGPT3.5

讯飞星火认知大模型 VS CHATGPT3.5

2023年5月6日&#xff0c;科大讯飞(002230.SZ)宣布将于当日举行“讯飞星火认知大模型”成果发布会。 与其他厂商的大模型发布相比&#xff0c;本次发布会具有三个特点&#xff1a;1.全程真机互动&#xff0c;现场实测、现场体验&#xff1b;2.技术先进性不是笼统表达&#xff…
阅读更多...
Java的自定义注解

Java的自定义注解

java元注解和自定义注解的区别 Java的自定义注解是一种元数据&#xff0c;可以应用于类、方法、字段等程序元素上&#xff0c;以提供额外的信息或指示。 自定义注解包括注解声明、元注解、运行时处理器三个部分。注解声明指定了注解的名称、作用域、成员等信息&#xff1b;元注…
阅读更多...
IP-GUARD如何通过网络控制策略禁止应用程序联网？

IP-GUARD如何通过网络控制策略禁止应用程序联网？

如何通过网络控制策略禁止应用程序联网？ 可以在控制台-高级-网络控制中，添加以下策略： 动作：“禁止” 应用程序：填写要禁止的程序（以QQ示例） 如何禁止没有安装客户端的电脑访问客户端电脑？ 可以给所有客户端设置只允许客户端电脑访问的网络控制策略； 在控制台左边的…
阅读更多...
Unity使用Sqlite3

Unity使用Sqlite3

环境 Unity:Unity2021.3.6f1c1 OS:Window10 64 Plugins:Mono.Data.Sqlite、Sqlite 插件准备 Sqlite3官方网址 Sqlite3有x64和x86版本&#xff0c;根据发布的架构使用不同版本的Sqlite3。 该文档使用x64版本&#xff0c;发布架构为64位。 Mono.Data.Sqlite 使用Unity Hub打开…
阅读更多...
搜索旋转排序数组

搜索旋转排序数组

题目链接 搜索旋转排序数组 题目描述 注意点 nums 中的每个值都 独一无二题目数据保证 nums 在预先未知的某个下标上进行了旋转 解答思路 因为本题数组基本递增&#xff08;仅在某个位置进行旋转&#xff09;&#xff0c;可以看作由两个递增的数组组合而成&#xff0c;所以…
阅读更多...
OPenGL笔记--创建一个3D场景

OPenGL笔记--创建一个3D场景

文章目录 一、前言二、效果展示三、详细流程3.1、World.txt文件规则3.2、加载World.txt3.3、绘制场景3.4、交互 四、详细代码五、举一反三 一、前言 通过前面的学习&#xff0c;基本掌握了怎么绘制图形&#xff0c;使用纹理&#xff0c;接下来就来创建一个3D场景。 基本原理 …
阅读更多...
Unity 软性管的实现

Unity 软性管的实现

概述 因近期项目有要求使用到水管这种软性管的模拟&#xff0c;该篇主要说明软管的实现和应用&#xff0c;参考自&#xff1a;unity3D---实现柔软水管&#xff08;蛇的移动&#xff09;效果一&#xff08;无重力&#xff09;_unity 软管_ayouayouwei的博客-CSDN博客 效果 实现…
阅读更多...
B/S医院手术麻醉管理系统源码：麻醉知情同意书模板

B/S医院手术麻醉管理系统源码：麻醉知情同意书模板

麻醉知情同意书模板 姓名:​ 性别:​ 年龄:​ 科别:​ 床号:​ 住院号:​ 疾病介绍和治疗建议: 医生已告知我因​手术&#xff0c;而接受麻醉。 1.麻醉作用的产生主要是利用麻醉药使中枢神经系统或神经中某些部位受到抑制的结果&#xff0c;临床麻醉的主要任务是: 2.为…
阅读更多...
webpack 的打包流程

webpack 的打包流程

1.webpack 的打包流程 从以上5个方面来分析Webpack的打包流程&#xff1a; 初始化参数&#xff1a;这一步会从我们配置的webpack.config.js中读取到对应的配置参数和shell命令中传入的参数进行合并得到最终打包配置参数。 开始编译&#xff1a;这一步我们会通过调用webpack()方…
阅读更多...
计算机网络基础知识（二）—— 什么是Ip地址、Mac地址、网关、子网掩码、DNS

计算机网络基础知识（二）—— 什么是Ip地址、Mac地址、网关、子网掩码、DNS

文章目录 01 | Ip地址02 | Mac地址03 | 网关04 | 子网掩码05 | DNS06 | 总结 初次接触网络时&#xff0c;只知道电脑连接网线&#xff0c;就可以打开4399玩小游戏&#xff0c;可以登录QQ和朋友聊天&#xff1b; 再次接触网络时&#xff0c;知道了怎么查看自己电脑的网络情况&am…
阅读更多...
06 - 5 生产者消费者模式

06 - 5 生产者消费者模式

架构演进 介绍 同步调用变成异步调用生产数据与消费数据分离协调不同处理速度 生产者 系统运转的动力为下一个环节产生待处理的工作/数据与消费者的关系 重点在如何将数据发送到容器对消费者无依赖不关注消费者的how/when 发送顺序 消费者 容器 平衡 与EDA对比 消费策略 优点…
阅读更多...
我发布了自己第一个由ChatGPT辅助开发的开源项目goattribute

我发布了自己第一个由ChatGPT辅助开发的开源项目goattribute

需求产生 前两天在工作过程中又遇到了一直以来困惑我的一个问题&#xff0c;就是Go配置项的管理问题。 在开发一个新项目的时候&#xff0c;往往涉及到配置项的管理。个人小项目可能会通过配置文件来传入、环境变量来传入&#xff0c;也可能通过命令行参数来传入&#xff0c;公…
阅读更多...
代码随想录 LeetCode数组篇 长度最小的子数组

代码随想录 LeetCode数组篇 长度最小的子数组

文章目录 &#xff08;中等&#xff09;209. 长度最小的子数组&#xff08;中等&#xff09;904. 水果成篮&#xff08;困难&#xff09;76. 最小夫覆盖子串 &#xff08;中等&#xff09;209. 长度最小的子数组 我的思路&#xff1a;双指针p和q&#xff0c;滑动窗口的思想 每…
阅读更多...
牛客练习赛111 D青蛙兔子的约会

牛客练习赛111 D青蛙兔子的约会

题目链接 示例1 输入 3 3 4 10 1 2 2 4 5 1 1 3 5 11 1 1 输出 YES NO NO 说明 第一问&#xff0c;青蛙晚上向右跳1次&#xff0c;白天无法与兔子相遇。青蛙向右跳2次&#xff0c;也就是2a6的距离&#xff0c;白天兔子向左跳1次&#xff0c;可以相遇。所以在跳[1,2]次中&#…
阅读更多...
app持续交付实战

app持续交付实战

app持续交付实战 一、学习目标二、优势三、子任务拆分四、环境依赖1、安卓 SDK2、安卓设备&#xff08;真机 or 模拟器&#xff09;3、Appium 自动化测试4、JDK5、Python3环境6、allure-commandline工具7、allure插件 五、实战任务&#xff1a;串行执行 Jenkins Pipeline 项目1…
阅读更多...
Python学习之批量转换图片格式和统一图片尺寸

Python学习之批量转换图片格式和统一图片尺寸

前言 大家在工作的时候是不是都会接触到很多的图片&#xff0c;为了满足不同的需求&#xff1a; 兼容性&#xff1a;不同设备和应用程序可能支持不同的图片格式。通过转换图片格式&#xff0c;可以确保在各种设备和应用程序中都能够正确地显示图片。 文件大小&#xff1a;不…
阅读更多...
基于matlab 从接收脉冲中提取波形参数

基于matlab 从接收脉冲中提取波形参数

一、前言 现代飞机通常随身携带雷达警告接收器 &#xff08;RWR&#xff09;。RWR检测到雷达发射&#xff0c;并在雷达信号照射到飞机上时警告飞行员。RWR不仅可以检测雷达发射&#xff0c;还可以分析截获的信号并编目信号来自哪种雷达。此示例显示了 RWR 如何估计截获脉冲的参…
阅读更多...
10倍速度开发贪吃蛇游戏之AI辅助

10倍速度开发贪吃蛇游戏之AI辅助

今天就来聊聊AI代码辅助神器&#xff0c;即便是零基础也能上手&#xff0c;因为实在是太强了&#xff0c;这以后叫程序员们怎么活啊&#xff01;话不多说&#xff0c;直接上神器 我用的是cursor,其实目前AI辅助代码不止cursor&#xff0c;还有微软家的copilot X这个根植于gith…
阅读更多...
JVM-01-JVM知识

JVM-01-JVM知识

1-JVM内存模型 Java开发人员一般情况下&#xff0c;使用过程中&#xff0c;不用关注内存的申请和释放&#xff0c;得益于JVM自动内存分配机制&#xff0c;但是其实是个双刃剑&#xff0c;这可以提升Java开发的效率&#xff0c;但是弱化了开发人员内存管理意识&#xff0c;系统容…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023