【Android -- 开源库】FlexboxLayout 的基本使用

已于 2023-02-02 16:46:42 修改
阅读量3k 收藏 6
点赞数 2
分类专栏： Android -- 开源库 文章标签： FlexboxLayout 可伸缩布局
于 2019-12-05 16:08:47 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/duoduo_11011/article/details/103405241
版权

在这里插入图片描述

一、简介

本篇文章就介绍一下它的用法和最新版添加的一些特性（支持集成RecyclerView）。
Github地址：https://github.com/google/flexbox-layout 。

FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android.
意思是：FlexboxLayout是一个Android平台上与CSS的 Flexible box 布局模块 有相似功能的库。Flexbox 是CSS 的一种布局方案，可以简单、快捷的实现复杂布局。

FlexboxLayout 可以理解成一个高级版的 LinearLayout，因为两个布局都把子 view 按顺序排列。两者之间最大的差别在于 FlexboxLayout 具有换行的特性。

二、属性

1. flexDirection
flexDirection 属性决定了主轴的方向，即FlexboxLayout里子Item的排列方向，有以下四种取值：

  • row (default)： 默认值，主轴为水平方向，从左到右。
  • row_reverse：主轴为水平方向，起点在有端，从右到左。
  • column：主轴为竖直方向，起点在上端，从上到下。
  • column_reverse：主轴为竖直方向，起点在下端，从下往上。
    在这里插入图片描述

2. flexWrap
flexWrap 这个属性决定Flex 容器是单行还是多行，并且决定副轴（与主轴垂直的轴）的方向。可能有以下3个值：

  • noWrap: 不换行，一行显示完子元素。
  • wrap: 按正常方向换行。
  • wrap_reverse: 按反方向换行。

3. justifyContent
justifyContent 属性控制元素主轴方向上的对齐方式，有以下5种取值：

  • flex_start (default): 默认值，左对齐
  • flex_end: 右对齐
  • center: 居中对齐
  • space_between: 两端对齐，中间间隔相同
  • space_around: 每个元素到两侧的距离相等。

4. alignItems
alignItems 属性控制元素在副轴方向的对齐方式，有以下5种取值：

  • stretch (default) ：默认值，如果item没有设置高度，则充满容器高度。
  • flex_start：顶端对齐
  • flex_end：底部对齐
  • center：居中对齐
  • baseline：第一行内容的的基线对齐。

5. alignContent
alignContent 属性控制多根轴线的对齐方式(也就是控制多行，如果子元素只有一行，则不起作用)，可能有一下6种取值：

  • stretch (default): 默认值，充满交叉轴的高度（测试发现，需要alignItems 的值也为stretch 才有效）。
  • flex_start: 与交叉轴起点对齐。
  • flex_end: 与交叉轴终点对齐。
  • center: 与交叉轴居中对齐。
  • space_between: 交叉轴两端对齐，中间间隔相等。
  • space_around: 到交叉轴两端的距离相等。

6. showDividerHorizontal
showDividerHorizontal 控制显示水平方向的分割线，值为none | beginning | middle | end其中的一个或者多个。

7. dividerDrawableHorizontal
dividerDrawableHorizontal 设置Flex 轴线之间水平方向的分割线。

8. showDividerVertical
showDividerVertical 控制显示垂直方向的分割线，值为none | beginning | middle | end其中的一个或者多个。

9. dividerDrawableVertical
dividerDrawableVertical 设置子元素垂直方向的分割线。

10. showDivider
showDivider 控制显示水平和垂直方向的分割线，值为none | beginning | middle | end其中的一个或者多个。

11. dividerDrawable
dividerDrawable 设置水平和垂直方向的分割线，但是注意,如果同时和其他属性使用，比如为 Flex 轴、子元素设置了justifyContent=“space_around” 、alignContent=“space_between” 等等。可能会看到意料不到的空间，因此应该避免和这些值同时使用。

三、使用

1. 效果图
在这里插入图片描述
2. 添加依赖

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

3. 布局文件

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/flexbox_layout"
    app:flexWrap="wrap"
    app:alignItems="center"
    app:alignContent="flex_start"
    app:flexDirection="row"
    app:justifyContent="flex_start"
    app:showDivider="beginning|middle"
    app:dividerDrawable="@drawable/divider_shape"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="程序员"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="影视天堂"
        app:layout_flexGrow="1"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_flexGrow="1"
        app:layout_alignSelf="flex_start"
        android:text="美食"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_flexGrow="1"
        app:layout_alignSelf="flex_start"
        android:text="漫画.手绘"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="广告圈"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="旅行.在路上"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="娱乐八卦"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="青春"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="谈写作"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="短篇小说"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="散文"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="摄影"
        app:layout_order="2"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"
        />
</com.google.android.flexbox.FlexboxLayout>

