Android开发弹性布局FlexboxLayout知识总结

最新推荐文章于 2024-10-15 16:38:25 发布
最新推荐文章于 2024-10-15 16:38:25 发布
阅读量4k 收藏 3
点赞数 1
分类专栏： Android 基础 文章标签： 弹性布局 FlexboxLayout android控件 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li0978/article/details/113285873
版权

今天分享一下弹性布局FlexboxLayout的使用总结，又是一篇个人有道云笔记转移系列。早些年我们实现一个换行的标签云、实现一个不规则的九宫格、实现一个不规整瀑布流等等这些“嘿嘿嘿”设计总是要思索半天，FlexboxLayout的出现面对这些问题将为你节省几亿个脑细胞不在话下。我第一次接触这个布局方式还是从早前一个前端写H5的小哥嘴里得到的，我顺便举一反三搜了一下发现我们Android上也有，还是google官方出品，看来知识都是相通的。好了，废话不多说，直接淦！

GitHub

官方地址： https://github.com/google/flexbox-layout

接入依赖：

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

值得注意的是从1.1.0开始，该库直接对接AndroidX，如果想要使用1.1.0及以上版本尽快升级到AndroidX咯。

简单使用方式

XML

<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"
    app:alignItems="stretch"
    app:alignContent="stretch" >

    <TextView
        android:id="@+id/textview1"
        android:layout_width="120dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="50%"/>

    <TextView
        android:id="@+id/textview2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_alignSelf="center"/>

    <TextView
        android:id="@+id/textview3"
        android:layout_width="160dp"
        android:layout_height="80dp"
        app:layout_alignSelf="flex_end"/>

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

From Code

FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
flexboxLayout.setFlexDirection(FlexDirection.ROW);

View view = flexboxLayout.getChildAt(0);
FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams();
lp.setOrder(-1);
lp.setFlexGrow(2);
view.setLayoutParams(lp);

FlexboxLayoutManager (within RecyclerView)

// 针对所有item
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);

// 针对单个item
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);
}

相关属性

FlexboxLayout相关属性

下边我直接介绍相关属性使用方法

父布局属性

以下五种是父布局中所使用的，也是最常用的。

flexDirection

flexDirection属性是决定主轴的方向。好比LinearLayout的vertical(垂直) 和 horizontal(水平)方向。

  • row：一般为默认值，主轴为水平方向，起点在左端。
  • row-reverse: 主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

flexWrap

flexWrap属性是决定是否换行排列，默认情况下是不支持换行排列。

  • nowrap：不换行。
  • wrap: 正常方向换行。
  • wrap-reverse: 反方向换行。

justifyContent

justifyContent指定了项目在主轴上的对齐方式。

  • flex-start: 默认值为左对齐。
  • flex-end: 右对齐。
  • center: 居中。
  • space-between: 两端对齐，其间间距相等。
  • space-around: 两侧间距相等。

justifyContent图示

alignltems

alignltems指定项目在副轴（交叉轴，和主轴垂直）上的对齐方式。

  • flex-start: 交叉轴的起点对齐。(上)
  • flex-end: 交叉轴的终点对齐。(下)
  • center: 交叉轴的中点对齐。(中间线)
  • baseline: 第一行文字的基线对齐。()
  • stretch: 默认值是占满整个容器的高度，在未设置高度或者为auto。

alignltems图示

alignContent

alignContent指定多根轴线的对齐方式，如果只有一条轴，该属性不起任何作用。

  • flex-start: 与交叉轴的起点对齐。
  • flex-end: 与交叉轴的终点对齐。
  • center: 与交叉轴的中点对齐。
  • space-between: 与交叉轴的两端对齐，轴线之间的间隔分布均匀。
  • space-around: 每根轴线两侧的间隔相等。
  • stretch: 默认值为轴线占满整个交叉轴。

alignContent图示

分割线

水平分割线

采用showDividerHorizontal和dividerDrawableHorizontal属性设置水平分割线

  • showDividerHorizontal
    控制显示水平方向的分割线，值为none | beginning | middle | end其中的一个或者多个。
  • dividerDrawableHorizontal
    设置Flex 轴线之间水平方向的分割线。

