android流式布局:FlexboxLayout用法探析(一)

FlexboxLayout是google官方开源的一个可以简单快速创建具有弹性功能的流式布局,它的目的是使用我们常见的布局模式,帮我们很好的实现UI区域的比例划分,比如三列布局,可以非常简单的实现。它支持非常多的属性设置,用起来很简单。

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

首先引入该库:

dependencies {
    compile 'com.google.android:flexbox:0.2.2'
}

然后是在布局文件中声明使用该控件:

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:justifyContent="flex_start">

    <TextView
        style="@style/TextViewStyle"
        android:text="我是谁?" />

    <TextView
        style="@style/TextViewStyle"
        android:text="我从哪里来?" />

    <TextView
        style="@style/TextViewStyle"
        android:text="我又将到哪里去呢?" />
    <TextView
        style="@style/TextViewStyle"
        android:text="To be or not to be," />

    <TextView
        style="@style/TextViewStyle"
        android:text="that is the question." />

    <TextView
        style="@style/TextViewStyle"
        android:text="哼哼,凡人!" />
</com.google.android.flexbox.FlexboxLayout>

其中,TextViewStyle如下:

    <style name="TextViewStyle">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:background">@drawable/round_corner_rect</item>
        <item name="android:gravity">center</item>
        <item name="android:padding">10dp</item>
        <item name="android:layout_margin">5dp</item>
    </style>

经过如上代码设置之后,布局显示如图:

我靠,啥情况,没显示全啊,还都挤在了一行,那就先暂时去掉几个view看看呢,去掉后三个再看看呢,

嗯,显示是正常了,但乍一看,也没啥啊,其实不然,这是因为你没有设置属性的原因,先才是重点,属性的设置。具体有哪些属性,可以查看一下源码,下面是一个个的来看一下不同属性的使用方法。

1.flexDirection属性,具体啥用处先装不知道,一会看效果,代码如下:

        <attr name="flexDirection">
            <enum name="row" value="0" />
            <enum name="row_reverse" value="1" />
            <enum name="column" value="2" />
            <enum name="column_reverse" value="3" />
        </attr>

给FlexboxLayout设置当前flexDirection属性,具体不同值产生的不同效果图如下:

(1)设置值为row时:

与上面的图没啥区别嘛,说明默认的flexDirection的值就是row咯。

(2)设置为row_reverse时:

发现了没,有变化了,第一个与第三个位置倒过来了,说明啥,布局开始的方向不同

那剩下的两个也不难理解,效果图如下:

(3)设置为column时:

(4)设置为column_reverse时:

通过上面4幅图的比较看出:flexDirection属性是设置FlexbodLayout绘制主轴方向的,

row主轴为水平方向,并且绘制方向是从左到右;

row_reverse主轴为水平方向,绘制方向是从右到左;

column主轴为竖直方向,绘制方向是从上到下;

column_reverse主轴为竖直方向,绘制方向是从下到上。

2.flexWrap属性,代码如下

        <attr name="flexWrap">
            <enum name="nowrap" value="0" />
            <enum name="wrap" value="1" />
            <enum name="wrap_reverse" value="2" />
        </attr>

给FlexboxLayout设置当前flexWrap属性,具体不同值产生的不同效果图如下:

当你设置了该属性的时候,你会发现,根据以上的布局,不管设置哪个参数都没啥变化,咋了?难道该属性没用,别急,多设置几个子View再试试呢,当时不是注释掉3个吗,现在打开吧,派上用场了。

(1)当设置nowrap时,效果如下

视图显示还是有问题啊,看来,系统默认的该属性的值就是它了。

(2)当设置为wrap时,效果如下

哎吆我靠,终于有令我眼前一亮的变化了,换行了,发现了没?!哈哈。。。

(3)再设置为wrap_reverse时看看:

又变化了!就是绘制的起始位置发生变化了。

总体大致明白这个属性是干啥的了。说白了就是声明FlexboxLayout是否支持多行,而nowrap就是不支持,默认的就是这个,另外2个都支持多行,只是绘制起始位置不同罢了。

