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

前言

相信大家应该都有所体会,在以前我们要实现流动性布局,比较繁琐,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, paddingLeftAndRight, 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开发者们能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • Android数据持久化之Preferences机制详解

    本文实例讲述了Android数据持久化之Preferences机制.分享给大家供大家参考,具体如下: 在Android中,实现数据持久化有五种方式:Preferences,文件File,I/O操作.SQLite数据库,ContentProvider组件. 下面逐个做一简单的介绍: 一.Preferences的介绍: Preferences是一种轻量级的数据存储机制,他将一些简单的数据类型的数据,包括boolean类型,int类型,float类型,long类型以及String类型的数据,以键值对的

  • Android 中SwipeRefreshLayout与ViewPager滑动事件冲突解决方法

    Android 中SwipeRefreshLayout与ViewPager滑动事件冲突解决方法 问题描述: 开发中发现,SwipeRefreshLayout的下拉刷新,与ViewPager开发的banner的左右滑动事件有一点冲突,导致banner的左右滑动不够顺畅.很容易在banner的左右滑动的过程中,触发SwipeRefreshLayout的下拉刷新,从而导致banner左右滑动的体验很差. 解决方案: 可以在ViewPager的滑动时候设置SwipeRefreshLayout暂时不可用,

  • Android 如何本地加载pdf文件

    大部分app打开pdf文件是通过intent调起手机中能打开pdf文件的工具,来查看pdf文件,如果需求是,用户在app内下载好pdf文件后,不通过第三方的工具,本地打开. 这样的需求要怎么实现呢?上网查了一些资料,发现了一个很好用PDF开源库. 使用起来也很简单,首先添加PDFView的引用 compile 'com.github.barteksc:android-pdf-viewer:2.4.0' 布局中引用PdfView <LinearLayout xmlns:android="ht

  • Android在Fragment中实现监听触摸事件

    本文给大家介绍的是监听Fragment的触摸事件实现.如果大家有更好的机制,可以留言交流,下面来看看详细的介绍: 大家都知道,我们的activity中有onTouchEvent方法,可以用来实现触摸事件的监听. activity的触摸事件 @Override public boolean onTouchEvent(MotionEvent event) { return super.onTouchEvent(event); } 但是对于Fragment,其中却没有这个方法,如果我们在fragmen

  • android手机端与PC端使用adb forword通信

    PC端与Android手机端使用adb forword通信 服务器端代码如下: import java.io.IOException; import java.io.ObjectOutputStream; import java.net.Socket; import java.net.UnknownHostException; import java.util.Scanner; public class Server { public static final String TAG = "ser

  • Android 7.0行为变更 FileUriExposedException解决方法

    Android 7.0行为变更 FileUriExposedException解决方法 当我们开发关于[在应用间共享文件]相关功能的时候,在Android 7.0上经常会报出此运行时异常,那么Android 7.0以下没问题的代码,为什么跑到Android 7.0+的设备上运行就出问题了呢?,这主要来自于Android 7.0的一项[行为变更]! 对于面向 Android 7.0 的应用,Android 框架执行的 StrictMode API 政策禁止在您的应用外部公开 file:// URI

  • Android startActivityForResult实例详解

    Android startActivityForResult实例详解 startActivityForResult用于两个activity之间的数据传递,Activity1传值给Activity2,Activity2再返回值给Activity1. 第一步:Activity1中:startActivityForResult(Intent intent, Int requestCode) Intent intent = new Intent(); intent.setClass(Activity1.

  • Android 使用FragmentTabhost代替Tabhost

    Android 使用FragmentTabhost代替Tabhost 前言: 现在Fragment使用越来越广了,虽然Fragment寄生在Activity下,但是它的出现对于开发者来说是一件非常幸运的事,使开发的效率更高效了,好了下面就说说 FragmentTabhost的使用,因为Tabhost已经不推荐使用了,现在一般都使用FragmentTabhost!我本身也个菜鸟,就是帮帮新手,因为Fragment是3.0才出现,为了避免3.0以下的使用不了,所以我们要用v4包来支持,不要倒错包哦!

  • Android数据持久化之File机制分析

    本文实例讲述了Android数据持久化之File机制.分享给大家供大家参考,具体如下: 在使用Java SE平台开发C/S结构的软件中,File 的IO输入输出流的使用率是非常高的,通过使用IO输入输出流可以对存储介质上的文件进行读写操作,下面的代码就是实现一个在Android平台上使用File对象操作文件的功能: package com.example.data_file; import java.io.File; import java.io.FileInputStream; import

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

    前言 相信大家应该都有所体会,在以前我们要实现流动性布局,比较繁琐,Google开源了一个项目叫FlexboxLayout,相信大家都不陌生.下面我们来学习一下FlexboxLayout基础知识,并通过一个案例来加深理解.如果你对FlexboxLayout很熟悉,请忽略本文. 一.什么是 Flexbox 简单来说 Flexbox 是属于web前端领域CSS的一种布局方案,是2009年W3C提出了一种新的布局方案,可以响应式地实现各种页面布局,并且 React Native 也是使用的 Flex

  • Android利用ViewDragHelper轻松实现拼图游戏的示例

    前言 最近一段时间看了一些介绍ViewDragHelper的博客,感觉这是一个处理手势滑动的神奇,看完以后就想做点东西练练手,于是就做了这个Android拼图小游戏. 先上个效果图 源码 https://github.com/kevin-mob/Puzzle ViewDragHelper 其实ViewDragHelper并不是第一个用于分析手势处理的类,gesturedetector也是,但是在和拖动相关的手势分析方面gesturedetector只能说是勉为其难. 关于ViewDragHelp

  • 利用adt-bundle轻松搭建Android开发环境与Hello world(Linux)

    本文与<利用adt-bundle轻松搭建Android开发环境与Hello world(Windows) >是姊妹篇,只是这次操作换成了Linux .拿Ubuntu做例子.还是与Windows一样.由于JDK+Eclipse+ADT+SDK或者JDK+Android Studio在安装的过程中非得联网不可.因此也选用了JDK1.7+解压即用的官方绿色版Android开发环境adt-bundle20131030去安装. 一.基本准备 首先还是与<Debian配置JDK1.7 与Linux

  • Android利用Sensor(传感器)实现水平仪功能

    这里介绍的水平仪,指的是比较传统的气泡水平仪,在一个透明圆盘内充满液体,液体中留有一个气泡,当一端翘起时,该气泡就会浮向翘起的一端. 利用方向传感器返回的第一个参数,实现了一个指南针小应用. 我的Android进阶之旅------>Android利用Sensor(传感器)实现指南针功能 接下来,我们利用返回的第二.三个参数实现该水平仪.因为第二个参数,反映底部翘起的角度(当顶部翘起时为负值),第三个参数可以反映右侧翘起的角度(当左侧翘起时为负值).根据这两个角度就可以开发水平仪,实现手机哪端翘起

  • Android利用listview控件操作SQLite数据库实例

    在本实例中,首先我们利用SQLiteOpenHelper类建立一个数据库,并写好增.删.查等方法,通过SimpleCursorAdapter连接listview实现数据库的增加.查询以及长按删除的功能. 首先,我们先认识一下什么是SQLiteOpenHelper类. Android为了操作SQlite数据库,提供了SQLiteDatabase类,其内封装了insert .delete.update .query .执行SQL命令等操作.同时又为SQLiteDatabase提供了一个辅助类,SQL

  • Android利用ViewPager实现用户引导界面效果的方法

    本文实例讲述了Android利用ViewPager实现用户引导界面效果.分享给大家供大家参考,具体如下: 我相信有很多朋友在装完软件首次打开时,有很多软件都有一个软件功能介绍, 例如刚装完微信打开它,有很多介绍微信功能的图片,并且在屏幕下方有很多小圆点提示你当前图片的位置. 今天我就来实现这么个功能 所实现的功能: 1.可以左右滑动功能图片. 2.图片的索引 看出当前图片所在的位置. 3.可循环滑动. 4.图片的索引带有动画效果. 本次学习主要是利用ViewPager实现用户引导界面 在这里,我

  • Android 利用三阶贝塞尔曲线绘制运动轨迹的示例

    本篇文章主要介绍了Android 利用三阶贝塞尔曲线绘制运动轨迹的示例,分享给大家,具体如下: 实现点赞效果,自定义起始点以及运动轨迹 效果图: xml布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rl_root&

  • Android利用滑动菜单框架实现滑动菜单效果

    之前我向大家介绍了史上最简单的滑动菜单的实现方式,相信大家都还记得.如果忘记了其中的实现原理或者还没看过的朋友,请先去看一遍之前的文章Android仿人人客户端滑动菜单的侧滑特效实现代码,史上最简单的侧滑实现 ,因为我们今天要实现的滑动菜单框架也是基于同样的原理的. 之前的文章中在最后也提到了,如果是你的应用程序中有很多个Activity都需要加入滑动菜单的功能,那么每个Activity都要写上百行的代码才能实现效果,再简单的滑动菜单实现方案也没用.因此我们今天要实现一个滑动菜单的框架,然后在任

  • 详解Xamarin.Android 利用Fragment实现底部菜单

    本篇文章主要介绍了详解Xamarin.Android 利用Fragment实现底部菜单,分享给大家,具体如下: 效果图: 第一步:添加引用 引用 Crosslight.Xamarin.Android.Support.v7.AppCompat 这个包. 第二步:绘制Main和Fragment界面 fg_home.axml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:androi

  • Android利用属性动画实现优酷菜单

    利用属性动画实现优酷菜单,供大家参考,具体内容如下 布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_p

随机推荐