垂直分割线

采用showDividerVertical和dividerDrawableVertical属性设置垂直分割线

  • showDividerVertical
    控制显示垂直方向的分割线，值为none | beginning | middle | end其中的一个或者多个。
  • dividerDrawableVertical
    设置子元素垂直方向的分割线。

水平垂直分割线

采用showDivider和dividerDrawable属性同时设置水平垂直分割线

  • showDivider
    控制显示水平和垂直方向的分割线，值为none | beginning | middle | end其中的一个或者多个。
  • dividerDrawable
    设置水平和垂直方向的分割线，但是注意，如果同时和其他属性使用，比如为Flex轴、子元素设置了justifyContent=“space_around”、alignContent=“space_between” 等等。可能会看到意料不到的结果，因此应该避免和这些值同时使用。

子布局属性

layout_order

这个属性可以改变布局子视图的顺序。默认情况下，子元素的显示和布局顺序与布局XML中的顺序相同。如果没有指定，则将1设置为默认值( CSS 中默认值为 0) ，数值越小，排列越靠前。

layout_flexGrow

放大比例。这个属性类似于 LinearLayout 中的 layout_weight 属性，如果没有指定，则将 0 设置为默认值。如果果同一 flex 行中的多个子 View 有正的 layout_flexGrow 值，那么剩余的空闲空间将根据它们声明的 layout_flexGrow 值的比例分布。

<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="300dp"
    android:layout_height="300dp"
    android:background="@android:color/black">

    <!--
         flex-grow（放大比例，剩余空间怎么分配) : 权重
         float FLEX_GROW_DEFAULT = 0f;

         剩余宽度 = 300 - (0 +  0 + 0) = 300
         tv1宽度 = 0 + 300 * (2 / 4) = 150
         tv2宽度 = 0 + 300 * (1 / 4) = 75
         tv3宽度 = 0 + 300 * (1 / 4) = 75
    -->

    <TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_purple"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv1"
        android:textColor="@android:color/white"
        app:layout_flexGrow="2" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#FFC107"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv2"
        app:layout_flexGrow="1" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#00BCD4"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv3"
        app:layout_flexGrow="1" />

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

layout_flexShrink

缩小比例。如果所有子 View 的 layout_flexShrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 layout_flexShrink 属性为0，其他子View都为 1，则空间不足时，layout_flexShrink 属性为 0 的不缩小。

<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="300dp"
    android:layout_height="500dp"
    android:background="@android:color/black">

    <!--
        flex-shrink （缩小比例，超出空间怎么压缩）
        默认： float FLEX_SHRINK_DEFAULT = 1f;

        计算方法：
        孩子宽度和 = 150 * 3 = 450
        450 - 300 = 150 即超出父布局宽度150
        tv1最终宽度 = 自身宽度150 - 超出宽度所占比例的宽度150 * (2 / 4)  = 75
        tv2最终宽度 = 自身宽度150 - 超出宽度所占比例的宽度150 * (1 / 4)  = 112.5
        tv3最终宽度 = 自身宽度150 - 超出宽度所占比例的宽度150 * (1 / 4)  = 112.5
    -->

    <TextView
        android:id="@+id/tv1"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_purple"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv1"
        android:textColor="@android:color/white"
        app:layout_flexShrink="2" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="#FFC107"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv2"
        app:layout_flexShrink="1" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="#00BCD4"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv3"
        app:layout_flexShrink="1" />

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

layout_alignSelf

子元素对齐。对齐方式，取值和align相同，覆盖align-items。

layout_alignSelf 属性可以给子元素设置对齐方式，这个属性的功能和alignItems一样，

只不过alignItems作用于所有子元素，而 layout_alignSelf 作用于单个子元素。

默认值为auto, 表示继承alignItems属性，如果为auto以外的值，则会覆盖alignItems属性。有以下6种取值：

  • auto (default)
  • flex_start
  • flex_end
  • center
  • baseline
  • stretch

layout_flexBasisPercent

