Android 中自动换行的标签实现

最新推荐文章于 2024-08-15 11:11:08 发布
最新推荐文章于 2024-08-15 11:11:08 发布
阅读量2.4k 收藏 5
点赞数 2
分类专栏： 工作随笔 文章标签： 控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TianFB/article/details/76640800
版权

前言

最近看自定义控件时，看到了这种控件就搞了一个研究一下。先看图

这里写图片描述

就是根据每行剩余的位置和要显示的标签进行比对换行的控件。

实现

像这种布局我们一般都是集成ViewGroup然后再覆写它的onMeasure和onLayout方法。
    public class FlowViewGroup extends ViewGroup {
        private int mPaddingTop;
        private int mPaddingLeft;
        private int mPaddingRight;
        private int mPaddingBottom;
        private ArrayList<String> mList = new ArrayList<>();
        private Context mContext;

        public FlowViewGroup(Context context) {
            super(context);
            mContext = context;
        }


        public FlowViewGroup(Context context, AttributeSet attrs) {
            super(context, attrs);
            mContext = context;
        }

        public FlowViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            mContext = context;
        }


        @Override
        protected void onLayout(boolean changed, int l, int t, int r, int b) {
            int top = 0;
            int left;
            int lineHeight = 0;
            for (int i = 0; i < lines.size(); i++) {
                left = 0;
                top += lineHeight;
                lineHeight = 0;
                ArrayList<View> views = lines.get(i);
                for (View view : views) {
                    if (view.getVisibility() == GONE) {
                        continue;
                    }
                    MarginLayoutParams layoutParams = (MarginLayoutParams) view.getLayoutParams();
                    view.layout(left + layoutParams.leftMargin + mPaddingLeft, top + layoutParams.topMargin + mPaddingTop, left + view.getMeasuredWidth() + layoutParams.leftMargin + mPaddingLeft, top + view.getMeasuredHeight() + layoutParams.topMargin + mPaddingTop);
                    lineHeight = Math.max(lineHeight, view.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin);
                    left = left + view.getMeasuredWidth() + layoutParams.leftMargin + layoutParams.rightMargin;
                }
            }

        }

        //计算后要显示行的数据的集合
        private ArrayList<ArrayList<View>> lines = new ArrayList<>();

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            lines.clear();
            //自身的padding
            mPaddingTop = getPaddingTop();
            mPaddingLeft = getPaddingLeft();
            mPaddingRight = getPaddingRight();
            mPaddingBottom = getPaddingBottom();
            int widthMeasureMode = MeasureSpec.getMode(widthMeasureSpec);
            int heightMeasureMode = MeasureSpec.getMode(heightMeasureSpec);
            int widthMeasureSize = MeasureSpec.getSize(widthMeasureSpec);
            int heightMeasureSize = MeasureSpec.getSize(heightMeasureSpec);

            //通过计算获取的总行高(包括ViewGroup的padding和子View的margin)
            int linesHeight = 0;
            //最宽行的宽度
            int widthMax = 0;
            //当前行已占用的宽度
            int lineEmployWidth = 0;
            //计算时当前行的最大高度
            int currentLineHeightMax = 0;
            //每一行中View的数据集
            ArrayList<View> lineInfo = new ArrayList<>();
            //获取子View的个数
            int childCount = getChildCount();
            //遍历子View对其进行测算
            for (int i = 0; i < childCount; i++) {
                View childView = getChildAt(i);
                //判断子View的显示状态 gone就不进行测算
                if (childView.getVisibility() == GONE) {
                    continue;
                }
                measureChild(childView, widthMeasureSpec, heightMeasureSpec);
                MarginLayoutParams layoutParams = (MarginLayoutParams) childView.getLayoutParams();
                int childWidth = 0;
                int childHeight = 0;
                //获取view的测量宽度
                childWidth += childView.getMeasuredWidth();
                //每行的第一个添加父布局的paddingLeft
                if (0 == i) {
                    childWidth += mPaddingLeft;
                }
                //获取子View自身的margin属性
                childWidth += (layoutParams.leftMargin + layoutParams.rightMargin);
                //当前的行高
                childHeight = childHeight + (childView.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin);
                //当前行放不下时，重起一行显示
                if (lineEmployWidth + childWidth > widthMeasureSize - mPaddingRight) {
                    //初始当前行的宽度
                    lineEmployWidth = childWidth + mPaddingLeft;
                    //添加一次行高
                    linesHeight += currentLineHeightMax;
                    //初始化行高
                    currentLineHeightMax = childHeight;
                    lines.add(lineInfo);
                    lineInfo = new ArrayList<>();
                    lineInfo.add(childView);
                } else {//当前行可以显示时
                    lineInfo.add(childView);
                    //增加当前行已显示的宽度
                    lineEmployWidth += childWidth;
                    //为了显示最大的行高
                    currentLineHeightMax = Math.max(currentLineHeightMax, childHeight);
                    //显示中最大的行宽
                    widthMax = Math.max(widthMax, lineEmployWidth);
                }
            }
            lines.add(lineInfo);
            linesHeight += (mPaddingTop + mPaddingBottom + currentLineHeightMax);
            setMeasuredDimension((widthMeasureMode == MeasureSpec.EXACTLY) ? widthMeasureSize : widthMax + mPaddingRight, (heightMeasureMode == MeasureSpec.EXACTLY) ? heightMeasureSize : linesHeight);
        }


        /**
         * 重写该方法是为了使用MarginLayoutParams获取子View的margin值
         */
        @Override
        public LayoutParams generateLayoutParams(AttributeSet attrs) {
            return new MarginLayoutParams(getContext(), attrs);
        }
        /**
         *当使用adapter添加数据时使用。
         */
        @Override
        protected LayoutParams generateDefaultLayoutParams() {
            return super.generateDefaultLayoutParams();
        }

        private TagFlowAdapter mAdapter;

        public void setAdapter(TagFlowAdapter adapter) {
            if (null == adapter) {
                throw new NullPointerException("TagFlowAdapter is null, please check setAdapter(TagFlowAdapter adapter)...");
            }
            mAdapter = adapter;
            adapter.setOnNotifyDataSetChangedListener(new TagFlowAdapter.OnNotifyDataSetChangedListener() {
                @Override
                public void OnNotifyDataSetChanged() {
                    notifyDataSetChanged();
                }
            });
            adapter.notifyDataSetChanged();
        }

        private void notifyDataSetChanged() {
            removeAllViews();
            if (mAdapter == null || mAdapter.getCount() == 0) {
                return;
            }
            MarginLayoutParams layoutParams = new MarginLayoutParams(generateDefaultLayoutParams());
            for (int i = 0; i < mAdapter.getCount(); i++) {
                View view = mAdapter.getView(i);
                if (view == null) {
                    throw new NullPointerException("item layout is null, please check getView()...");
                }
                addView(view, i, layoutParams);
            }
        }
    }

