Android利用FlexboxLayout轻松实现流动布局

概述前言相信大家应该都有所体会，在以前我们要实现流动性布局，比较繁琐，Google开源了一个项目叫FlexboxLayout，相信大家都不陌生。下面我们来学习一下FlexboxLayout基础知识，并通过一个案例来加深理解。如果你对Fle

前言

相信大家应该都有所体会，在以前我们要实现流动性布局，比较繁琐，Google开源了一个项目叫FlexBoxLayout，相信大家都不陌生。下面我们来学习一下FlexBoxLayout基础知识，并通过一个案例来加深理解。如果你对FlexBoxLayout很熟悉，请忽略本文。

一、什么是 FlexBox

简单来说 FlexBox 是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以响应式地实现各种页面布局，并且 React Native 也是使用的 Flex 布局。

我们可以简单的理解为 FlexBox 是CSS领域类似 linearlayout 的一种布局，但比 linearlayout 要强大的多。

二、 什么是 FlexBoxLayout？

我们在 AndroID 开发中使用 linearlayout + relativeLayout 基本可以实现大部分复杂的布局，但是Google就想了，有没有类似 FlexBox 的一个布局呢？这使用起来一个布局就可以搞定各种复杂的情况了，于是 FlexBoxLayout 就应运而生了。

所以 FlexBoxLayout 是针对 AndroID 平台的，实现类似 FlexBox 布局方案的一个开源项目

我们先看看官方Demo的效果图

开源地址：https://github.com/google/flexbox-layout

本地下载：点击这里

三、使用方式

使用方式很简单，只需要添加以下依赖：

compile 'com.Google.androID:flexBox:0.2.2'

在xml布局中我们可以这样使用

 <com.Google.androID.flexBox.FlexBoxLayout  androID:ID="@+ID/flexBox_layout"  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  app:flexWrap="wrap">  <TextVIEw  androID:ID="@+ID/tv1"  androID:layout_wIDth="120dp"  androID:layout_height="80dp"  app:layout_flexBasisPercent="50%" />  <TextVIEw  androID:ID="@+ID/tv2"  androID:layout_wIDth="80dp"  androID:layout_height="80dp"  app:layout_alignSelf="center"/>  <TextVIEw  androID:ID="@+ID/tv3"  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(FlexBoxLayout.FLEX_DIRECTION_ColUMN);VIEw vIEw = flexBoxLayout.getChildAt(0);FlexBoxLayout.LayoutParams lp = (FlexBoxLayout.LayoutParams) vIEw.getLayoutParams();lp.order = -1;lp.flexGrow = 2;vIEw.setLayoutParams(lp);

我们来看看要模仿的布局

下面我们来实现它，先来看最终实现的效果：

实现方法如下：

1. 新建activity_flow.xml布局

<?xml version="1.0" enCoding="utf-8"?><relativeLayout 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"> <com.Google.androID.flexBox.FlexBoxLayout  androID:ID="@+ID/flexBox_layout"  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  app:flexWrap="wrap" /></relativeLayout>

布局很简单，只有一个FlexBoxLayout 因为我们需要动态创建它的item，所以就在这里固定写TextVIEw了

2. 新建ActivityFlow Activity，填充数据源

String[] Tags = {"婚姻育儿","散文","设计","上班这点事儿","影视天堂","大学生活","美人说","运动和健身","工具癖","生活家","程序员","想法","短篇小说","美食","教育","心理","奇思妙想","摄影"};  flexBoxLayout = (FlexBoxLayout) findVIEwByID(R.ID.flexBox_layout);  for (int i = 0; i < Tags.length; i++) {   Book model = new Book();   model.setID(i);   model.setname(Tags[i]);   flexBoxLayout.addVIEw(createNewFlexItemTextVIEw(model));  }

其中Book为一个实体,这个不是关键，关键的是createNewFlexItemTextVIEw方法

我们要动态加载FlexBoxLayout其FlexItem 并且让FlexBoxLayout中的item支持点击事件，因为我们需要知道用户点击了哪个专题跳转。

我们来看一下createNewFlexItemTextVIEw方法

/**  * 动态创建TextVIEw  * @param book  * @return  */ private TextVIEw createNewFlexItemTextVIEw(final Book book) {  TextVIEw textVIEw = new TextVIEw(this);  textVIEw.setGravity(Gravity.CENTER);  textVIEw.setText(book.getname());  textVIEw.setTextSize(12);  textVIEw.setTextcolor(getResources().getcolor(R.color.colorAccent));  textVIEw.setBackgroundResource(R.drawable.tag_states);  textVIEw.setTag(book.getID());  textVIEw.setonClickListener(new VIEw.OnClickListener() {   @OverrIDe   public voID onClick(VIEw vIEw) {    Log.e(TAG,book.getname());   }  });  int padding = Util.dptopixel(this,4);  int paddingleftAndRight = Util.dptopixel(this,8);  VIEwCompat.setpaddingrelative(textVIEw,paddingleftAndRight,padding,padding);  FlexBoxLayout.LayoutParams layoutParams = new FlexBoxLayout.LayoutParams(    VIEwGroup.LayoutParams.WRAP_CONTENT,VIEwGroup.LayoutParams.WRAP_CONTENT);  int margin = Util.dptopixel(this,6);  int margintop = Util.dptopixel(this,16);  layoutParams.setmargins(margin,margintop,margin,0);  textVIEw.setLayoutParams(layoutParams);  return textVIEw; }

其他有关Book实体和Util类，也贴出来一下

Book实体

public class Book { private int ID; private String name; public String getname() {  return name; } public voID setname(String name) {  this.name = name; } public int getID() {  return ID; } public voID setID(int ID) {  this.ID = ID; } public Book() { }}

Util工具类

public class Util { public static int pixelToDp(Context context,int pixel) {  displayMetrics displayMetrics = context.getResources().getdisplayMetrics();  return pixel < 0 ? pixel : Math.round(pixel / displayMetrics.density); } public static int dptopixel(Context context,int dp) {  displayMetrics displayMetrics = context.getResources().getdisplayMetrics();  return dp < 0 ? dp : Math.round(dp * displayMetrics.density); }}

这样关于流动布局［FlexBoxLayout］，我们就实现完成了，是不是很简单。

总结

以上就是关于AndroID轻松搞定流动布局（FlexBoxLayout）的全部内容了，希望本文的内容对各位AndroID开发者们能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程小技巧的支持。

总结

以上是内存溢出为你收集整理的Android利用FlexboxLayout轻松实现流动布局全部内容，希望文章能够帮你解决Android利用FlexboxLayout轻松实现流动布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。