FlexboxLayout练习

最新推荐文章于 2024-04-06 01:01:14 发布
最新推荐文章于 2024-04-06 01:01:14 发布
阅读量326 收藏
点赞数
分类专栏： Android 文章标签： android java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43662090/article/details/112241185
版权

一直以来有用FlexboxLayout, 但是没有对属性进行系统的整理, 现在整理下
主要参看文档
https://juejin.cn/post/6844903697500241928#heading-4
https://github.com/google/flexbox-layout
源码在Gitee上 https://gitee.com/you-zijun/androidlxc/tree/master/app/src/main/java/com/plbear/lxc/module/view

1. 引入

引入最新版本

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

默认的布局文件如下

<?xml version="1.0" encoding="utf-8"?>
<layout>

    <com.google.android.flexbox.FlexboxLayout 
    	xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#AAD155"
            android:padding="30dp"
            android:text="1"
            android:textSize="20sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#DD8BA7"
            android:padding="40dp"
            android:text="2"
            android:textSize="20sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#EFB684"
            android:padding="20dp"
            android:text="3"
            android:textSize="20sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#B08AE6"
            android:padding="70dp"
            android:text="4"
            android:textSize="20sp" />
    </com.google.android.flexbox.FlexboxLayout>
</layout>

2. FlexboxLayout属性

2.1 flexDirection 主轴方向

用于控制方向, 四个属性

  • row效果如下 水平布局, 默认效果
    在这里插入图片描述
  • row_reverse 水平翻转布局, 水平布局, 只不过从右向左
    在这里插入图片描述
  • column 竖直布局
    在这里插入图片描述
  • column_reverse 列反向布局
    在这里插入图片描述

flexWrap主轴换行

  • nowrap 不换行
    默认是不换行的, 看下效果
    在这里插入图片描述
    可以看到都挤不下了!
  • wrap 换行
    在这里插入图片描述
    放不下了之后自动换行
  • wrap_reverse “逆向换行”?
    这个有点不太好理解, 看下效果
    在这里插入图片描述
    可以看到他会先从底部布局, 然后换行依次向上换行.
  • 如果我们将row_reverse和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:layout_height="match_parent"
    app:flexDirection="row_reverse"
    app:flexWrap="wrap_reverse">

效果如下
在这里插入图片描述

2.2 justifyContent 主轴对齐规则

  • flex_start 左对齐
  • flex_end 右对齐
  • center 居中对齐
  • space_between 两端对齐, 项目之间的间隔相等
  • space_around 平分间隔
  • space_evenly 平分间隔, 响度与space_around, 两端的与左右编剧的间隔要大一点

2.2.1 flex_start

默认效果, 左对齐
在这里插入图片描述

2.2.2 flex_end 右对齐

在这里插入图片描述

2.2.3 center 居中对齐

在这里插入图片描述

2.2.4 space_between

在这里插入图片描述

2.2.5 space_around

在这里插入图片描述

2.2.6 space_evently

可以留意与space_around的区别. 两端据左右编剧的间隔要大一点
在这里插入图片描述

2.3 alignItems 各个元素之间的对齐方式

2.3.1 flex_start

默认, start对齐
在这里插入图片描述

2.3.2 flex_end

end对齐
在这里插入图片描述

2.3.3 center

居中对齐
在这里插入图片描述

2.3.4 baseline

baseline与center的区别, 如果熟悉TextView的就很容易理解, 我们将布局文件调整下, 将第一个TextView调整的比较大, 达到多行的目的

<TextView
    android:layout_width="70dp"
    android:layout_height="wrap_content"
    android:background="#AAD155"
    android:paddingVertical="30dp"
    android:text="1232323"
    android:textSize="20sp" />

看下baseline的效果
在这里插入图片描述
看下center的效果
在这里插入图片描述
以上是多行效果下的区别, 如果用特殊的字母文字, 如泰文, 意大利语等, 应该也可以看出区别, 不再列举

2.3.5 stretch 拉伸

这个好玩了, 将短的都拉伸
在这里插入图片描述

2.4 alignContent 副轴的对齐规则

2.4.1 flex_start 顶对齐

在这里插入图片描述

2.4.2 flex_end 底对齐

在这里插入图片描述

2.4.3 center 居中对齐

在这里插入图片描述

2.4.4 span_between 两端对齐

在这里插入图片描述

2.4.5 span_around 平分间隔

在这里插入图片描述

2.4.6 stretch 拉伸

在这里插入图片描述

2.5 showDividerHorizontal和dividerDrawableHorizontal

顾名思义, 这个是定义水平方向的分割图片
我们首先定义一张巨丑的图片

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="#EF2C6E"
        android:dashWidth="10dp"
        android:dashGap="10dp" />
    <solid android:color="#F6EFB1"/>
    <size
        android:width="100dp"
        android:height="100dp" />
