FlexboxLayout初步探索一

最新推荐文章于 2022-07-13 22:31:09 发布
最新推荐文章于 2022-07-13 22:31:09 发布
阅读量371 收藏
点赞数 1
分类专栏： android 技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35366908/article/details/64920172
版权

之前做项目的时候需要实现一个标签功能，就是通过网络获取的数据进行标签展示，当时是定义了一个LInearLayout做为父控件，通过获取的数据，通过Asynctask异步开启线程动态添加控件到容器中，基本实现了功能，当是这种方法存在一些问题，我发现的主要有：

1、数据过多的时候加载延迟严重，用户体验不好

2、当数据不足以填充一行的时候数据展示空白区域不固定，界面丑陋

今天无意间发现了FlexboxLayout控件，通过阅读一些已有的文章（https://juejin.im/post/58d1035161ff4b00603ca9c4我参考 的文章）和Google的demo（https://github.com/google/flexbox-layout），我觉得它完全可以解决我发现的问题。于是自己就写了小demo对我需要的功能进行测试。

添加依赖

compile 'com.google.android:flexbox:0.2.5'

我的布局文件如下

布局中的背景资源文件

activity 测试代码 
package com.google.android.apps.flexbox;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.TextView;

import com.google.android.flexbox.FlexboxLayout;

import java.util.ArrayList;
import java.util.List;

public class TextFlexViewActivity extends AppCompatActivity {
    private List
     
     
      
       strings = new ArrayList<>();
    private FlexboxLayout mFlexboxLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_flexview);
        setStringDates();
        mFlexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
        addView();
    }

    /**
     * 添加控件
     */
    private void addView() {
        mFlexboxLayout.removeAllViews();
        for (String name : strings) {
            TextView textView = createBaseFlexItemTextView(name);
            textView.setLayoutParams(createDefaultLayoutParams());
            //添加点击事件监听
//        textView.setOnClickListener(new MainActivity.FlexItemClickListener(viewIndex));
            mFlexboxLayout.addView(textView);
        }

    }


    private ViewGroup.LayoutParams createDefaultLayoutParams() {
        FlexboxLayout.LayoutParams lp = new FlexboxLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, Util.dpToPixel(this, 20));
        //它假设每个子项的 layout_flexGrow 属性的值设为 1，那么剩余空间将均匀分配到每个子项。默认为0
        lp.flexGrow = 1;
        lp.setMargins(10, 5, 10, 5);
        return lp;
    }

    /**
     * 动态创建控件
     *
     * @param name
     * @return
     */
    private TextView createBaseFlexItemTextView(String name) {
        TextView textView = new TextView(this);
        textView.setBackgroundResource(R.drawable.action_base_line_bg);
        textView.setText(name);
        textView.setPadding(10, 5, 10, 5);
        textView.setGravity(Gravity.CENTER);
        return textView;
    }

    /**
     * 设置显示的数据
     */
    private void setStringDates() {
        strings.add("积极");
        strings.add("进击的巨人");
        strings.add("小猫");
        strings.add("啰嗦布");
        strings.add("蒙奇.D.路飞");
        strings.add("设置进度");
        strings.add("耗");
        strings.add("物理实验室");
        strings.add("秘密");
        strings.add("世界");
        strings.add("观察者模式");
        strings.add("适配器");
        strings.add("在与不在");
        strings.add("离");
        strings.add("青蛙");
        strings.add("太远");
        strings.add("大剧院的");
        strings.add("太阳");
        strings.add("型芯");
        strings.add("单片机");
        strings.add("桌子");
        strings.add("白");
        strings.add("积极");
        strings.add("进击的巨人");
        strings.add("小猫");
        strings.add("啰嗦布");
        strings.add("蒙奇.D.路飞");
        strings.add("设置进度");
        strings.add("耗");
        strings.add("物理实验室");
        strings.add("秘密");
        strings.add("世界");
        strings.add("观察者模式");
        strings.add("适配器");
        strings.add("在与不在");
        strings.add("离");
        strings.add("青蛙");
        strings.add("太远");
        strings.add("大剧院的");
        strings.add("太阳");
        strings.add("型芯");
        strings.add("单片机");
        strings.add("桌子");
        strings.add("白");
        strings.add("积极");
        strings.add("进击的巨人");
        strings.add("小猫");
        strings.add("啰嗦布");
        strings.add("蒙奇.D.路飞");
        strings.add("设置进度");
        strings.add("耗");
        strings.add("物理实验室");
        strings.add("秘密");
        strings.add("世界");
        strings.add("观察者模式");
        strings.add("适配器");
        strings.add("在与不在");
        strings.add("离");
        strings.add("青蛙");
        strings.add("太远");
        strings.add("大剧院的");
        strings.add("太阳");
        strings.add("型芯");
        strings.add("单片机");
        strings.add("桌子");
        strings.add("白");
        strings.add("积极");
        strings.add("进击的巨人");
        strings.add("小猫");
        strings.add("啰嗦布");
        strings.add("蒙奇.D.路飞");
        strings.add("设置进度");
        strings.add("耗");
        strings.add("物理实验室");
        strings.add("秘密");
        strings.add("世界");
        strings.add("观察者模式");
        strings.add("适配器");
        strings.add("在与不在");
        strings.add("离");
        strings.add("青蛙");
        strings.add("太远");
        strings.add("大剧院的");
        strings.add("太阳");
        strings.add("型芯");
        strings.add("单片机");
        strings.add("桌子");
        strings.add("白");
        strings.add("积极");
        strings.add("进击的巨人");
        strings.add("小猫");
        strings.add("啰嗦布");
        strings.add("蒙奇.D.路飞");
        strings.add("设置进度");
        strings.add("耗");
        strings.add("物理实验室");
        strings.add("秘密");
        strings.add("世界");
        strings.add("观察者模式");
        strings.add("适配器");
        strings.add("在与不在");
        strings.add("离");
        strings.add("青蛙");
        strings.add("太远");
        strings.add("大剧院的");
        strings.add("太阳");
        strings.add("型芯");
        strings.add("单片机");
        strings.add("桌子");
        strings.add("白");
        strings.add("积极");
        strings.add("进击的巨人");
        strings.add("小猫");
        strings.add("啰嗦布");
        strings.add("蒙奇.D.路飞");
        strings.add("设置进度");
        strings.add("耗");
        strings.add("物理实验室");
        strings.add("秘密");
        strings.add("世界");
        strings.add("观察者模式");
        strings.add("适配器");
        strings.add("在与不在");
        strings.add("离");
        strings.add("青蛙");
        strings.add("太远");
        strings.add("大剧院的");
        strings.add("太阳");
        strings.add("型芯");
        strings.add("单片机");
        strings.add("桌子");
        strings.add("白");
        strings.add("积极");
        strings.add("进击的巨人");
        strings.add("小猫");
        strings.add("啰嗦布");
        strings.add("蒙奇.D.路飞");
        strings.add("设置进度");
        strings.add("耗");
        strings.add("物理实验室");
        strings.add("秘密");
        strings.add("世界");
        strings.add("观察者模式");
        strings.add("适配器");
        strings.add("在与不在");
        strings.add("离");
        strings.add("青蛙");
        strings.add("太远");


    }


}


