android开发笔记之可伸缩布局FlexboxLayout

可伸缩布局FlexboxLayout

gitbug flexbox-layout
https://github.com/google/flexbox-layout

FlexboxLayout官方定义:
FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android.

布局文件的一个官方样例:

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

实践代码:

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.order = -1;
lp.flexGrow = 2;
view.setLayoutParams(lp);

FlexboxLayoutManager (within RecyclerView):

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

在build.gradle添加依赖:

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

官网是要1.1.0,但是需要内置到AndroidX,我测试是android 8.1,所以我使用的是1.0.0版本。

Android Demo

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:flexWrap="wrap"
    app:alignItems="center"
    app:alignContent="flex_start"
    app:flexDirection="row"
    app:justifyContent="flex_start"
    app:showDivider="beginning|middle"
    tools:context=".FlexBoxLayoutMainActivity">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            app:layout_alignSelf="flex_start"
            android:text="01"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            app:layout_alignSelf="flex_start"
            android:text="02"
            app:layout_flexGrow="1"
            android:gravity="center" />
        <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="03"
            android:gravity="center" />
        <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="04"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            app:layout_alignSelf="flex_start"
            android:text="05"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            app:layout_alignSelf="flex_start"
            android:text="06"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            app:layout_alignSelf="flex_start"
            android:text="07"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            app:layout_alignSelf="flex_start"
            android:text="08"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            app:layout_alignSelf="flex_start"
            android:text="09"
            android:gravity="center" />

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

效果图:
在这里插入图片描述

具体样例

FlexboxLayout 支持的属性:

flexDirection

flexDirection属性决定了主轴的方向,即FlexboxLayout里子Item的排列方向,有以下四种取值:
row (default): 默认值,主轴为水平方向,起点在左端,从左到右。
row_reverse:主轴为水平方向,起点在右端,从右到左。
column:主轴为竖直方向,起点在上端,从上到下。
column_reverse:主轴为竖直方向,起点在下端,从下往上。
如图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

flexWrap

flexWrap 这个属性决定Flex 容器是单行还是多行,并且决定副轴(与主轴垂直的轴)的方向。可能有以下3个值:
noWrap: 不换行,一行显示完子元素。
wrap: 按正常方向换行。
wrap_reverse: 按反方向换行。

justifyContent

justifyContent 属性控制元素主轴方向上的对齐方式,有以下5种取值:
flex_start (default): 默认值,左对齐
flex_end: 右对齐
center: 居中对齐
space_between: 两端对齐,中间间隔相同
space_around: 每个元素到两侧的距离相等。

alignItems

alignItems 属性控制元素在副轴方向的对齐方式,有以下5种取值:
stretch (default) :默认值,如果item没有设置高度,则充满容器高度。
flex_start:顶端对齐
flex_end:底部对齐
center:居中对齐
baseline:第一行内容的的基线对齐。

alignContent

alignContent 属性控制多根轴线的对齐方式(也就是控制多行,如果子元素只有一行,则不起作用),可能有一下6种取值:
stretch (default): 默认值,充满交叉轴的高度(测试发现,需要alignItems 的值也为stretch 才有效)。
flex_start: 与交叉轴起点对齐。
flex_end: 与交叉轴终点对齐。
center: 与交叉轴居中对齐。
space_between: 交叉轴两端对齐,中间间隔相等。
space_around: 到交叉轴两端的距离相等。

showDividerHorizontal

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

dividerDrawableHorizontal

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

showDividerVertical

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

dividerDrawableVertical

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

showDivider

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

dividerDrawable

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

FleboxLayout子元素支持的属性介绍

layout_order

layout_order 属性可以改变子元素的排列顺序,默认情况下,FlexboxLayout子元素的排列是按照xml文件中出现的顺序。默认值为1,值越小排在越靠前。

layout_flexGrow(float)

layout_flexGrow 子元素的放大比例, 决定如何分配剩余空间(如果存在剩余空间的话),默认值为0,不会分配剩余空间,如果有一个item的 layout_flexGrow 是一个正值,那么会将全部剩余空间分配给这个Item,如果有多个Item这个属性都为正值,那么剩余空间的分配按照layout_flexGrow定义的比例(有点像LinearLayout的layout_weight属性)。

layout_flexShrink(float)

layout_flexShrink:子元素缩小比例,当空间不足时,子元素需要缩小(设置了换行则无效),默认值为1,如果所有子元素的layout_flexShrink 值为1,空间不足时,都等比缩小,如果有一个为0,其他为1,空间不足时,为0的不缩小,负值无效。

layout_alignSelf

layout_alignSelf 属性可以给子元素设置对齐方式,上面讲的alignItems属性可以设置对齐,这个属性的功能和alignItems一样,只不过alignItems作用于所有子元素,而layout_alignSelf 作用于单个子元素。默认值为auto, 表示继承alignItems属性,如果为auto以外的值,则会覆盖alignItems属性。有以下6种取值:
auto (default)
flex_start
flex_end
center
baseline
stretch
除了auto以外,其他和alignItems属性一样。

layout_flexBasisPercent (fraction)

layout_flexBasisPercent的值为一个百分比,表示设置子元素的长度为它父容器长度的百分比,如果设置了这个值,那么通过这个属性计算的值将会覆盖layout_width或者layout_height的值。但是需要注意,这个值只有设置了父容器的长度时才有效(也就是MeasureSpec mode 是 MeasureSpec.EXACTLY)。默认值时-1。

layout_minWidth / layout_minHeight (dimension)

强制限制 FlexboxLayout的子元素(宽或高)不会小于最小值,不管layout_flexShrink这个属性的值为多少,子元素不会被缩小到小于设置的这个最小值。

layout_maxWidth / layout_maxHeight (dimension)

这个和上面的刚好相反,强制限制FlexboxLayout子元素不会大于这个最大值, 不管layout_flexGrow的值为多少,子元素不会被放大到超过这个最大值。

layout_wrapBefore

layout_wrapBefore 属性控制强制换行,默认值为false,如果将一个子元素的这个属性设置为true,那么这个子元素将会成为一行的第一个元素。这个属性将忽略flex_wrap 设置的 noWrap值。

参考资料

1.Android可伸缩布局-FlexboxLayout(支持RecyclerView集成)
http://www.cnblogs.com/huolongluo/p/6607877.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

hfreeman2008

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

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

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

打赏作者

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

抵扣说明:

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

余额充值