我们先看一下onMeasure方法。我们使用getPadding的方法获取父布局的内边距，再通过MeasureSpec的getMode和getSize方法获取测量模式和测量的宽高。遍历子View通过getMeasureWidth和getMeasureHeight来获取其宽高（该值包括子view的padding值），然后根据子View的MarginLayoutParams来获取它的margin值（需要注意的是在布局中直接添加子View的话要重写public LayoutParams generateLayoutParams(AttributeSet attrs) { return new MarginLayoutParams(getContext(), attrs);}方法。不然会抛类转换异常）。现在我们需要的数值都已经获取到了剩下就好办了。我们先定义一个ArrayList < ArrayList < View > > lines 来储存有多少行的数据。每开始一行 我们就new一个ArrayList lineInfo来储存这一行的要绘制的View。具体的测算方法看上面的代码就行了。

接下来我们再看一下onLayout的方法。在该方法中我们要摆放子view位置。我们在测算过程中已经将子View分行处理。所以我们可以直接遍历lines设置每个字View的位置就行了。具体的看代码就行了。

我们的标签个数、样式等不可能是固定的。所以我们仿照adapter的模式来为该view动态设置数据。我们看一下notifyDataSetChanged方法，我们遍历通过adapter添加的数据，使用addView进行添加。因为我们在测量方法中用到了MarginLayoutParams所以我们添加View的时候要加上一个MarginLayoutParams防止测算方法中抛异常。