子元素占父元素百分比。layout_flexBasisPercent的值为一个百分比，表示设置子元素的长度为它父容器长度的百分比，如果设置了这个值，那么通过这个属性计算的值将会覆盖layout_width或者layout_height的值。

但是需要注意，这个值只有设置了父容器的长度时才有效，默认值是-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="300dp"
    android:layout_height="300dp"
    android:background="@android:color/black">

    <!--
        layout_flexBasisPercent 
        决定了在分配多余空间之前，子元素占据的主轴空间的百分比。
        默认为自身大小     
    -->

    <TextView
        android:id="@+id/tv1"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_purple"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv1"
        android:textColor="@android:color/white"
        app:layout_flexBasisPercent="40%" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:background="#FFC107"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv2"
        app:layout_flexBasisPercent="30%" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:background="#00BCD4"
        android:gravity="center"
        android:padding="5dp"
        android:text="tv3"
        app:layout_flexBasisPercent="20%" />

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

layout_minWidth / layout_minHeight

这个属性设置了子 View 的最小的宽和高。在 layout_flexShrink 模式下，再怎么缩小也不会小于这个值

layout_maxWidth / layout_maxHeight

这个属性设置了子 View 的最大的宽和高。在 layout_flexGrow 模式下，再怎么放大也不会大于这个值

layout_wrapBefore

这个属性使得子 View 可以强制换行，不管在 main size 剩余空间有多少。这种对于类似 grid 网格布局中特殊设置某一个 item 布局特别有用。默认 false。

最后

我是i猩人，总结不易，转载注明出处，喜欢本篇文章的童鞋欢迎点赞、关注哦。

参考

  • https://github.com/google/flexbox-layout
  • https://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content
