Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)

时间:2022-10-02 05:27:09

转载地址:http://blog.csdn.net/u012702547/article/details/52293593

在这之前,我曾认真的研究过鸿洋大神的Android 自定义ViewGroup 实战篇 -> 实现FlowLayout,按照大神的思路写出了一个流式布局,所有的东西都是难者不会会者不难,当自己能自定义流式布局的时候就会觉得这东西原来很简单了。如果各位小伙伴也看过那篇文章的话,应该知道自定义流式布局还是非常麻烦的,不过Google今年开源了新的容器,就是这个FlexboxLayout,如果你玩过前端开发或者玩过RN,就会觉得这个FlexboxLayout真是简单,OK,那我们今天就来看看这个FlexboxLayout的使用吧!先来看看显示效果:

Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)

OK,我们来看看这个东东要怎么实现吧!

1.引入项目

使用之前当然是先引入了,Google在GitHub上开源了这个控件,地址如下:

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

OK,在项目中引入方式如下:

在module的gradle文件中添加如下一行:

[java]  view plain  copy  print ?
  1. compile 'com.google.android:flexbox:0.2.3'  

版本号为本文发布时的最新版本号。

引入之后就可以使用了。

2.基本用法

根据GitHub上给我们的Demo,可以看到FlexboxLayout在使用的过程中只需要用容器将我们的子控件包裹起来就行了,主布局文件如下:

[java]  view plain  copy  print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  5.     xmlns:tools="http://schemas.android.com/tools"  
  6.     android:layout_width="match_parent"  
  7.     android:layout_height="match_parent"  
  8.     tools:context="org.lenve.flexbox.MainActivity">  
  9.   
  10.     <com.google.android.flexbox.FlexboxLayout  
  11.         android:layout_width="match_parent"  
  12.         android:layout_height="wrap_content"  
  13.         app:flexWrap="wrap">  
  14.   
  15.         <TextView  
  16.             android:layout_width="wrap_content"  
  17.             android:layout_height="wrap_content"  
  18.             android:layout_margin="8dp"  
  19.             android:background="@drawable/tv_bg"  
  20.             android:padding="8dp"  
  21.             android:text="1.水陆草木之花"/>  
  22.   
  23.         <TextView  
  24.             android:layout_width="wrap_content"  
  25.             android:layout_height="wrap_content"  
  26.             android:layout_margin="8dp"  
  27.             android:background="@drawable/tv_bg"  
  28.             android:padding="8dp"  
  29.             android:text="2.可爱者甚蕃"/>  
  30.   
  31.         <TextView  
  32.             android:layout_width="wrap_content"  
  33.             android:layout_height="wrap_content"  
  34.             android:layout_margin="8dp"  
  35.             android:background="@drawable/tv_bg"  
  36.             android:padding="8dp"  
  37.             android:text="3.晋陶渊明独爱菊"/>  
  38.   
  39.         <TextView  
  40.             android:layout_width="wrap_content"  
  41.             android:layout_height="wrap_content"  
  42.             android:layout_margin="8dp"  
  43.             android:background="@drawable/tv_bg"  
  44.             android:padding="8dp"  
  45.             android:text="4.自李唐来"/>  
  46.   
  47.         <TextView  
  48.             android:layout_width="wrap_content"  
  49.             android:layout_height="wrap_content"  
  50.             android:layout_margin="8dp"  
  51.             android:background="@drawable/tv_bg"  
  52.             android:padding="8dp"  
  53.             android:text="5.世人甚爱牡丹"/>  
  54.   
  55.         <TextView  
  56.             android:layout_width="wrap_content"  
  57.             android:layout_height="wrap_content"  
  58.             android:layout_margin="8dp"  
  59.             android:background="@drawable/tv_bg"  
  60.             android:padding="8dp"  
  61.             android:text="6.予独爱莲之出淤泥而不染"/>  
  62.   
  63.         <TextView  
  64.             android:layout_width="wrap_content"  
  65.             android:layout_height="wrap_content"  
  66.             android:layout_margin="8dp"  
  67.             android:background="@drawable/tv_bg"  
  68.             android:padding="8dp"  
  69.             android:text="7.濯清涟而不妖"/>  
  70.   
  71.         <TextView  
  72.             android:layout_width="wrap_content"  
  73.             android:layout_height="wrap_content"  
  74.             android:layout_margin="8dp"  
  75.             android:background="@drawable/tv_bg"  
  76.             android:padding="8dp"  
  77.             android:text="8.中通外直"/>  
  78.   
  79.         <TextView  
  80.             android:layout_width="wrap_content"  
  81.             android:layout_height="wrap_content"  
  82.             android:layout_margin="8dp"  
  83.             android:background="@drawable/tv_bg"  
  84.             android:padding="8dp"  
  85.             android:text="9.不蔓不枝"/>  
  86.   
  87.         <TextView  
  88.             android:layout_width="wrap_content"  
  89.             android:layout_height="wrap_content"  
  90.             android:layout_margin="8dp"  
  91.             android:background="@drawable/tv_bg"  
  92.             android:padding="8dp"  
  93.             android:text="10.香远益清"/>  
  94.   
  95.         <TextView  
  96.             android:layout_width="wrap_content"  
  97.             android:layout_height="wrap_content"  
  98.             android:layout_margin="8dp"  
  99.             android:background="@drawable/tv_bg"  
  100.             android:padding="8dp"  
  101.             android:text="11.亭亭净植"/>  
  102.     </com.google.android.flexbox.FlexboxLayout>  
  103. </RelativeLayout>  

显示效果就是我们上文贴出来的图。

3.父容器属性简介

