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

 更新时间:2017年04月23日 10:46:59   作者:爱开发  
flexbox是属于CSS的一种布局方案,可以简单、完整、响应式的实现各种页面布局。谷歌将其引入以提高复杂布局的能力。下面这篇文章主要给大家介绍了在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开发者们能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • Android开发Input系统触摸事件分发

    Android开发Input系统触摸事件分发

    这篇文章主要为大家介绍了Android开发Input系统触摸事件分发示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Android Internet应用实现获取天气预报的示例代码

    Android Internet应用实现获取天气预报的示例代码

    这篇文章主要介绍了Android网络编程及Internet应用-获取天气,小编觉得挺不错的,一起跟随小编过来看看吧
    2018-05-05
  • Android开发获取系统中已安装程序信息的方法

    Android开发获取系统中已安装程序信息的方法

    这篇文章主要介绍了Android开发获取系统中已安装程序信息的方法,可实现Android针对系统中已安装程序名称、路径、大小、图标、是否为系统app等信息的获取功能,需要的朋友可以参考下
    2017-12-12
  • Android dumpsys简介

    Android dumpsys简介

    本文详细介绍了Android系统中的dumpsys工具,包括其原理、使用方法、环境要求和相关概念,dumpsys是一个强大的系统诊断工具,可以帮助开发者了解系统服务状态,分析问题,并设计新功能,感兴趣的朋友一起看看吧
    2025-03-03
  • c++ mk文件出错Jni调用产生java.lang.UnsatisfiedLinkError错误解决方法

    c++ mk文件出错Jni调用产生java.lang.UnsatisfiedLinkError错误解决方法

    错误产生在我把方法从c语言转为c++语言后产生的,后来检查到这种错误是因为mk文件出错,加载c文件和加载c++的文件所用的代码不一样,下面请看
    2013-11-11
  • Android剪贴板用法详解

    Android剪贴板用法详解

    这篇文章主要介绍了Android剪贴板用法详解,以实例的形式对Android中剪贴板的各类传值方法做了较为详细的讲述,需要的朋友可以参考下
    2014-10-10
  • 安卓图片反复压缩后为什么普遍会变绿而不是其它颜色?

    安卓图片反复压缩后为什么普遍会变绿而不是其它颜色?

    今天小编就为大家分享一篇关于安卓图片反复压缩后为什么普遍会变绿而不是其它颜色?,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12
  • Android开发全局音量调整的实现方式详解

    Android开发全局音量调整的实现方式详解

    这篇文章主要为大家介绍了Android开发全局音量调整的实现方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Android开发实现自定义新闻加载页面功能实例

    Android开发实现自定义新闻加载页面功能实例

    这篇文章主要介绍了Android开发实现自定义新闻加载页面功能,结合具体实例形式分析了Android界面加载及页面布局相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • Eclipse安装ADT插件速度慢的解决方法

    Eclipse安装ADT插件速度慢的解决方法

    这篇文章主要介绍了Eclipse安装ADT插件速度慢的解决方法,涉及基于Apache的反向代理与hosts文件的设置方法,需要的朋友可以参考下
    2015-12-12

最新评论