乂星人
关注
专栏目录
【Android】弹性布局- - FlexboxLayout
fjnu_se的博客
12-11 1279
【Android】弹性布局- - FlexboxLayout 介绍 提到布局，大家都知道ConstraintLayout、LinearLayout、RelativeLayout等等。那么今天我们来介绍一下Google I/O在2016年发布的FlexboxLayout,这款布局听说称之为高级版的LinearLayout,FlexboxLayout相对于LinearLayout来说主要就是多了一个“换行”的特性。 Flexbox是web前端里面css领域的一种布局，跟LinearLayout很相似，但是相对来
Android FlexboxLayout布局属性详解，安卓开发新手入门教程
m0_64382743的博客
11-29 2299
<TextView android:id="@+id/textview3" android:layout_width=“120dp” android:layout_height=“90dp” android:layout_margin=“2dp” android:background="#ee998f" android:gravity=“center” android:text=“3” /> <TextView android:id="@+id/textview4" android:lay
FlexboxLayout-----Android弹性布局
08-14
FlexboxLayout是一个Android平台上与CSS的弹性盒子布局模块 有相似功能的库。博客地址：http://blog.csdn.net/dickyqie/article/details/77155327
安卓流式布局实现记录
最新发布
m0_50774720的博客
10-15 529
第一种和正常写布局一样，只要把内容控件写进去就行，就不说了，主要说第二种。2、动态添加view到FlexboxLayout中。这里有两种实现方式：xml中直接写和动态添加view。创建一个子布局：item_baggage.xml。3、流式布局中内容的填充。
FlexboxLayout——Android弹性布局
weixin_34232744的博客
08-14 110
FlexboxLayout是一个Android平台上与CSS的 Flexible box 弹性盒子布局模块 有相似功能的库。Flexbox 是CSS 的一种布局方案，可以简单、快捷的实现复杂布局。 FlexboxLayout项目开源地址：https://github.com/google/flexbox-layout 效果如图下：  　　　　　　 项目中添加依赖 compile 'com.goo...
Android 弹性布局 FlexboxLayout （三）：flex-item子view相关属性
火星男孩的分享空间
06-17 801
layout_order 排列顺序 <?xml version="1.0" encoding="utf-8"?> <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="300dp"
Android 弹性布局 FlexboxLayout
m0_59769719的博客
09-16 832
flex-direction：主轴方向 row（默认值）：水平显示，起点在左端 row-reverse：水平显示，起点在右端和row相反 column：垂直显示，起点在顶部 column-reverse：垂直显示，起点在底部和column相反 flex-wrap：是否换行 nowrap（默认值）：不换行 wrap：按正常方向换行，第一行在上方 wrap-reverse：按反方向换行，第一行在下方 justify-content：主轴对齐 flex-start（默认值）：主轴方向起点对齐
android弹性布局,Android弹性布局(FlexboxLayout)
weixin_39564510的博客
05-27 352
Flexbox简介flexbox是属于CSS的一种布局方案，可以简单、完整、响应式的实现各种页面布局。谷歌将其引入以提高复杂布局的能力。源码传送门Flexbox的布局和相关名称上图模型中包含以下概念flex container 父容器，用来包含子元素，对应于FlexboxLayout类。flex item 子元素，父容器直接包裹的元素。main axis 主轴，子元素通过主轴来排列，如上图是从左往...
Android-基于FlexboxLayout的流式布局控件比FlowLayout好用
08-12
在Android应用开发中，布局（Layout）是构建用户界面的核心元素。不同的布局管理器负责不同类型的组件排列方式，为用户提供多样化的视觉体验。本篇文章将深入探讨基于FlexboxLayout的流式布局控件，以及为什么它相比...
Android开发之玩转FlexboxLayout布局（可实现流式布局）
06-20
最近发现了一个好的布局控件，有流式布局的效果，FlexboxLayout，我写了一个例子，上传到这里，和大家交流学习，希望大家多多指正
FlexboxLayout:Android版Flexbox-开源
04-25
FlexboxLayout是一个库项目，将CSS Flexible Box Layout Module的类似功能引入了Android。 从1.1.0版开始，该库有望与AndroidX一起使用。 如果您使用1.1.0或更高版本，则应迁移到AndroidX。 有两种在布局中使用Flexbox的方法。 第一个是FlexboxLayout，它像LinearLayout和RelativeLayout一样扩展了ViewGroup。 您可以从布局XML中指定属性。 第二个是FlexboxLayoutManager，可以在RecyclerView中使用。 使用FlexboxLayoutManager的优势在于，它可以循环使用屏幕上的视图，以便在用户滚动时重新显示出现的视图，而不是膨胀每个单独的视图，这会占用更少的内存，尤其是当Flexbox中包含的项目数很大时容器很大。
Android开发之玩转FlexboxLayout布局
weixin_30460489的博客
08-23 915
在这之前，我曾认真的研究过鸿洋大神的Android 自定义ViewGroup 实战篇 -> 实现FlowLayout，按照大神的思路写出了一个流式布局，所有的东西都是难者不会会者不难，当自己能自定义流式布局的时候就会觉得这东西原来很简单了。如果各位小伙伴也看过那篇文章的话，应该知道自定义流式布局还是非常麻烦的，不过Google今年开源了新的容器，就是这个FlexboxLayout，如果你...
android自定义弹性布局,Android弹性布局
weixin_28973649的博客
05-26 759
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？Flexbox简介简单来说 Flexbox 是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局，并且 React Native 也是使用的 Flex 布局。谷歌将其引入以提高复杂布局的能力。Github 源码传送门Flexbox的布局和相关名称上图...
Android FlexboxLayout布局
周平的博客
05-06 3613
FlexboxLayout 布局详解
Google开源的FlexboxLayout
stormzhang的专栏
05-15 371
阅读本文大概需要8分钟。最近Google开源了一个项目叫「FlexboxLayout」，但是貌似没多少资料对这个项目介绍的，那么今天来讲讲这个项目的作用以及简单的使用介绍...
Android 弹性布局 FlexboxLayout了解一下
qq_43093708的博客
01-04 297
RelativeLayout、LinearLayout等常用布局相信大家早已耳熟能详，今天给大家介绍一款新的布局方式「弹性布局」--FlexboxLayout。Flex是Flexible Box的缩写，意为「弹性布局」，在前端css样式中应用甚为广泛，之前做过React-Native和微信小程序，页面布局大多使用flex弹性布局，可以在不同屏幕尺寸上提供一致的布局结构，可以简便、完整、响应式地实现...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值