iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >利用Android从0到1实现一个流布局控件
  • 503
分享到

利用Android从0到1实现一个流布局控件

2024-04-02 19:04:59 503人浏览 独家记忆
摘要

目录前言演示效果:实现步骤:核心点:总结前言 流布局在在项目中还是会时不时地用到的,比如在搜索历史记录,分类,热门词语等可用标签来显示的,都可以设计成流布局的展示方式。这里我从0到1

前言

流布局在在项目中还是会时不时地用到的,比如在搜索历史记录,分类,热门词语等可用标签来显示的,都可以设计成流布局的展示方式。这里我从0到1实现了一个搜索历史记录的流布局。

演示效果:

实现步骤:

1、创建FlowLayoutView,创建数据源,并添加各个子view。

2、在onMeasure方法中遍历子view,通过简单计算剩余宽度,用集合存储当前行的几个子view,再根据子view的累加高度设置自己的最终尺寸。

3、在onLayout方法中,遍历每一行,遍历该行的子view,依次调动layout设置子view位置。

核心点:

引入行的概念,每一行存储自己应该放置的子view。判断该行剩余空间和该子view的宽度,来决定能放入该行,还是需要新建下一行来存储。

主要代码:



public class FlowLayoutView extends ViewGroup {
    private List<Row> rows = new ArrayList<>();
    private int usedWidth;
    
    private Row curRow;
    private int verticalPadding = 30;
    private int horizontalPadding = 40;

    public FlowLayoutView(Context context) {
        super(context);
    }

    public FlowLayoutView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        restoreLine();  //每次重新布局,属性要初始化,避免onMeasure重复调用混乱问题

        //子view设置宽高为父view大小减去padding值
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        //设置每个子view宽高,并且将每个子View归到自己的行
        for (int i = 0; i < getChildCount(); i++) {
            View childView = getChildAt(i);

            //设置子view设置AT_MOST模式,即布局属性为wrap_content
            int childWidthSpec = MeasureSpec.makeMeasureSpec(width, widthMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : widthMode);
            int childHeightSpec = MeasureSpec.makeMeasureSpec(height, heightMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : heightMode);
            childView.measure(childWidthSpec, childHeightSpec);

            if (curRow == null) {
                curRow = new Row();
            }

            //根据当前childview宽度和剩余宽度判断是否能放进当前行,放不了就要换行
            if (childView.getMeasuredWidth() + horizontalPadding > width - usedWidth) {
                //先换行,再放入
                nextLine();
            }

            usedWidth += childView.getMeasuredWidth() + horizontalPadding;
            curRow.addView(childView);
        }

        //将最后一个row加入到rows中
        rows.add(curRow);

        //根据子view组成的高度重设自己高度
        int finalHeight = 0;
        for (Row row : rows) {
            finalHeight += row.height + verticalPadding;
        }

        setMeasuredDimension(width, finalHeight);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

        int top = 0;
        //遍历每一行,将每一行子view布局
        for (Row row : rows) {
            row.layout(top);
            top = top + row.height + verticalPadding;
        }
    }

    
    private void nextLine() {
        rows.add(curRow);
        curRow = new Row();
        usedWidth = 0;
    }

    
    private void restoreLine() {
        rows.clear();
        curRow = new Row();
        usedWidth = 0;
    }

    
    class Row {
        
        private List<View> childViews = new ArrayList<>();
        private int height;

        public void addView(View view) {
            childViews.add(view);
            height = view.getMeasuredHeight() > height ? view.getMeasuredHeight() : height;  //高度取最高子view的高度
        }

        public int getSize() {
            return childViews.size();
        }

        
        public void layout(int top) {
            int leftMargin = 0;
            for (int i = 0; i < childViews.size(); i++) {
                View view = childViews.get(i);
                view.layout(leftMargin, top, leftMargin + view.getMeasuredWidth(), top + view.getMeasuredHeight());
                leftMargin = leftMargin + view.getMeasuredWidth() + horizontalPadding;
            }
        }
    }
}

MainActivity代码:


public class MainActivity extends AppCompatActivity {
    private FlowLayoutView flowLayoutView;

    private String[] tagTextArray = new String[]{"天猫精灵", "充电台灯", "睡衣", "手表", "创意水杯", "夏天T恤男", "灯光机械键盘",
            "计算机原理", "学霸笔记本", "可口可乐", "跑步机", "旅行箱", "竹浆卫生纸", "吹风机", "洗面奶", "窗帘"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
    }

    private void init() {
        flowLayoutView = findViewById(R.id.flowlayout);

        TextView tvAddTag = findViewById(R.id.tv_addtag);
        tvAddTag.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.item_tagview, null);
                TextView tvContent = view.findViewById(R.id.tv_content);
                tvContent.setText(tagTextArray[(int) (Math.random()*tagTextArray.length)]);
                flowLayoutView.addView(view);
            }
        });
    }
}

Demo

总结

到此这篇关于利用Android从0到1实现一个流布局控件的文章就介绍到这了,更多相关Android实现流布局控件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 利用Android从0到1实现一个流布局控件