再看一下我们定义的adapter。我们定义一个类继承adapter。就可以设置数据了

public abstract class TagFlowAdapter {

    public abstract int getCount();

    public abstract Object getItem(int position);

    public abstract long getItemId(int position);

    public abstract View getView(int position);

    public void notifyDataSetChanged(){
        if(null != mOnNotifyDataSetChangedListener){
            mOnNotifyDataSetChangedListener.OnNotifyDataSetChanged();
        }
    }

    /**
     *  释放一个接口 串联adapter与view中间的数据刷新
     */
    public interface OnNotifyDataSetChangedListener{
        void OnNotifyDataSetChanged();
    }
    private OnNotifyDataSetChangedListener mOnNotifyDataSetChangedListener;
    public void setOnNotifyDataSetChangedListener(OnNotifyDataSetChangedListener listener){
        mOnNotifyDataSetChangedListener = listener;
    }
}

具体的调用代码。
Activity

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FlowViewGroup group = (FlowViewGroup) findViewById(R.id.group);
        MyTagAdapter myTagAdapter = new MyTagAdapter(this);
        group.setAdapter(myTagAdapter);
        ArrayList<String> list = new ArrayList<>();
        list.add("上班族");
        list.add("程序员");
        list.add("喜欢美食");
        list.add("懒得健身");
        list.add("没事就喜欢LOL");
        list.add("宅");
        list.add("美女");
        list.add("帅哥");
        list.add("尸兄");
        list.add("不修边幅");
        list.add("德玛西亚");
        myTagAdapter.setData(list);
        myTagAdapter.notifyDataSetChanged();
    }
}

activity_main资源文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >

    <com.tianfb.text.myflowlayout.FlowViewGroup
        android:id="@+id/group"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        >
    </com.tianfb.text.myflowlayout.FlowViewGroup>

</RelativeLayout>

adapter的代码

public class MyTagAdapter extends TagFlowAdapter {

    private ArrayList<String> mList = new ArrayList<>();
    private Context mContext;
    public MyTagAdapter(Context context){
        mContext = context;
    }

    public void setData(ArrayList<String> list){
        mList.clear();
        mList.addAll(list);
        notifyDataSetChanged();
    }


    @Override
    public int getCount() {
        return mList.size();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position) {
        View view = View.inflate(mContext, R.layout.item, null);
        TextView tv = (TextView) view.findViewById(R.id.tv);
        tv.setText(mList.get(position));
        return view;
    }
}

item资源文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        style="@style/text_flag_01"
        android:id="@+id/tv"/>
</LinearLayout>

style代码

<style name="text_flag_01">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_margin">5dp</item>
        <item name="android:background">@drawable/flag_01</item>
        <item name="android:textColor">#ffffff</item>
    </style>

flag_01代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#7690A5" >
    </solid>

    <corners android:radius="5dp"/>
    <padding
        android:bottom="2dp"
        android:left="10dp"
        android:right="10dp"
        android:top="2dp" />

</shape>

好了搞定了。