</shape>

然后定义水平方向的分割线

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:dividerDrawableHorizontal="@drawable/divide"
    app:flexWrap="wrap"
    app:justifyContent="space_around"
    app:showDividerHorizontal="middle">

在这里插入图片描述
如果定义

app:showDividerHorizontal="beginning"

在这里插入图片描述

2.6 showDividerVertical与dividerDrawableVertical

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:dividerDrawableVertical="@drawable/divide"
    app:flexWrap="wrap"
    app:justifyContent="space_around"
    app:showDividerVertical="middle">

在这里插入图片描述
如果定义到换个位置

app:showDividerVertical="beginning"

在这里插入图片描述

2.7 showDivider与dividerDrawable

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:dividerDrawable="@drawable/divide"
    app:flexWrap="wrap"
    app:justifyContent="space_around"
    app:showDivider="middle">

在这里插入图片描述

3 子元素属性

3.1 layout_order

手动定义子元素的顺序, 生效的规则是

  1. 默认所有元素的layout_order的取值是0
  2. 如果layout_order的值相同, 则按照view的默认添加顺序(或者xml中的定义顺序
  3. 如果layout_order值不同, 按照layout_order的定义顺序

我们手动调整下第2个控件的顺序, 给到layout_order的值是-1

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#DD8BA7"
    android:padding="40dp"
    android:text="2"
    android:textSize="20sp"
    app:layout_order="-1" />

在这里插入图片描述
可以看到View2 被放到了View1的位置

3.2 layout_alignSelf

单独调整对齐方式, 同alignItems的效果

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#DDC98B"
    android:padding="30dp"
    android:text="1"
    android:textSize="20sp"
    app:layout_alignSelf="center" />

在这里插入图片描述

3.3 layout_flexGrow

同LinearLayout的weight属性

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#DDC98B"
    android:padding="30dp"
    android:text="1"
    android:textSize="20sp"
    app:layout_flexGrow="1" />

在这里插入图片描述

3.4 layout_flexShrink

缩小比例, 当空间不足的时候, 定义缩小的比例. 默认值是1, 值越大, 则缩小的越大

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#DDC98B"
    android:padding="30dp"
    android:text="1"
    android:textSize="20sp"
    app:layout_flexShrink="10" />

在这里插入图片描述
可以看到View1被大范围缩小了

3.5 layout_flexBasisPercent

这个简直就是神器啊. 百分比布局,

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:flexWrap="wrap"
        app:showDivider="middle">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#DDC98B"
            android:padding="30dp"
            android:text="1"
            android:textSize="20sp"
            app:layout_flexBasisPercent="50%" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#DD8BA7"
            android:padding="40dp"
            android:text="2"
            android:textSize="20sp"
            app:layout_flexBasisPercent="40%" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#EFB684"
            android:padding="20dp"
            android:text="3"
            android:textSize="20sp"
            app:layout_flexBasisPercent="20%" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#B08AE6"
            android:padding="70dp"
            android:text="4"
            android:textSize="20sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#96DAB7"
            android:padding="30dp"
            android:text="5"
            android:textSize="20sp" />

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

在这里插入图片描述
可以看到, 他会手动的划分百分比, 如果一行放不下, 就会自动放到下一行
如果不换行呢? 效果如下
在这里插入图片描述

柚子君下
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
FlexboxLayout-----Android弹性布局
08-14
FlexboxLayout是一个Android平台上与CSS的弹性盒子布局模块 有相似功能的库。博客地址：http://blog.csdn.net/dickyqie/article/details/77155327
flexBoxLayout.zip
10-24
本资源时关于CSS 弹性盒子布局 的练习代码，可参考、可二次开发编辑练习。 CSS 弹性盒子布局 是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何...
Android之FlexboxLayout弹性布局的介绍
neuHenry
06-26 1576
Google最近开源了一个和CSS3中FlexBox布局功能类似的flexbox-layout，项目地址：google/flexbox-layout ，Google将其引入以提高复杂布局的能力。 　　FlexBoxLayout可以理解成一种更高级的LinearLayout，不过比LinearLayout更加强大和灵活。
Android FlexboxLayout布局属性详解，快醒醒吧
m0_60229361的博客
03-27 695
column：主轴为垂直方向，起点在上沿：主轴为垂直方向，起点在下沿我们添加属性，设置未纵向并且起点在下端，在xml添加属性可以看到项目是从底部开始由下而上排列的。默认和一样是不带换行属性的，但是flexWrap属性可以支持换行排列。这就是方便的地方了。换行方式有两种，一种是按项目排列方向换行，一种是反方向换行nowrap：不换行wrap：按正常方向换行：按反方向换行我们设置按照正常方向换行，添加属性属性定义了项目在主轴上的对齐方式。flex_start（默认值）：左对齐flex_end：右对齐。
流式布局标准实现：FlexboxLayout使用指南
热门推荐
白泽的博客
05-15 1万+
FlexboxLayout是什么 FlexboxLayout是Google开源的一个强大的控件，直接继承ViewGroup，效果类似于加强版的LinearLayout，但与LinearLayout并无关联。 官方原话是： FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible...
清云小程序教程十七：stretch和baseline
king3062211087的专栏
07-26 706
原文链接：http://www.0575yun.com/articledetail/id/68.html 之前我们讲了“justify-content”和“align-items”2个属性，我们已经知道“justify-content”常用有5种取值：“flex-start”、“flex-end”、“center”、“space-between”和“space-around”；而“ali...
官方 Flexbox Layout（弹性盒子布局） 的使用
M-Ellen的博客
03-06 2100
介绍
【Android】弹性布局- - FlexboxLayout
SplashBoys的博客
12-11 2882
介绍
FlexboxLayout全攻略(Google官方灵活实现流式布局控件)
白泽的博客
04-14 6349
一、FlexboxLayout是什么 FlexboxLayout是Google开源的一个强大的控件，直接继承ViewGroup，效果类似于加强版的LinearLayout，但与LinearLayout并无关联。 官方原话是： FlexboxLayout is a library project which brings the similar capabilities of CSS Flexib...
【Android -- 开源库】FlexboxLayout 的基本使用
Kevin Learn Android
12-05 2844
本篇文章就介绍一下它的用法和最新版添加的一些特性（支持集成RecyclerView）。
Android 巧用 flexboxLayout 布局
Dream It Possible
06-01 1万+
FlexBoxlayout是Google推出的开源的可伸缩性布局，在项目中也会经场使用，大大提高了用户的体验。 compile 'com.google.android:flexbox:1.0.0' 有前端基础的同学估计都知道 CSS 中这个布局，用来为盒状模型提供最大的灵活性。因为 android 中这个库属性和 CSS 中 都一样，并且阮一峰老师写的前端知识真的很通俗易懂，所以这里的介绍大多来自Flex 布局教程。 采用 Flex 布局的元素，称为 Flex 容器（flex containe.
Android利用FlexboxLayout轻松实现流动布局
08-30
flexbox是属于CSS的一种布局方案，可以简单、完整、响应式的实现各种页面布局。...下面这篇文章主要给大家介绍了在Android中利用FlexboxLayout轻松实现流动布局的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
flexboxLayout,.zip
09-25
地址：https://mp.weixin.qq.com/s/mi3ck7xujmmi戋u rc51-r4g
FlexBoxLayout流式布局
08-11
这是一个完整的FlexBoxLayout，如果加载数据直接改掉数据源就可以，方便简单。
Flutter 布局（四）- Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth详解
金戈鐡馬
03-04 874
Baseline这个控件，做过移动端开发的都会了解过，一般文字排版的时候，可能会用到它。它的作用很简单，根据child的baseline，来调整child的位置。例如两个字号不一样的文字，希望底部在一条水平线上，就可以使用这个控件，是一个非常基础的控件。
Android FlexboxLayout布局属性详解(1)，来自阿里巴巴佛系Android程序员的指南
最新发布
2401_84149743的博客
04-06 418
好像并没有换行啊，别急骚年，接下来我们一一介绍的一些常用属性属性决定主轴项目排列方向。类似的vertical和horizontal，但是更加强大，不仅支持横向和纵向还可以设置不同的排列的起点。row（默认值）：主轴为水平方向，起点在左端：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿：主轴为垂直方向，起点在下沿我们添加属性，设置未纵向并且起点在下端，在xml添加属性可以看到项目是从底部开始由下而上排列的。默认和一样是不带换行属性的，但是flexWrap属性可以支持换行排列。这就是。
Android FlexboxLayout布局
周平的博客
05-06 3168
FlexboxLayout 布局详解
Android FlexboxLayout布局属性详解
jixuczy的博客
03-15 1237
答应大伙的备战金三银四，大厂面试真题来啦！这份资料我从春招开始，就会将各博客、论坛。网站上等优质的Android开发中高级面试题收集起来，然后全网寻找最优的解答方案。每一道面试题都是百分百的大厂面经真题+最优解答。包知识脉络 + 诸多细节。节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。给文章留个小赞，就可以免费领取啦~3000页Android开发者架构师核心知识笔记《960全网最全Android开发笔记》《379页Android开发面试宝典》
flexboxlayout 动态添加view
07-13
在使用 FlexboxLayout 动态添加 View 的过程中，你可以按照以下步骤进行操作： 步骤 1：获取 FlexboxLayout 实例 首先，你需要获取到 FlexboxLayout 的实例，可以通过 findViewById 方法或者在布局文件中声明的方式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值