本文链接: https://www.lsjlt.com/news/132322.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 利用Android从0到1实现一个流布局控件
    目录前言演示效果:实现步骤:核心点:总结前言 流布局在在项目中还是会时不时地用到的,比如在搜索历史记录,分类,热门词语等可用标签来显示的,都可以设计成流布局的展示方式。这里我从0到1...
    99+
    2024-04-02
  • 如何利用Android从0到1实现一个流布局控件
    小编给大家分享一下如何利用Android从0到1实现一个流布局控件,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!前言流布局在在项目中还是会时不时地用到的,比如在搜索历史记录,分类,热门词语等可用标签来显示的,都可以设计成流...
    99+
    2023-06-20
  • 【小程序从0到1】首页布局案例的实现
    欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是&#...
    99+
    2023-08-16
    小程序 javascript 前端 微信小程序
  • android应用中怎么利用onLayout()实现一个流式布局
    这期内容当中小编将会给大家带来有关android应用中怎么利用onLayout()实现一个流式布局,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。在onLayout方法中有四个参数,我画了一个简单的图来分清...
    99+
    2023-05-31
    android roi onlayout()
  • Android中怎么实现一个瀑布流控件
    本篇文章给大家分享的是有关Android中怎么实现一个瀑布流控件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。具体如下:public class FlowL...
    99+
    2023-05-30
    android
  • 【Linux】从0到1实现一个进度条小程序
    个人主页:🍝在肯德基吃麻辣烫 我的gitee:gitee仓库 分享一句喜欢的话:热烈的火焰,冰封在最沉默的火山深处 文章目录 前言一、理解回车 '\r' 和换行 '\n'二、初步认识缓冲区1. 认识第一个...
    99+
    2023-08-16
    linux 小程序 apache 进度条
  • Android利用FlexboxLayout轻松实现流动布局
    前言相信大家应该都有所体会,在以前我们要实现流动性布局,比较繁琐,Google开源了一个项目叫FlexboxLayout,相信大家都不陌生。下面我们来学习一下FlexboxLayout基础知识,并通过一个案例来加深理解。如果你对Flexbo...
    99+
    2023-05-31
    android flexboxlayout 流动布局
  • 使用CSS3怎么实现一个瀑布流布局
    使用CSS3怎么实现一个瀑布流布局?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。掌握点:column-count 把div中的文本分为多少列column-width 规定列宽c...
    99+
    2023-06-08
  • 怎么在Android应用中利用onTouchEvent实现一个滑动布局
    本篇文章给大家分享的是有关怎么在Android应用中利用onTouchEvent实现一个滑动布局,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。boolean onTouch(V...
    99+
    2023-05-31
    android ontouchevent roi
  • 如何在Android中利用View实现一个垂直时间轴布局
    这篇文章将为大家详细讲解有关如何在Android中利用View实现一个垂直时间轴布局,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。时间轴,顾名思义就是将发生的事件按照时间顺序罗列起来,给用户...
    99+
    2023-05-31
    android view roi
  • 怎么在Android中利用ImageView控件实现一个圆角功能
    今天就跟大家聊聊有关怎么在Android中利用ImageView控件实现一个圆角功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。创建CustomImageView 类在你的项目中(...
    99+
    2023-05-31
    android age imageview
  • Android应用中怎么实现一个跟踪布局效果
    这篇文章给大家介绍Android应用中怎么实现一个跟踪布局效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。首页Activitypublic class TraceActivity extends AppCompatA...
    99+
    2023-05-31
    android roi
  • 怎么在Android应用中利用控件实现一个对话框功能
    怎么在Android应用中利用控件实现一个对话框功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。自定义提示对话框DialogM.Builder builder&nb...
    99+
    2023-05-31
    android roi
  • Android中怎么利用RadioButton控件实现多选一功能
    Android中怎么利用RadioButton控件实现多选一功能,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。将多个RadioButton放在一个RadioGroup里面<...
    99+
    2023-05-30
    radiobutton android
  • 怎么在Android中利用控件实现一个验证码倒计时功能
    这期内容当中小编将会给大家带来有关怎么在Android中利用控件实现一个验证码倒计时功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。使用方式<com.landptf.view.CountDownM...
    99+
    2023-05-31
    android roi
  • 怎么用vbscript实现从后到前阅读一个文本文件
    本篇内容主要讲解“怎么用vbscript实现从后到前阅读一个文本文件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用vbscript实现从后到前阅读一个文本文件”吧!具体的实现代码如下所示:...
    99+
    2023-06-08
  • 如何利用Android组件实现一个列表选择框功能
    如何利用Android组件实现一个列表选择框功能?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。android提供的列表选择框(Spinner)相当于web端用户...
    99+
    2023-05-31
    android roi
  • 怎么在Android中利用DownloadManager实现一个文件下载功能
    本篇文章为大家展示了怎么在Android中利用DownloadManager实现一个文件下载功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Android中DownloadManager实现文件下...
    99+
    2023-05-31
    android downloadmanager age
  • 怎么在Android应用中实现一个IOS 滚轮选择控件
    今天就跟大家聊聊有关怎么在Android应用中实现一个IOS 滚轮选择控件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。代码如下:public class Uti...
    99+
    2023-05-31
    android ios roi
  • 怎么在android中利用 scrollview实现一个一键回到顶部或底部功能
    本篇文章为大家展示了怎么在android中利用 scrollview实现一个一键回到顶部或底部功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。android scrollview 自动滚动到顶部或...
    99+
    2023-05-31
    android scrollview roi
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作