当然，你可以在代码中向 FlexboxLayout 布局动态添加子元素，代码如下：

mFlexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
        
        // 通过代码向FlexboxLayout添加View
        TextView textView = new TextView(this);
        textView.setBackground(getResources().getDrawable(R.drawable.label_bg_shape));
        textView.setText("Test  Label");
        textView.setGravity(Gravity.CENTER);
        textView.setPadding(30,0,30,0);
        textView.setTextColor(getResources().getColor(R.color.text_color));
        mFlexboxLayout.addView(textView);
        //通过FlexboxLayout.LayoutParams 设置子元素支持的属性
        ViewGroup.LayoutParams params = textView.getLayoutParams();
        if(params instanceof FlexboxLayout.LayoutParams){
            FlexboxLayout.LayoutParams layoutParams = (FlexboxLayout.LayoutParams) params;
            layoutParams.setFlexBasisPercent(0.5f);
        }

四、与 RecyclerView 的结合

1. 添加依赖

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

2. 使用 FlexboxLayoutManager 代替 LinearLayoutManager ,如下：

FlexboxLayoutManager manager = new FlexboxLayoutManager();
 //设置主轴排列方式
 manager.setFlexDirection(FlexDirection.ROW);
 //设置是否换行
 manager.setFlexWrap(FlexWrap.WRAP);
 manager.setAlignItems(AlignItems.STRETCH);

3. 在 Adapter 里设置 flexGrow :

ImageView mImageView =  rvBaseViewHolder.getImageView(R.id.image_src);
       mImageView .setImageResource(mData);

        ViewGroup.LayoutParams lp = mImageView.getLayoutParams();
        if (lp instanceof FlexboxLayoutManager.LayoutParams) {
            FlexboxLayoutManager.LayoutParams flexboxLp =
                    (FlexboxLayoutManager.LayoutParams) mImageView.getLayoutParams();
            flexboxLp.setFlexGrow(1.0f);
        }

4. 效果图
在这里插入图片描述