FlexboxLayout有很多好用的属性，比如适用于各种尺寸的屏幕，横竖屏切换等适配性特别棒，这里我参考的文章写得很好我就不一一列举了。值得一提的一个子布局的属性是flexGrow决定着剩余空间的分布，默认为0，当为1时代表会自动分配剩余空间，在我未设置这个属性之前效果图如下

当我添加了 子项平分剩余空间属性后展示如下：



这样就美观多 了O(∩_∩)O哈哈~



FlexboxLayout-----Android弹性布局
08-14
FlexboxLayout是一个Android平台上与CSS的弹性盒子布局模块 有相似功能的库。博客地址：http://blog.csdn.net/dickyqie/article/details/77155327
FlexboxLayout选中之——单选/多选
LXLYHM的博客
12-08 2384
FlexboxLayout是Google推出的Android可伸 缩布局(流式布局) 官方项目地址 https://github.com/google/flexbox-layoutFlexboxLayout是我开发中用得非常多的一个控件，特别是针对不固定宽高的item布局代替Recycleview很好地实现了我的很多需求，强烈推荐使用。关于FlexboxLayout控件的使用以及排布方式浏览
流式布局标准实现：FlexboxLayout使用指南
热门推荐
白泽的博客
05-15 1万+
FlexboxLayout是什么 FlexboxLayout是Google开源的一个强大的控件，直接继承ViewGroup，效果类似于加强版的LinearLayout，但与LinearLayout并无关联。 官方原话是： FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible...
Android日常开发 - FlexboxLayout学习笔记
qq_42948831的博客
07-13 787
Android日常开发使用FlexboxLayout实现流式布局的效果，FlexboxLayout与h5中的flex使用十分相似，都是将父元素设置成flex布局，通过设置属性，使子元素实现不同的排列
FlexBoxlayout在项目的使用总结
Dream It Possible
08-22 2019
前言 FlexBoxlayout是Google推出的开源的可伸缩性布局，在项目中也会经场使用，大大提高了用户的体验。 本文主要记录了 在项目中使用RecyclerView（多布局item）+FlexBoxLayout时遇到的问题做个总结，希望对你有所帮助。 以自身的项目需求为例,如图所示： 在”品牌筛选“、”客户分组“中用了三处可伸缩性布局。 首先回顾一下相关概念和属性,已熟悉的同学...
flexboxLayout,.zip
09-25
FlexboxLayout是Android开发中的一个开源布局库，它实现了CSS中的Flexbox布局模型，使得开发者在Android平台上可以更轻松地创建灵活、响应式的用户界面。这个压缩包文件"flexboxLayout.zip"包含了FlexboxLayout项目...
FlexBoxLayout流式布局
08-11
FlexBoxLayout是Android开发中一种强大的布局管理器，它源自Google推出的Flexbox库，旨在为Android应用提供类似于Web开发中的Flexbox布局模型。在Web开发中，Flexbox布局允许开发者创建灵活、响应式的用户界面，而...
FlexboxLayout:Android版Flexbox-开源
04-25
FlexboxLayout是一个库项目，将CSS Flexible Box Layout Module的类似功能引入了Android。 从1.1.0版开始，该库有望与AndroidX一起使用。 如果您使用1.1.0或更高版本，则应迁移到AndroidX。 有两种在布局中使用...
Android FlexboxLayout的简单了解以及使用
隔壁小王的博客
07-08 4075
FlexboxLayoutFlexboxLayout是谷歌的一个开源项目,是用来搞定各种复杂布局的一个开源项目，跟LinearLayout类似，但是要比它强大的多。FlexBoxLayout跟LinearLayout和RelativeLayout一样继承ViewGroup，你可以设置布局属性。FlexBoxLayout开源项目地址https://github.com/google/flexbox-l
详解FlexboxLayout的使用
wangpingtaohn的博客
05-11 4501
概念   google开源的一套解决复查布局的控件，可以替换Anddroid里的LinearLayout+RelativeLayout，   最重要差异在于 FlexboxLayout 具有 “换行” 的特性，可便捷的写出流式布局。 使用   安装配置   bulid.gradle文件(module) dependencies { compile 'com
android--FlexboxLayout采坑记
hijunmeng的专栏
07-08 1926
FlexboxLayout采坑记
FlexBoxLayout 初步探索一（拓展）
qq_35366908的博客
03-27 312
在上一篇文章中我实现了标签的展示，但是在实际功能中，标签的个数基本都有一个最大值，不如不能超过8个，当添加第九个标签的时候 要移除第一个标签。 基于这个功能附上一小段代码来解决这个问题。 for (String name : strings) { //标签最多设置8个 当大于8时移除第一个标签 while (!(mFlexboxLayout.g
FlexboxLayout使用以及注意点
smallwei2014的博客
04-12 1049
1.使用 具体使用，不多说，这个写的比较详细，谢谢啦 https://segmentfault.com/a/1190000015241938 2.注意点 2.1使用哪个版本 implementation 'com.google.android:flexbox:1.0.0' 还是 implementation 'com.google.android:flexbox:1.1.0' ...
Android FlexboxLayout基本用法
QJay.Dev
05-15 5833
FlexboxLayout是什么在我写这篇文章的上周，Google就开源了这么一个项目—— flexbox-layout，项目地址，我们先看看官方Demo的效果图compile 'com.google.android:flexbox:0.1.2' FlexboxLayout源码分析此项目很简单，就一个类FlexboxLayout，直接继承于ViewGroup实现，所以它只个容器控件。既然是个控件，那
BottomNavigationView +fragment的使用
qq_35366908的博客
05-18 1万+
Android Studio 在添加Activity的时候是可以创建一些带模板的activity 的，比如自Base Activity、Empty Activity、FullScreen Activity、Bottom Navifation Activity 自己常用的就是Empty Activity ，它会自动在清单文件中注册activity和创建布局文件，当然这些都是可以选择的，今天心血来潮
提交本地代码到git(gogs)上
qq_35366908的博客
05-24 7955
一直以来写的代码都是提交到别人创建好的仓库里，今天自己就像试着提交一下自己本地的代码到新创建的仓库上。虽然过程中遇到了很多问题单最终终究是成功的提交了上去。 在自己的git上创建 一个仓库  创建成功后 可以看见这样的提示 从命令行创建一个新的仓库 touch README.md git init git add README.md git commit -m
com.android.build.api.transform.TransformException:解决办法
qq_35366908的博客
04-07 7950
遇到了一个这样的错误：com.android.build.api.transform.TransformException:java.util.zip.ZipException:duplicate entry:com/alibaba/fastjson/JSONWriter.class    这实际上是一个引用jar 包冲突的问题，解决方法就是根据错误的路径信息检查项目中所有的jar包，
复习 activity 的生命周期 手机锁屏时生命周期变化
qq_35366908的博客
05-26 5756
onCreat() 不可见不可交互 onStart()是activity界面被显示出来的时候执行的，用户可见，包括有一个activity在他上面，但没有将它完全覆盖，用户可以看到部分activity但不能与它交互 下面这三个状态是静态（static）的，意味着activity只有在这三个状态下能停留一段时间： onResume()是该activity与用户能进行交互时被执行，用户
Android利用FlexboxLayout实现流畅布局教程
在Android开发中，FlexboxLayout是一种强大的布局解决方案，它借鉴了CSS中的Flexbox布局概念，旨在简化并增强复杂布局的能力，尤其是在创建响应式和灵活的界面设计时。FlexboxLayout是由Google开源的，目的是为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值