简介：

  • Flex是 Flexible Box 的缩写，意为「弹性布局」，

  • 在前端css样式中应用甚为广泛，之前做过React-Native和微信小程序，页面布局大多使用flex弹性布局，可以在不同屏幕尺寸上提供一致的布局结构，
    可以简便、完整、响应式地实现各种页面布局

今天为大家打开Android移动端的flex布局大门–FlexboxLayout，在android中我们经常所见的标签、流式布局等都可以用FlexboxLayout来实现。

引入：

github : google / flexbox-layout 

implementation 'com.google.android:flexbox:2.0.1'//未用AndroidX//implementation 'com.google.android:flexbox:1.0.0'

FlexboxLayout主要5大布局属性，分别是flexDirection,flexWrap,justifyContent ,alignItems ,alignContent

flexDirection : 主轴方向

flex-direction 属性决定主轴的方向（即内部子元素的排列方向）。

  • row（默认值）：水平显示，起点在左端

  • row_reverse：水平显示，起点在右端，与row相反的顺序

  • column：垂直显示，起点在顶部

  • column_reverse：垂直显示，起点在底部，与column相反的顺序

xml中使用app:flexDirection=“row”，代码中使用flexboxLayout.setFlexDirection(FlexDirection.ROW)

flexWrap ：是否换行

flexWrap 决定是否换行

  • nowrap（默认值）：不换行

  • wrap：按正常方向换行，第一行在上方

  • wrap_reverse：按反方向换行，第一行在下方

xml中使用app:flexWrap=“nowrap”，代码中使用flexboxLayout.setFlexWrap(FlexWrap.NOWRAP)

justifyContent ：主轴对齐

justifyContent决定元素在主轴上的对齐方式

justify
英 [ˈdʒʌstɪfaɪ]
美 [ˈdʒʌstɪfaɪ]
v. 证明…正确(或正当、有理); 对…作出解释; 为…辩解(或辩护); 调整使全行排满; 使每行排齐; 使齐行;

  • flex_start（默认值）：主轴方向起点对齐

  • flex_end：主轴方向终点对齐

  • center： 主轴方向居中对齐

  • space_between：主轴方向两端对齐，元素之间的间隔都相等。

  • space-around：每个元素两侧的间隔相等。所以，元素之间的间隔比元素与布局边框的间隔大一倍。

xml中使用app:justifyContent=“flex_start”，代码中使用flexboxLayout.setJustifyContent(JustifyContent.FLEX_START)
注意这里是 主轴方向 上的对齐方式即flexDirection属性，例如主轴如果是row水平方向的，那么center属性就是水平居中，如果是column，那么就是垂直方向居中。

alignItems ： 交叉轴对齐

alignItems决定元素在交叉轴方向上的对齐方式，「交叉轴」 我理解的就是 与主轴交叉垂直的方向，比如主轴是水平的，那么交叉轴就是垂直方向的

  • stretch（默认值）：交叉轴方向占满整个父布局。

  • flex_start交叉轴的起点对齐

  • flex_end交叉轴的终点对齐。

  • center交叉轴的居中对齐

  • baseline元素第一行文字的基线对齐

alignContent ： 多根轴线对齐

alignContent决定了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  • stretch（默认值）：轴线占满整个交叉轴。

  • flex_start 交叉轴方向起点对齐

  • flex_end 交叉轴方向终点对齐

  • center 交叉轴方向居中对齐

  • space_between 交叉轴方向两端对齐，元素之间的间隔都相等

  • space_around 每个元素两侧的间隔相等。所以，元素之间的间隔比元素与布局边框的间隔大一倍

alignContent是在多行的情况下起作用。也就是控制多行，如果子元素只有一行，则不起作用。
justifyContent设置主轴方向的对齐方式，
alignContent是设置交叉轴方向的对齐方式。
例如元素是水平方向换行，justifyContent设置center属性就是水平居中，alignContent设置center属性就是垂直居中。

测试：