flexWrap    属性表示换行与否,默认为noWrap,表示不换行,wrap表示自动换行,还有一个wrap_reverse 表示副轴反转,副轴的含义我们一会来说。

flexDirection  表示子元素的排列方向,元素的排列方向为主轴的方向,该属性有四种取值,不同取值对应不同的主副轴,看下面一张图:

Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)


默认为row,所以如果我给flexWrap取wrap_reverse属性,则效果如下:

Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)

副轴取反,由于flexDirection默认为row,即副轴为竖直方向,副轴取反,即竖直方向倒着显示。同理,如果我给flexDirection属性设置为column,对应主轴方向为竖直向下,这个时候控件就会按如下方式来显示:

Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)

其它值我就不一一测试了。

justifyContent 表示控件沿主轴对齐方向,有五种取值,默认情况下大家看到控件是左对齐(flex_start),另外还有主轴居中对齐(center):

Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)

主轴居右对齐(flex_end):

Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)

两端对齐,子元素之间的间隔相等,但是两端的子元素分别和左右两边的间距为0(space_between):

Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)

子元素两端的距离相等,所有子元素两端的距离都相相等(space_around):

Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)

alignContent 表示控件在副轴上的对齐方向(针对多行元素),默认值为stretch,表示占满整个副轴,因为上文中我把FlexboxLayout的高度设置为包裹内容,所以这个属性大家可能没看到效果,这里我把FlexboxLayout的高度改为match_parent,我们再来看看效果:

代码:

[java]  view plain  copy  print ?
  1.   <com.google.android.flexbox.FlexboxLayout  
  2.       android:layout_width="match_parent"  
  3.       android:layout_height="match_parent"  
  4.       app:alignContent="stretch"  
  5.       app:flexWrap="wrap">  
  6. ....  
  7. ....  

效果:

Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)

大家看到系统会自动放大子元素的高度以使之填满父容器。

与副轴起点对齐(flex_start):

代码:

[java]  view plain  copy  print ?
  1.     <com.google.android.flexbox.FlexboxLayout  
  2.         android:layout_width="match_parent"  
  3.         android:layout_height="match_parent"  
  4.         app:alignContent="flex_start"  
  5.         app:flexWrap="wrap">  
  6. ....  
  7. ....  

Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)

与副轴终点对齐(flex_end):

[java]  view plain  copy  print ?
  1.     <com.google.android.flexbox.FlexboxLayout  
  2.         android:layout_width="match_parent"  
  3.         android:layout_height="match_parent"  
  4.         app:alignContent="flex_end"  
  5.         app:flexWrap="wrap">  
  6. ...  
  7. ...  

Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)

还有两个值,分别是space_around和space_between,意思和上文说的一样,这里不再赘述。

alignItems 也是描述元素在副轴上的对齐方向(针对单行),属性含义和上文基本一致,只是多了一个baseline,表示基线对齐,其余属性不赘述。


这里说的都是父容器的属性,那么子元素都有哪些属性呢?

4.子元素属性简介

[java]  view plain  copy  print ?
  1. app:layout_order="2"  
这个表示子元素的优先级,默认值为1,数值越大越靠后显示。


[java]  view plain  copy  print ?
  1. app:layout_flexGrow="2"  

这个类似于权重属性,来个示例代码:

[java]  view plain  copy  print ?
  1. <com.google.android.flexbox.FlexboxLayout  
  2.     android:layout_width="300dp"  
  3.     android:layout_height="wrap_content">  
  4.   
  5.     <TextView  
  6.         android:layout_width="0dp"  
  7.         android:layout_height="48dp"  
  8.         android:background="@color/colorPrimary"  
  9.         app:layout_flexGrow="2"/>  
  10.   
  11.     <TextView  
  12.         android:layout_width="0dp"  
  13.         android:layout_height="48dp"  
  14.         android:background="@color/colorAccent"  
  15.         app:layout_flexGrow="1"/>  
  16. </com.google.android.flexbox.FlexboxLayout>  

显示效果:

Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)


[java]  view plain  copy  print ?
  1. app:layout_flexShrink="2"  

表示空间不足时子控件的缩放比例,0表示不缩放,比如下面一行代码:

[java]  view plain  copy  print ?
  1. <com.google.android.flexbox.FlexboxLayout  
  2.     android:layout_width="300dp"  
  3.     android:layout_height="wrap_content">  
  4.   
  5.     <TextView  
  6.         android:layout_width="300dp"  
  7.         android:layout_height="48dp"  
  8.         app:layout_flexShrink="2"  
  9.         android:background="@color/colorPrimary"/>  
  10.   
  11.     <TextView  
  12.         app:layout_flexShrink="1"  
  13.         android:layout_width="100dp"  
  14.         android:layout_height="48dp"  
  15.         android:background="@color/colorAccent"/>  
  16. </com.google.android.flexbox.FlexboxLayout>  

父容器总宽度为300dp,结果两个子元素加起来就400,超过了100dp,总共需要缩小100dp,根据flexShrink属性,第一个TextView缩小100的三分之二,第二个TextView缩小100的三分之一。


Ok,以上就是FlexboxLayout的一个基本使用,更多资料请参考https://github.com/google/flexbox-layout


以上。

参考:http://www.jianshu.com/p/b3a9c4a99053

参考:http://www.jianshu.com/p/3c471953e36d

==============================================================================================

我自己写的demo下载:

普通使用我用的依赖

compile 'com.google.android:flexbox:0.2.3'
如果是在RecycleView中使用我添加的是
compile 'com.google.android:flexbox:0.3.0-alpha2'
源码:http://download.csdn.net/detail/zhaihaohao1/9875331