瀑布流式标签

最新推荐文章于 2024-05-15 09:44:24 发布

啤丶酒

最新推荐文章于 2024-05-15 09:44:24 发布

阅读量1.6k

点赞数

分类专栏： android 文章标签： android 标签布局

本文链接：https://blog.csdn.net/aishang5wpj/article/details/50602230

版权

android 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

这里写图片描述

实现背景

打造Android中的流式布局和热门标签
看到鸿洋大神的这个视频教程有感而发，于是自己重新写了一遍这个viewgroup，大体思路一致，不过关键地方改成了我自己比较容易理解的算法：

对于标签直接的间距，鸿洋大神用的是给标签设置margin的方式，而我用的是对ViewGroup的自定义水平间距、垂直间距的方式；
onLayout中，鸿洋大神先是判断标签的换行情况，然后再将每个标签依次摆放，其实判断标签换行的这个操作在onMeasure里面就已经执行过了，如果在onLayout再次判断换行计算宽高什么的，各种计算感觉很麻烦，容易出错，所以理解感觉好费劲，之前一直觉得他那种方法很烧脑，毕竟对于我这种菜鸟来说是跟不上大神的思维的；（我这算不算王婆卖瓜自卖自夸？）

使用步骤

先看这个自定义ViewGroup的用法：

在attr.xml中声明如下自定义属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="horizontal_diver" format="dimension"/>
    <attr name="vertical_diver" format="dimension"/>

    <declare-styleable name="FlowTagLayout">
        <attr name="horizontal_diver"/>
        <attr name="vertical_diver"/>
    </declare-styleable>
</resources>

布局文件中声明xmlns

xmlns:flowtag="http://schemas.android.com/apk/res-auto"

然后就能直接使用了

    <com.passerby.androidadvanced.customviewgroup.FlowTagLayout
        android:id="@+id/flowTagLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        flowtag:horizontal_diver="5dp"
        flowtag:vertical_diver="5dp">

    </com.passerby.androidadvanced.customviewgroup.FlowTagLayout>

java代码中直接addView即可

        for (String tag : tagArr) {

            TextView textView = makeTextView();
            textView.setText(tag);
            mFlowTagLayout.addView(textView);
        }

是不是很简单。

源码解析

对于瀑布流标签的实现算法，鸿洋大神在视频教程里面已经说明的很清楚了，大家如果觉得文字性的东西比较难懂可以先去看他的视频，我要讲的算法跟他差不多，不过我会更多的描述跟自定义view有关的知识。
源码如下：

package com.passerby.androidadvanced.customviewgroup;

import android.content.Context;
import android.content.res.TypedArray;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;

import com.passerby.androidadvanced.R;

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

/**
 * Created by mac on 16/1/28.
 */
public class FlowTagLayout extends ViewGroup {

    private List<List<View>> mChildViews;
    private List<Integer> mLinesHeight;
    private int mHorizontalDiver, mVerticalDiver;

    public FlowTagLayout(Context context) {
        this(context, null);
    }