3.justifyContent属相,代码如下:

        <attr name="justifyContent">
            <enum name="flex_start" value="0" />
            <enum name="flex_end" value="1" />
            <enum name="center" value="2" />
            <enum name="space_between" value="3" />
            <enum name="space_around" value="4" />
        </attr>

对于这个属性的使用,官方有一段说明:

        <!--
            Omitting flex-flow property since it's reflected in the parent flex container.
            Set the flexDirection and/or flexWrap to the parent flex container explicitly if you
            want to use the flex-flow similar way to the web.
         -->

大体的意思,就是要和flexDirection,flexWrap结合使用,不知道对不对,还是看效果图吧。

(1)设置为flex_start时:

很正常啊,说明默认的就是这一个值咯。

(2)flex_end:

咦,变化了,跑到左边了,看来是靠左对齐嘛

(3)center:

嗯,这就是居中显示嘛

(4)space_between:

这个看上去像是两边对齐了吧,效果就是这样的!

(5)space_around:

这个可以看做是(3)与(4)的结合体,居中显示并且距离边缘有一定的间隔!

到这里呢,你应该可以大体明白了,这个属性的作用是调整子view 的相对于父布局的对齐方式。

4.alignItems属性:代码如下

        <attr name="alignItems">
            <enum name="flex_start" value="0" />
            <enum name="flex_end" value="1" />
            <enum name="center" value="2" />
            <enum name="baseline" value="3" />
            <enum name="stretch" value="4" />
        </att

当前属性是干啥,但是根据名字中的Items来看,应该是关系到子view的,下面一一来看下效果(事先说明一下在,按照当前的布局,你会发现这是啥玩意,怎么又没变化了,其实不然,据我多方考证,这个属性大概或许可能在父布局FlexboxLayout设置确定值之后才会有效果,下面效果图是把高度确定一下的效果图)

(1)flex_start:

从图上看出,在高度确定之后,行与行之间是留有间隔的,并且貌似是大小相等的,绘制的起始位置是在整个区域顶部从头开始的。

(2)flex_end:

可以说与flex_start正好相反,就是绘制的位置是从底部结尾开始的,即底部开始绘制,行与行之间也是有间隔的并且相同。

(3)center:

这个看出,子view的整体绘制区域是在中心位置。

(4)baseline:

这个与flex_start的效果是相同的

(5)stretch:

这这什么情况,高度被占满了,说明这个值是这个意思,不管你父布局有多高,子view的所有高度必须和你相同!

通过以上说明,alignItems属性可以理解为,设置行属性的,行的间隔,行的高度,行绘制的区域规划。

5.alignContent属性,代码如下:

        <attr name="alignContent">
            <enum name="flex_start" value="0" />
            <enum name="flex_end" value="1" />
            <enum name="center" value="2" />
            <enum name="space_between" value="3" />
            <enum name="space_around" value="4" />
            <enum name="stretch" value="5" />
        </attr>

不啰嗦,不逼逼了,直接上图(说明:这个属性好像不可以和alignItems共用,也可能打开的方式不对,可以自行再验证)

(1)flex_start:

很正常,没看出啥来!

(2)flex_end:

出事了,绘制区域是从底部开始的,可以看为绘制区域占用从底部开始。

(3)center:

绘制区域占用中间位置,我们要处于核心地带。

(4)space_between:

占用了整个绘制区域,并且上下不能留有空白,就是说从开始到结束。

(5)space_around:

占用整个区域,上下留有空白,意思是说,上下留点位置,剩下的你都占满吧。

(6)stretch:

占用整个区域,并且行高变化,所有行充满整个父布局高度,简单点说,你多大,我们就多大。

以上发现,这个属性是针对子view中所占行的调整,即对填充view做整体的调整。

小结说明:

(1)flexDirection:确定view的绘制排列方式的

(2)flexWrap:是否支持多行显示

(3)justifyContent:调整view相对于父布局的对齐方式

(4)alignItems:子view的绘制方式,除了stretch整个值之外,其余的都是根据公式计算出行与行之间的间隔来确定子view的绘制

(5)alignContent:对内容绘制区域的设置。

以上截图都是在flexDirection=“row”下截的,其中对于未确定高度的情况下alignItems与alignContent没有实际的意义,赶脚!