<?xml version="1.0" encoding="utf-8"?><LinearLayout 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"    android:orientation="vertical">    <com.google.android.flexbox.FlexboxLayout        android:id="@+id/flexboxLayout"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:background="@android:color/black">        <TextView            android:id="@+id/tv0"            android:layout_width="60dp"            android:layout_height="60dp"            android:background="@android:color/holo_purple"            android:gravity="center"            android:text="tv0"            android:textColor="#ffffff" />        <TextView            android:id="@+id/tv1"            android:layout_width="80dp"            android:layout_height="40dp"            android:background="#fd0202"            android:gravity="center"            android:text="tv1"            android:textColor="#ffffff" />        <TextView            android:id="@+id/tv2"            android:layout_width="50dp"            android:layout_height="90dp"            android:background="@android:color/holo_green_light"            android:gravity="center"            android:text="tv2"            android:textColor="#ffffff" />        <TextView            android:id="@+id/tv3"            android:layout_width="60dp"            android:layout_height="60dp"            android:background="#38fd02"            android:gravity="center"            android:text="tv3"            android:textColor="#ffffff" />        <TextView            android:id="@+id/tv4"            android:layout_width="60dp"            android:layout_height="60dp"            android:background="#02bafd"            android:gravity="center"            android:text="tv4"            android:textColor="#ffffff" />        <TextView            android:id="@+id/tv5"            android:layout_width="30dp"            android:layout_height="80dp"            android:background="#020afd"            android:gravity="center"            android:text="tv5"            android:textColor="#ffffff" />        <TextView            android:id="@+id/tv6"            android:layout_width="60dp"            android:layout_height="60dp"            android:background="@android:color/holo_orange_light"            android:gravity="center"            android:text="tv6"            android:textColor="#ffffff" />        <TextView            android:id="@+id/tv7"            android:layout_width="40dp"            android:layout_height="70dp"            android:background="#00ffff"            android:gravity="center"            android:text="tv7"            android:textColor="#ffffff" />        <TextView            android:id="@+id/tv8"            android:layout_width="100dp"            android:layout_height="40dp"            android:background="#ff6699"            android:gravity="center"            android:text="tv8"            android:textColor="#ffffff" />        <TextView            android:id="@+id/tv9"            android:layout_width="80dp"            android:layout_height="80dp"            android:background="@android:color/holo_red_light"            android:gravity="center"            android:text="tv9"            android:textColor="#ffffff" />    com.google.android.flexbox.FlexboxLayout>    <TextView        android:id="@+id/flexDirection0"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:text="flexDirection: 主轴方向" />        <LinearLayout        android:layout_width="match_parent"        android:layout_height="50dp">        <TextView            android:id="@+id/flexDirection1"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#ff00ff"            android:gravity="center"            android:text="ROW"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/flexDirection2"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#8BC34A"            android:gravity="center"            android:text="ROW_REVERSE"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/flexDirection3"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#00BCD4"            android:gravity="center"            android:text="COLUMN"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/flexDirection4"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#F44336"            android:gravity="center"            android:text="COLUMN_REVERSE"            android:textColor="@android:color/white" />    LinearLayout>    <TextView        android:id="@+id/flexWrap0"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:text="flexWrap: 是否换行" />        <LinearLayout        android:layout_width="match_parent"        android:layout_height="50dp">        <TextView            android:id="@+id/flexWrap1"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@color/colorPrimary"            android:gravity="center"            android:text="NOWRAP"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/flexWrap2"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@color/colorAccent"            android:gravity="center"            android:text="WRAP"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/flexWrap3"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#03A9F4"            android:gravity="center"            android:text="WRAP_REVERSE"            android:textColor="@android:color/white" />    LinearLayout>    <TextView        android:id="@+id/justifyContent0"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:text="justifyContent: 主轴对齐" />        <LinearLayout        android:layout_width="match_parent"        android:layout_height="50dp">        <TextView            android:id="@+id/justifyContent1"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#FF5722"            android:gravity="center"            android:text="FLEX_START"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/justifyContent2"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#8BC34A"            android:gravity="center"            android:text="FLEX_END"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/justifyContent3"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#009688"            android:gravity="center"            android:text="CENTER"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/justifyContent4"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@color/colorPrimary"            android:gravity="center"            android:text="SPACE_BETWEEN"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/justifyContent5"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@color/colorAccent"            android:gravity="center"            android:text="SPACE_AROUND"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/justifyContent6"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#3F51B5"            android:gravity="center"            android:text="SPACE_EVENLY"            android:textColor="@android:color/white" />    LinearLayout>    <TextView        android:id="@+id/alignItems0"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:text="alignItems: 交叉轴对齐" />        <LinearLayout        android:layout_width="match_parent"        android:layout_height="50dp">        <TextView            android:id="@+id/alignItems1"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#E91E63"            android:gravity="center"            android:text="FLEX_START"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/alignItems2"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@color/colorAccent"            android:gravity="center"            android:text="FLEX_END"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/alignItems3"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#52405E"            android:gravity="center"            android:text="CENTER"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/alignItems4"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#509E20"            android:gravity="center"            android:text="BASELINE"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/alignItems5"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#E91E63"            android:gravity="center"            android:text="STRETCH"            android:textColor="@android:color/white" />    LinearLayout>    <TextView        android:id="@+id/alignContent0"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:text="alignContent: 多根轴线对齐" />        <LinearLayout        android:layout_width="match_parent"        android:layout_height="50dp">        <TextView            android:id="@+id/alignContent1"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#FF5722"            android:gravity="center"            android:text="FLEX_START"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/alignContent2"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@color/colorAccent"            android:gravity="center"            android:text="FLEX_END"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/alignContent3"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#03A9F4"            android:gravity="center"            android:text="CENTER"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/alignContent4"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@color/colorPrimary"            android:gravity="center"            android:text="SPACE_AROUND"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/alignContent5"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#03091E"            android:gravity="center"            android:text="SPACE_BETWEEN"            android:textColor="@android:color/white" />        <TextView            android:id="@+id/alignContent6"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@color/colorAccent"            android:gravity="center"            android:text="STRETCH"            android:textColor="@android:color/white" />    LinearLayout>LinearLayout>
class MainActivity : AppCompatActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.test2)        //flexDirection        flexDirection0.text = "FlexDirection : " + flexboxLayout.flexDirection        flexDirection1.setOnClickListener {            flexboxLayout.flexDirection = FlexDirection.ROW   //默认            flexDirection0.text = "FlexDirection.ROW"        }        flexDirection2.setOnClickListener {            flexboxLayout.flexDirection = FlexDirection.ROW_REVERSE            flexDirection0.text = "FlexDirection.ROW_REVERSE"        }        flexDirection3.setOnClickListener {            flexboxLayout.flexDirection = FlexDirection.COLUMN            flexDirection0.text = "FlexDirection.COLUMN"        }        flexDirection4.setOnClickListener {            flexboxLayout.flexDirection = FlexDirection.COLUMN_REVERSE            flexDirection0.text = "FlexDirection.COLUMN_REVERSE"        }        //flexWrap        flexWrap0.text = "FlexWrap : " + flexboxLayout.flexWrap        flexWrap1.setOnClickListener {            flexboxLayout.flexWrap = FlexWrap.NOWRAP  //默认            flexWrap0.text = "FlexWrap.NOWRAP"        }        flexWrap2.setOnClickListener {            flexboxLayout.flexWrap = FlexWrap.WRAP            flexWrap0.text = "FlexWrap.WRAP"        }        flexWrap3.setOnClickListener {            flexboxLayout.flexWrap = FlexWrap.WRAP_REVERSE            flexWrap0.text = "FlexWrap.WRAP_REVERSE"        }        //justifyContent        justifyContent0.text = "JustifyContent: " + flexboxLayout.justifyContent        justifyContent1.setOnClickListener {            flexboxLayout.justifyContent = JustifyContent.FLEX_START  //默认            justifyContent0.text = "JustifyContent.FLEX_START"        }        justifyContent2.setOnClickListener {            flexboxLayout.justifyContent = JustifyContent.FLEX_END            justifyContent0.text = "JustifyContent.FLEX_END"        }        justifyContent3.setOnClickListener {            flexboxLayout.justifyContent = JustifyContent.CENTER            justifyContent0.text = "JustifyContent.CENTER"        }        justifyContent4.setOnClickListener {            flexboxLayout.justifyContent = JustifyContent.SPACE_BETWEEN            justifyContent0.text = "JustifyContent.SPACE_BETWEEN"        }        justifyContent5.setOnClickListener {            flexboxLayout.justifyContent = JustifyContent.SPACE_AROUND            justifyContent0.text = "JustifyContent.SPACE_AROUND"        }        justifyContent6.setOnClickListener {            flexboxLayout.justifyContent = JustifyContent.SPACE_EVENLY            justifyContent0.text = "JustifyContent.SPACE_EVENLY"        }        //alignItems        alignItems0.text = "AlignItems: " + flexboxLayout.alignItems        alignItems1.setOnClickListener {            flexboxLayout.alignItems = AlignItems.FLEX_START  //默认            alignItems0.text = "AlignItems.FLEX_START"        }        alignItems2.setOnClickListener {            flexboxLayout.alignItems = AlignItems.FLEX_END            alignItems0.text = "AlignItems.FLEX_END"        }        alignItems3.setOnClickListener {            flexboxLayout.alignItems = AlignItems.CENTER            alignItems0.text = "AlignItems.CENTER"        }        alignItems4.setOnClickListener {            flexboxLayout.alignItems = AlignItems.BASELINE            alignItems0.text = "AlignItems.BASELINE"        }        alignItems5.setOnClickListener {            flexboxLayout.alignItems = AlignItems.STRETCH            alignItems0.text = "AlignItems.STRETCH"        }        //alignContent        alignContent0.text = "AlignContent: " + flexboxLayout.alignContent        alignContent1.setOnClickListener {            flexboxLayout.alignContent = AlignContent.FLEX_START  //默认            alignContent0.text = "AlignContent.FLEX_START"        }        alignContent2.setOnClickListener {            flexboxLayout.alignContent = AlignContent.FLEX_END            alignContent0.text = "AlignContent.FLEX_END"        }        alignContent3.setOnClickListener {            flexboxLayout.alignContent = AlignContent.CENTER            alignContent0.text = "AlignContent.CENTER"        }        alignContent4.setOnClickListener {            flexboxLayout.alignContent = AlignContent.SPACE_AROUND            alignContent0.text = "AlignContent.SPACE_AROUND"        }        alignContent5.setOnClickListener {            flexboxLayout.alignContent = AlignContent.SPACE_BETWEEN            alignContent0.text = "AlignContent.SPACE_BETWEEN"        }        alignContent6.setOnClickListener {            flexboxLayout.alignContent = AlignContent.STRETCH            alignContent0.text = "AlignContent.STRETCH"        }    }}

效果图：

默认

换行

flexDirection 切换



justifyContent .start

justifyContent .end

alignItems .start

alignItems .end

alignContent .start

alignContent .end

全居中

更多相关文章

  1. Android百度地图之方向感应和模式更改
  2. Android(安卓)切换卡(TabWidget)
  3. android 的layout
  4. Android中Activity切换时共享视图元素的切换动画（4.x兼容方案）
  5. Android(安卓)巧用 flexboxLayout 布局
  6. Android(安卓)游戏设计教程：游戏元素和工具
  7. android动态修改横竖屏
  8. Java集合框架——Android中的ArrayList源码分析
  9. Android(安卓)源码详解：View的事件分发机制

随机推荐

  1. 如何下载android源码与android内核源码
  2. Android(安卓)Studio使用教程（二）
  3. 02 Android基础理论
  4. Android里面各种控件的状态选择器
  5. Android面试系列文章2018之Android部分We
  6. Android(安卓)TextView内容过长加省略号，
  7. android RelativeLayout 属性学习
  8. android中view的一些属性
  9. Android之ListView中的分割线
  10. Android架构分析之Android消息处理机制（三