TianFB
关注
专栏目录
Android自动换行的标签实现之自定义view（一）
小寒的博客
12-21 447
Android中实现标签自动换行方法一 public class TagLayout extends LinearLayout { private List<int[]> children; public TagLayout(Context context, AttributeSet attrs) { super(context, attrs); children = new ArrayList<int[]>(); }
Android根据标签长度自动换行
10-08
Android根据标签长度自动换行，博客地址：http://blog.csdn.net/gesanri/article/details/48968803
Android自动换行标签
u010547228的专栏
11-19 1572
总结了一下Android中如何实现自动换行的LinearLayout。 在本文中，说是LinearLayout其实是继承自GroupView，在这里主要重写了两个方法，onMeasure、onLayout方法，下面我对此加以介绍。（代码中使用了AttributeSet，由于时间问题不再予以介绍）。 1.     onMeasure是干什么的？ 在ViewGroup的创建过程中，onM
Android 实现动态换行显示的 TextView 列表
最新发布
jiet_h的博客
08-15 935
在开发 Android 应用程序时，我们经常需要在标题栏中显示多个 `TextView`，而这些 `TextView` 的内容长度可能不一致。如果一行内容过长，我们希望它们能自动换行；如果一行占不满屏幕宽度，则保持在一行内。本文将带我们一步步实现这个需求，使用 `ConstraintLayout` 和 `Flow` 组件来轻松布局我们的 `TextView` 列表。
android商品属性选择标签控件,可实现自动换行
11-23
android 商品属性 选择标签控件,可实现 自动换行, 默认选中第一个,可多选; 点击获取标签内容等
Android自动换行标签控件
08-03
使用RelativeLayout实现自动换行标签控件。
Android自动换行标签控件（二）
08-06
Android基于ViewGroup实现自动换行标签控件。
Android自动换行标签控件LineBreakLayout
12-01
`LineBreakLayout`是一个专门用于实现自动换行标签效果的自定义控件，它解决了在一个有限的宽度内显示多个标签，并且能根据屏幕大小自动调整布局，使标签能够整齐、美观地换行显示。在本文中，我们将深入探讨`...
Android 标签，可以自动换行的ViewGroup
11-03
总之，"Android 标签，可以自动换行的ViewGroup"是Android UI设计中一个重要的概念，它通过自动换行的能力提高了界面的适应性和用户体验。开发者可以利用现有的开源库或自定义ViewGroup来实现这一功能，以创建更加...
Android_自定义标签换行
ABang的博客
11-30 527
自定义控件代码： package com.browser.testutils.widget; import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.view.ViewGroup; /** * @author luzhenbang
Android自定义控件实现标签的显示自动换行（一）
指间de忧伤的专栏
11-10 1459
通过控件TagListView实现父控件，然后向里面添加子空间TagView
Android自定义标签view——可自动换行
07-27
Android自定义标签view——可自动换行，该项目从github上下载下来，经测试效果非常不错，下载后可以直接运行使用。
Android 云标签效果（自动换行布局） 源码
10-15
AndroidTagGroup实现云标签效果，各种背景效果的标签，并且支持添加， 大体实现：有一个TagsManager管理TagGroup，自定义TagGroup，对TagGroup设置setTags(tags); TagGroup extends ViewGroup，TagGroup 由多个TagView组成，TagView继承TextView 。
android自动换行
weixin_30268921的博客
06-02 86
这个实例主要是运用字体的只是，但是android自带就几种，虽然android有提供可以自己转载字体的功能，但我试了下，没发现成功的，所以我代码里面就没有弄了，就弄了自带的。明天再试试效果，发现书本的代码不怎么适合android，当字体变大时，会出现按两次才能换行的bug。以后我会修订这个bug 下面是效果图： mainView的代码: Java代码 package com....
Android自定义View精品（LineBreakLayout－自动换行的标签容器）
热门推荐
openXu的专栏
08-27 1万+
  最近一段时间比较忙，都没有时间更新博客，今天公司的事情忙完得空，继续为我的自定义控件系列博客添砖加瓦。本篇博客讲解的是标签自动换行的布局容器，正好前一阵子有个项目中需要，想了想没什么难度就自己弄了。而自定义控件系列文章中对于自定义ViewGroup上次只是讲解了一些基础和步骤 Android自定义ViewGroup（四、打造自己的布局容器），这次就着这个例子我们来完成一个能在项目中使用的自定义...
基于LinearLayout的小标签（TextView）自动换行（修改）
qq_25922861的博客
08-03 2020
继承LinearLayout的自动换行布局
android 自动换行
11-09
这个文件中有3种自动换行的自定义类，把网上的一些代码集合到一块，希望对大家有帮助。
Android 控件自动换行
zzp19921204的博客
01-26 392
package com.chehui.gouche.component;import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.view.ViewGroup;/** * * @author zzp * 自动换行
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值