Android 流式布局实现方法

螺旋上升者
• 阅读 4972

android本身并不提供流式布局,有一类需求,如淘宝客户端中选择商品的款式时,款式的按钮根据其文字不同而长度变化,并且不同的手机屏幕的宽度也不同,想要实现流式地排版按钮,就需要动态地添加和判断了。

本文提供了一种简单的流式布局实现方法,非封装的控件,但简单实用。

这里隐藏的数据格式的细节,不贴出全部代码

首选,我们对于正式的界面有一个布局,但是我们为了测试这个布局,需要把这个xml重新inflate出来,把控件加进去,才能够测出控件的长度。

以下的代码把当前界面的layout重复地inflate出来,作为样例

    sampleView = (View) LayoutInflater.from(StyleSelectActivity.this).inflate(
                R.layout.activity_common_select_style, null);
    sampleTv = (TextView) sampleView.findViewById(R.id.sample_text);
    sampleContainer = (LinearLayout) sampleView.findViewById(R.id.rl_sale_style_content);
    sampleDivide = (View) sampleView.findViewById(R.id.view_divider1);

当我们要添加一个TextView时:
(1)使用sample控件先设置标签
(2)在sampleView中测量sample控件的长度
(3)加上需要的margin长度(注意要转化成px)
(4)判断当前行剩余的长度,能否容纳这个标签,如果能,则新建一个tv加入当前行的linearlayout中,否则,新建一个linearlayout,加入到下一行,把剩余长度更新为控件宽度

// 机智地测试它的宽度
    sampleTv.setText("一个动态长度的标签");

    int w = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
    int h = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
    sampleTv.measure(w, h);
    int width = sampleTv.getMeasuredWidth();

// 转成px
    int margin = (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, this.getResources()
                .getDisplayMetrics()));

    if (width + margin < tmpLen) {
            ll.addView(tv);
            tmpLen -= width + margin;
    } else {
            rl_sale_style_content.addView(ll);
            ll = getNewLL();
            ll.addView(tv);
            tmpLen = len - width - margin;
    }

剩下的事情,只需要把表现用数组管理起来,控制他们的状态,点击事件就行了。


文章为原创,转载请注明出处。

点赞
收藏
评论区
推荐文章
菜园前端 菜园前端
2年前
CSS布局方式-响应式布局
原文链接:什么是响应式布局?在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸以及展示方式可能会改变。通常使用@media多媒体查询来实现响应式布局。优点页面能够兼容不同分辨率的屏幕。缺点工作量大,UI需要设计多个平台的版本。场景一套代码兼容we
菜园前端 菜园前端
2年前
CSS布局方式-静态布局
原文链接:什么是静态布局?静态布局是平时开发中最常见的一种布局。就是给布局的元素设置固定的宽度和高度,无论你的屏幕分辨率是多大,它永远都是固定大小。通常使用px单位来实现静态布局。优点它的优点也比较明显,是一种最简单的布局方式,开发者只需要按照设计图1:1
浩浩 浩浩
4年前
【Flutter实战】流式布局(Wrap、Flow)
4.4流式布局在介绍Row和Colum时,如果子widget超出屏幕范围,则会报溢出错误,如:dartRow(children:<WidgetText("xxx"100),);可以看到,右边溢出部分报错。这是因为Row默认只有一行,如果超出屏幕不会折行。我们把超出屏幕显示范围会自动折行的布局称为流式布局。Flutt
浩浩 浩浩
4年前
【Flutter实战】线性布局(Row、Column)
4.2线性布局(Row和Column)所谓线性布局,即指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局,类似于Android中的LinearLayout控件。Row和Column都继承自Flex,我们将在弹性布局一节中详细介绍Flex。主轴和纵轴对于线性布局,有主轴和纵轴之分,如果
Prodan Labs Prodan Labs
4年前
IoT基础架构的演进 — Kuiper
EMQXKuiper是映云科技开源的轻量级物联网边缘数据分析和流式处理软件,Kuiper设计的一个主要目标就是将在云端运行的实时流式计算框架(如ApacheSpark,ApacheStorm和ApacheFlink等)迁移到边缘端。Kuiper参考了云端流式处理项目的架构与实现,结合边缘流式数据处理的特点,采用了编写基于源(Sou
Stella981 Stella981
3年前
Android 流式布局
FlowLayoutManager!Travisbranch(https://img.shields.io/travis/rustlang/rust/master.svg)(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fgithub.co
Wesley13 Wesley13
3年前
Android自定义ViewGroup:onMeasure与onLayout(1)
Android自定义ViewGroup:onMeasure与onLayout(1)Android自定义一个ViewGroup,需要重写ViewGrouo里面的两个最重要的回调函数onMeasure()与onLayout()。如果开发者自己摆脱Android为我们做好的几套布局(如常见的线1性布局、相对布局、帧布局等等),往底层实现vi
Wesley13 Wesley13
3年前
Java8 新特性之流式数据处理
一.流式处理简介在我接触到java8流式处理的时候,我的第一感觉是流式处理让集合操作变得简洁了许多,通常我们需要多行代码才能完成的操作,借助于流式处理可以在一行中实现。比如我们希望对一个包含整数的集合中筛选出所有的偶数,并将其封装成为一个新的List返回,那么在java8之前,我们需要通过如下代码实现:List<Inte
Stella981 Stella981
3年前
Android中dp和px之间进行转换
在xml布局文件中,我们既可以设置px,也可以设置dp(或者dip)。一般情况下,我们都会选择使用dp,这样可以保证不同屏幕分辨率的机器上布局一致。但是在代码中,如何处理呢?很多控件的方法中都只提供了设置px的方法,例如setPadding,并没有提供设置dp的方法。这个时候,如果需要设置dp的话,就要将dp转换成px了。以下是一个应用类,方便进行px和
Stella981 Stella981
3年前
Android 3种数据保存(SharedPreferences存储 内部文件存储 数据库存储)
Android3种数据保存(SharedPreferences存储内部文件存储数据库存储)第一步:在xml文件上界面布局这边采用LinearLayour布局,添加3个按钮来实现界面的跳转,代码如下:<?xmlversio
京东云开发者 京东云开发者
11个月前
鸿蒙跨端实践-布局方案介绍
作者:京东科技刘宁一、前言动态化使用jue语言(开发风格与Vue一致)开发,对于视图的布局采用了标准的Flex布局方式。对于列表类视图,动态化提供了、、、等标签,将子视图的布局管理封装到标签中实现,业务只需要针对标签简单地设置相关属性,即可实现列表类布局,
螺旋上升者
螺旋上升者
Lv1
少而不学,老而无识。少壮不努力,老大徒伤悲。
文章
5
粉丝
0
获赞
0