欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-06-29 17:14:40
前言 相信大家应该都有所体会,在以前我们要实现流动性布局,比较繁琐,google开源了一个项目叫flexboxlayout,相信大家都不陌生。下面我们来学习一下flexb...

前言

相信大家应该都有所体会,在以前我们要实现流动性布局,比较繁琐,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的效果图

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

开源地址:

本地下载:

三、使用方式

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

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);

我们来看看要模仿的布局

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

下面我们来实现它,先来看最终实现的效果:

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

实现方法如下:

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开发者们能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。