    public FlowTagLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public FlowTagLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mChildViews = new ArrayList<>();
        mLinesHeight = new ArrayList<>();

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.FlowTagLayout, defStyleAttr, 0);
        int count = a.getIndexCount();
        for (int i = 0; i < count; i++) {
            int index = a.getIndex(i);
            switch (index) {
                case R.styleable.FlowTagLayout_horizontal_diver:

                    mHorizontalDiver = (int) a.getDimension(i, 0);
                    break;
                case R.styleable.FlowTagLayout_vertical_diver:

                    mVerticalDiver = (int) a.getDimension(i, 0);
                    break;
            }
        }
        a.recycle();
    }

    //只需要计算AT_MOST模式下的宽高；如果是EXACTLY模式，则直接根据ViewParent传进来的值进行设置就好
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        mChildViews.clear();
        mLinesHeight.clear();

        //AT_MOST模式下计算出来的宽和高
        int atmostWidth = 0, atmostHeight = 0;
        int lineWidth = 0, lineHeight = 0;
        List<View> lineChilds = new ArrayList<>();

        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {

            View child = getChildAt(i);
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            int childWidth = child.getMeasuredWidth() + mHorizontalDiver;
            int childHeight = child.getMeasuredHeight() + mVerticalDiver;
            if (lineWidth + childWidth < widthSize) {

                //如果不需要换行,则直接将该child的宽度累加到改行的宽度中
                lineWidth += childWidth;
                //以高度最大的child的高度作为本行的高度
                lineHeight = Math.max(lineHeight, childHeight);
                lineChilds.add(child);
            } else {

                //如果需要换行，则计算出上一行的宽度跟上一行之前的宽度的较大值
                atmostWidth = Math.max(atmostWidth, lineWidth);
                //保存新行的第一个child的宽度
                lineWidth = childWidth;
                //叠加上一行的高度
                atmostHeight += lineHeight;
                //保存上一行的高度
                mLinesHeight.add(lineHeight);
                //保存上一行的所有child
                mChildViews.add(lineChilds);
                //新起一行
                lineChilds = new ArrayList<>();
                //保存新行的第一个child
                lineChilds.add(child);
            }
            //处理最后一个
            if (i == childCount - 1) {
                atmostWidth = Math.max(atmostWidth, lineWidth);
                atmostHeight += lineHeight;
                mLinesHeight.add(lineHeight);
                mChildViews.add(lineChilds);
            }
        }
        int finalWidth = widthMode == MeasureSpec.EXACTLY ? widthSize : atmostWidth;
        int finalHeight = heightMode == MeasureSpec.EXACTLY ? heightSize : atmostHeight;

        v(String.format("width=%s,height=%s", finalWidth, finalHeight));

        setMeasuredDimension(finalWidth, finalHeight);
    }

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

        int left = 0, top = 0;

        int lineCount = mChildViews.size();
        for (int i = 0; i < lineCount; i++) {

            List<View> childs = mChildViews.get(i);
            int childCount = childs.size();
            for (int j = 0; j < childCount; j++) {

                View child = childs.get(j);
                int childWidth = child.getMeasuredWidth();
                int childHeight = child.getMeasuredHeight();
                child.layout(left + mHorizontalDiver,
                        top + mVerticalDiver,
                        left + mHorizontalDiver + childWidth,
                        top + mVerticalDiver + childHeight);
                left += mHorizontalDiver + childWidth;
            }
            //重置left到最左
            left = 0;
            //累加每行的高度，不能重置
            top += mLinesHeight.get(i);
        }
    }

    protected void v(String msg) {
        final String text = msg;
        if (!TextUtils.isEmpty(text)) {
            Log.v(getClass().getCanonicalName(), text);
        }
    }
}

注释写的很清楚了，我只挑一部分说明。

代码39~54行是从布局文件中读取自定义属性的值。因为声明自定义属性的时候就是用的dimension格式，所以我们读取的时候直接用getDimension()来获取值即可；如果声明自定义属性的时候用的是Integer，那你用getInteger()来获取值之后，还需要将它转成px，因为自定义view计算各种距离、文字大小都是基于px的。

如果有人之前用paint.drawText()的时候感觉画出来的文字大小不对，那看到这你应该能知道原因了。

说完构造方法，就剩下onMeasure和onLayout了。在onMeasure中我分别使用 mChildViews、mLinesHeight这两个ArrayList来保存所有的子view以及每行标签的高度。

对于mChildViews这个集合，你可以把它想象成一个二维数组，mChildViews取出来的每个元素仍然是一个ArrayList，表示的是某一行的所有标签的view。
对于mLinesHeight，它的作用是为了便于在onLayout中遍历mChildViews的每行标签时提供改行高度的位置参考。

代码105~111行，为什么这里要单独处理最后一个？说准确一点其实这里处理的是最后一行。

你可以假设现在这个ViewGroup里面的标签行数只有一行，也就是说没有达到换行的条件，即没有走到onMeasure中的else那个分支，我们上面累加每行标签的高度、以及保存每行标签子view的时候都是在那个else里面完成的，现在标签数目没有足够换行，那不是意味着这行的行高以及所有的子view都没有被添加进来吗？

这将导致onMeasure方法最后计算出来的宽高并不准确，对于后面的onLayout方法当然也无法正确的被执行。

代码113~118行，计算宽高完成之后不要忘了设置计算出来的值，那两种计算模式应该不用多讲了吧。

再看onLayout，其实很简单了，因为复杂的操作以及在onMeasure中完成了。

两个for循环就是遍历之前存的mChildViews，你可以把它想象成一个二维数组，先取出第0行，然后遍历这行的所有标签，用child.layout来完成该标签的布局。以此类推。

child.layout方法的完整声明如下

public void layout(int l, int t, int r, int b)

l ：子view的左边相对于父容器左边的距离
t ：子view的顶部相对于父容器顶部的距离
r ：子view的右边相对于父容器左边的距离
b：子view的底部相对于父容器顶部的距离

基本上就说完了，大家如果不明白的话，建议去看看上面的那个视频教程，如果还不明白，建议自己动手试试。

欢迎大家交流意见。

资源下载

啤丶酒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流式标签

实现背景打造Android中的流式布局和热门标签看到鸿洋大神的这个视频教程有感而发，于是自己重新写了一遍这个viewgroup，大体思路一致，不过关键地方改成了我自己比较容易理解的算法：对于标签直接的间距，鸿洋大神用的是给标签设置margin的方式，而我用的是对ViewGroup的自定义水平间距、垂直间距的方式； onLayout中，鸿洋大神先是判断标签的换行情况，然后再将每个标
复制链接

扫一扫