Kevin-Dev
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Android FlexboxLayout布局属性详解
jixuczy的博客
03-15 1339
答应大伙的备战金三银四，大厂面试真题来啦！这份资料我从春招开始，就会将各博客、论坛。网站上等优质的Android开发中高级面试题收集起来，然后全网寻找最优的解答方案。每一道面试题都是百分百的大厂面经真题+最优解答。包知识脉络 + 诸多细节。节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。给文章留个小赞，就可以免费领取啦~3000页Android开发者架构师核心知识笔记《960全网最全Android开发笔记》《379页Android开发面试宝典》
FlexboxLayout:Android版Flexbox-开源
04-25
FlexboxLayout是一个库项目，将CSS Flexible Box Layout Module的类似功能引入了Android。 从1.1.0版开始，该库有望与AndroidX一起使用。 如果您使用1.1.0或更高版本，则应迁移到AndroidX。 有两种在布局中使用...
android适配手机升级：最新布局FlexboxLayout替代LinearLayout（支持RecycleView）
2401_84121723的博客
04-04 674
现在都说互联网寒冬，其实无非就是你上错了车，且穿的少（技能），要是你上对车，自身技术能力够强，公司换掉的代价大，怎么可能会被裁掉，都是淘汰末端的业务Curd而已！现如今市场上初级程序员泛滥，这套教程针对Android开发工程师1-6年的人员、正处于瓶颈期，想要年后突破自己涨薪的，进阶Android中高级、架构师对你更是如鱼得水！为什么某些人会一直比你优秀，是因为他本身就很优秀还一直在持续努力变得更优秀，而你是不是还在满足于现状内心在窃喜！Android架构师之路很漫长，一起共勉吧！
Android FlexboxLayout布局属性详解(3)
最新发布
2401_84123265的博客
05-10 616
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Android 流式布局-FlexboxLayout与RecyclerView
乘风破浪的博客
10-25 5104
Android可伸缩布局－FlexboxLayout(支持RecyclerView集成) 1 . 前言 前几天看到Google官方的博客介绍了Google开源的一个强大的布局－FlexboxLayout，看见第一眼我心里的想法是，卧槽，Android 居然有这么一个强大的布局。作为一个有好奇心的工程狮，当然第一时间就去试了试手，效果非常赞，因此这篇文章就介绍一下它的用法和最新版
Android--开源优秀框架
超宇的博客
02-28 581
转载地址：http://blog.csdn.net/angle0306/article/details/78900051 github优秀框架：https://www.hellojava.com/a/64350.html 1. Retrofit　　 一句话介绍：Retrofit是一款类型安全的网络框架，基于HTTP协议，服务于Android和java语言 上榜理由：Retrofit以21....
Android Flexboxlayout使用详解
Jack921的专栏
07-27 1368
对于学习React Native或者前端的同学肯定对Flexbox 的有所了解，因为这是前端领域CSS的一种布局方案，现在google也开源了类似前端Flexbox的项目叫Flexboxlayout，这样android也可以用Flexboxlayout实现类似前端Flexbox的布局。首先Flexboxlayout有5大布局属性分别是flexDirection,flexWrap,justifyCon
Google 开源的 Android 排版库：FlexboxLayout
Admans的专栏
03-02 906
最近Google开源了一个项目叫「FlexboxLayout」。1.什么是 Flexbox简单来说 Flexbox 是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局，并且 React Native 也是使用的 Flex 布局。你可以简单的理解为 Flexbox 是CSS领域类似 Linearlayout 的一种布局，但是要...
Android可伸缩布局－FlexboxLayout(支持RecyclerView集成)
dengpeng_的博客
03-23 4271
1 . 前言 前几天看到Google官方的博客介绍了Google开源的一个强大的布局－FlexboxLayout，作为一个有好奇心的工程狮，当然第一时间就去试了试手，效果非常赞，因此这篇文章就介绍一下它的用法和最新版添加的一些特性（支持集成RecyclerView）,Github地址：https://github.com/google/flexbox-layout 。本文目录如下：
2017 Android GitHub 常用的开源库
qq_27623401的博客
06-27 182
原文地址现在 GitHub 上流行的开源库极大地节省了开发者从 0 开发的时间，很多公司和个人都在 GitHub 上开源自己的项目，今天我们就来整理一下 Android 开发中一些非常流行的库，也是我们必须掌握的，这样可以使我们在使用到时快速的查找到，这里的总结基本也都是自己在开发中用到的，也就是一些个人的见解，只做参考，不具有权威性。一、网络库1. RetrofitRetrofit 是 Squa...
推荐开源项目：FlexboxLayout-Tag - Android上的弹性布局库
gitblog_00026的博客
04-24 216
推荐开源项目：FlexboxLayout-Tag - Android上的弹性布局库 项目地址:https://gitcode.com/hongyangAndroid/FlexboxLayout-Tag 在Android开发中，为实现灵活多变的界面布局，我们常常需要借助一些强大的第三方库。今天要向大家推荐的就是这样一个工具——FlexboxLayout-Tag，它是一个基于Google的Flexb...
谷歌开源的Android排版库 FlexboxLayout.zip
07-19
FlexboxLayout 是 Android 上实现了类似 CSS Flexible Box Layout Module 效果的界面排版。示例代码：FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout); flexboxLayout....
Android-用心打造一款极致体验的TODO开源Android客户端
08-13
在Android开发过程中，常见的技术点包括但不限于：使用Retrofit或Volley进行网络请求，使用Gson或Jackson处理JSON数据，使用ButterKnife或 Dagger2 进行依赖注入，使用RxJava或LiveData处理异步操作，使用Room数据库...
十大热门Android开源项目 之 android-UniversalMusicPlayer
11-09
2. **用户界面适配**：为了在不同尺寸和形态的设备上提供良好的用户体验，项目会使用Android的布局设计原则和响应式设计，如使用FlexboxLayout或ConstraintLayout。此外，针对手表和车载设备，可能还使用了Android ...
Android-斗图App本着学习的心态现已把app源码开源放到Github
08-13
【Android开发-完整的App】这个开源项目展示了如何构建一个基于Android平台的斗图App，它提供了丰富的表情包资源，让用户可以参与到有趣的网络斗图活动中。开发者将源代码开放在Github上，鼓励学习者深入理解Android...
【Android -- 开源库】NiceSpinner 的基本使用
热门推荐
Kevin Learn Android
12-28 1万+
如今，好多 App 都有下拉选择框的需求，今天这个第三方下拉框可以满足我们大部分的需求噢！
【Android -- 开源库】Android-PickerView 的基本使用
Kevin Learn Android
09-20 1万+
`Android-PickerView` 是一款仿 `iOS` 的 `PickerView` 控件，带有 3D 圆弧效果，并封装了时间选择和选项选择这两种选择器。
【Android -- 开源库】VerticalTabLayout 的基本使用
Kevin Learn Android
02-28 8786
支持自定义Indicator大小 - 支持自定义Indicator位置 - 支持Indicator设置圆角 - 支持Tab设置Badge
pycharm怎么安装android-memory-info库
06-10
要在 PyCharm 中安装 android-memory-info 库，可以按照以下步骤进行操作： 1. 打开 PyCharm，创建一个新的 Python 项目或打开现有项目。 2. 在项目文件夹中打开终端或命令提示符。 3. 在终端或命令提示符中输入以下命令，使用 pip 安装 android-memory-info 库： ``` pip install android-memory-info ``` 4. 等待一段时间，直到安装完成。 安装完成后，你可以在 PyCharm 中导入 android-memory-info 库并使用它。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kevin-Dev

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值