时间: 2024-10-24 22:46:16

android流式布局:FlexboxLayout用法探析(一)的相关文章

android -------- 流式布局,支持单选、多选等

最近开发中有流式标签这个功能,网上学了下,来分享一下 Android 流式布局,支持单选.多选等,适合用于产品标签等. 效果图: 用法: dependencies { compile 'com.hyman:flowlayout-lib:1.1.2' } 布局: <!--max_select:-1为不限制选择数量,>=1的数字为控制选择tag的数量--> <com.zhy.view.flowlayout.TagFlowLayout android:id="@+id/id_f

android流式布局热门标签的实现

在日常的app使用中,我们会在android 的app中看见热门标签等自动换行的流式布局,今天就为大家分享一种android流式布局的实现. 先看最终效果 自定义流式布局的实现 package com.sunny.flowlayout.view; import java.util.ArrayList; import java.util.List; import android.content.Context; import android.util.AttributeSet; import an

Android流式布局实现

查看我的全部开源项目[开源实验室] 欢迎加入我的QQ群:[201055521],本博客客户端下载[请点击] 摘要 新项目用到了一种全新布局----Android标签流式布局的功能,正好一直说给大家讲自定义控件的实现,今天就为大家讲一种android流式布局的实现. 本文原创,转载请注明地址:http://blog.kymjs.com/ 正文 在日常的app使用中,我们会在android 的app中看见热门标签等自动换行的流式布局,今天,我们就来看看如何自定义一个类似热门标签那样的流式布局吧(源码

含有过滤功能的android流式布局

FilterFlowLayout 含有过滤功能的流式布局, 参考FlowLayout 可以去除宽度不在范围(比例或真实值)内的子view 可以设置最大行数 可以添加组件间水平间距 可以添加行间距 系统要求 Android 4.0以上 快速使用 <me.codeboy.android.lib.FilterFlowLayout xmlns:cb="http://schemas.android.com/apk/res-auto" android:id="@+id/filter

Android 自动换行流式布局的RadioGroup

用法 使用FlowRadioGroup代替RadioGroup import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.widget.RadioGroup; /** * 流式布局的RadioGroup */ public class FlowRadioGroup extends RadioGroup { public FlowRadioGr

Android之自定义流式布局FlowLayout

流式布局常常用于“热门标签”中,大概功能就是将所有的子View一行一行的排列,如果一行中剩下的空间不足以盛放下一个子View,则换到另一行继续排列.这样做的好处是不需要在主线程中自己麻烦定义控件的位置,只需要把生成的控件放到容器中,容器自己会自动排列.首先来看一下运行结果: Android中的自定义容器控件(继承自ViewGroup的控件)都有两个必须实现的方法:onMeasure()和onLayout() (1)onMeasure:测量子View的宽和高,设置自己的宽和高,根据自View的布局

Android中常见的热门标签的流式布局的实现

一.概述:在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出) 类似的自定义布局.下面我们就来详细介绍流式布局的应用特点以及用的的技术点: 1.流式布局的特点以及应用场景    特点:当上面一行的空间不够容纳新的TextView时候,    才开辟下一行的空间 原理图: 场景:主要用于关键词搜索或者热门标签等场景2.自定义ViewGroup,重点重写下面两个方法 1.o

Android自定义ViewGroup实现流式布局

实现宽度不足自动换行的流式布局: FlowLayout.java package com.jackie.flowlayout; import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.view.ViewGroup; /** * Created by Jackie on 8/28/15. */ public class FlowLayout

Android自定义之流式布局

流式布局,好处就是父类布局可以自动的判断子孩子是不是需要换行,什么时候需要换行,可以做到网页版的标签的效果.今天就是简单的做了自定义的流式布局. 具体效果: 原理: 其实很简单,Measure  Layout.只需要这两个步骤就可以搞定了.完全的手动去Measure  Layout. 我们看一下代码. 解释就在代码里面做注释了,因为使用为知笔记写的博客,格式不符合代码格式.大家可以看具体的源码.最后又源码下载地址. 1.Measure  测量 @Override protected void o