实现一个可定制化的FlowLayout -- 原理篇

本文已授权玉刚说公众号

FlowLayout 继承于 ViewGroup ，可以快速帮您实现 Tablayout 以及 Label 标签，内含多种效果，帮您快速实现 APP UI 功能，让您专注代码架构，告别繁琐UI。

如果你也想自己写一个，可以参考以下几篇文章

实现一个可定制化的TabFlowLayout(一) -- 测量与布局

实现一个可定制化的TabFlowLayout(二) -- 实现滚动和平滑过渡

实现一个可定制化的TabFlowLayout(三) -- 动态数据添加与常用接口封装

实现一个可定制化的TabFlowLayout(四) -- 与ViewPager 结合，实现炫酷效果

实现一个可定制化的TabFlowLayout -- 原理篇

实现一个可定制化的TabFlowLayout -- 说明文档

FlowLayout 和 Recyclerview 实现双联表联动

如果您也想快速实现banner，可以使用这个库 github.com/LillteZheng…

一关联

allprojects {
    repositories {
       ...
        maven { url 'https://jitpack.io' }
        
    }
}

最新版本请以工程为准：实现一个可定制化的FlowLayout

implementation 'com.github.LillteZheng:FlowHelper:v1.17'

如果要支持 AndroidX ，如果你的工程已经有以下代码，直接关联即可:

android.useAndroidX=true
#自动支持 AndroidX 第三方库
android.enableJetifier=true

效果

首先，就是 TabFlowLayout 的效果，它的布局支持横竖两种方式，首先先看支持的效果：

没有结合ViewPager	结合ViewPager

TabFlowLayout竖直，RecyclerView联动效果

除了 TabFlowLayout，还有 LAbelFlowLayout 标签式布局，支持自动换行与显示更多

LabelFlowLayout	LabelFlowLayout 显示更多

三、原理说明

这里主要以 TabFlowLayout 来说明，至于 LabelFlowLayout，相信大家看完分析，也知道该怎么去实现了。

3.1 测量与布局

从上面的效果看，自定义有挺多种选择，比如继承 LinearLayout 或者 HorizontalScrollView … ，但其实直接继承ViewGroup去动态测量更香；首先，步骤也很简单：

继承 ViewGroup
重写 onMeasure,计算子控件的大小从而确定父控件的大小
重写 onLayout ，确定子控件的布局

直接看第二步，由于是横向，在测量的时候，需要确定子控件的宽度累加，而高度，则取子控件中，最大的那个即可，代码如下所示：

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

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

        int childCount = getChildCount();
        int width = 0;
        int height = 0;
        /**
         * 计算宽高，由于是横向 width 应该是所有子控件的累加，不用管模式了
         */
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == View.GONE){
                continue;
            }
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            MarginLayoutParams params = (MarginLayoutParams) child.getLayoutParams();
            //拿到 子控件宽度
            int cw = child.getMeasuredWidth() + params.leftMargin + params.rightMargin;
            int ch = child.getMeasuredHeight() + params.topMargin + params.bottomMargin;

            width += cw;
            //拿到 子控件高度，拿到最大的那个高度
            height = Math.max(height, ch);

        }
        if (MeasureSpec.EXACTLY == heightMode) {
            height = heightSize;
        }
        setMeasuredDimension(width, height);
    }

上面中，子控件的宽度进行累加，高度则取子控件中最大的那个，再通过 setMeasuredDimension(width, height); 赋值给父控件。

接着第三步，重写 onLayout ，确定子控件的布局，由于是横向，所以，只需要 child 的 left 一直累加即可：

  @Override
   protected void onLayout(boolean changed, int l, int t, int r, int b) {
       int count = getChildCount();
       int left = 0;
       int top = 0;
       for (int i = 0; i < count; i++) {
           View child = getChildAt(i);
           MarginLayoutParams params = (MarginLayoutParams) child.getLayoutParams();
           int cl = left + params.leftMargin;
           int ct = top + params.topMargin;
           int cr = cl + child.getMeasuredWidth() ;
           int cb = ct + child.getMeasuredHeight();
           //下个控件的起始位置
           left += child.getMeasuredWidth() + params.leftMargin + params.rightMargin;
           child.layout(cl, ct, cr, cb);
       }
   }

这样，一个简单的横向布局的 TabFlowLayout 即搞定了，咱们写一些控件实验一下：

    <com.zhengsr.tablib.TabFlowLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#15000000"
        >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="001"/>
		....
    </com.zhengsr.tablib.TabFlowLayout>

效果：

至于给TabFlowLayout 加上 padding 的效果，可以参考文章: 实现一个可定制化的TabFlowLayout(一) -- 测量与布局

3.2 实现滚动和平滑过渡

前面中，我们已经通过 FlowLayout 实现测量和布局，这次新建一个类 ScrollFlowLayout 是专门实现滚动逻辑。 View 的事件传递，大概可以这样简单描述：

当点击一个控件的时候，它的向下传递过程大致如下： activity --> window – > viewGroud --> view 。当然第一次走的是 disPatchTouchEvent 方法；通过源码知道，如果我们对 onInterceptTouchEvent 返回true，则父控件接管当前触摸事件，不再往下传递，而是回调自己的 onTouchEvent 方法。

由于继承 ViewGroup ，所以我们需要重写它的 onInterceptTouchEvent 方法：

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mLastX = ev.getX();
                //拿到上次的down坐标
                mMoveX = ev.getX();
                break;

            case MotionEvent.ACTION_MOVE:
                float dx = ev.getX() - mLastX;
                if (Math.abs(dx) >= mTouchSlop) {
                    //由父控件接管触摸事件
                    return true;
                }
                mLastX = ev.getX();
                break;
            default:
                break;
        }
        return super.onInterceptTouchEvent(ev);
    }

上面的代码中，已经接管了 Touch 的事件，接着可以在 onTouchEvent 中，拿到了移动的偏移量，那怎么实现 View 自身的移动呢？没错，就是使用 ScrollerBy 和 ScrollerTo，它们只改变 View 的内容而不会改变 View 的坐标，这正是我们需要的，需要注意的是，向左滑为正，向右为负。

ScrollerTo(int x,int y) 绝对坐标移动，以原点为参考点
ScrollerBy(int x,int y) 相对坐标移动，以上一次坐标为参考点

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                //scroller 向右为负，向左为正
                int dx = (int) (mMoveX - event.getX());
                scrollBy(dx, 0);
                mMoveX = event.getX();
                break;
            case MotionEvent.ACTION_UP:
                break;
            default:
                break;

        }
        return super.onTouchEvent(event);
    }

效果如下：

但看起来还存在一些问题：

边界限制
滚动不够流畅

上面问题的优化，请参考工程或者文章实现一个可定制化的TabFlowLayout(二) -- 实现滚动和平滑过渡

3.3 动态数据添加与常用接口封装

这里参考至鸿洋的 FlowLayout FlowLayout

考虑到数据动态添加和方便客制化，这里也采用 adapter 的方式去加载数据，顶部 tab 可能要有未读消息，或者不同的控件，所以 layoutId 肯定是要有的，datas 数据肯定也是，且这个 data 类型用泛型修饰；所以，大致的简约代码可以这样写：

/**
 * @author by  zhengshaorui on 2019/10/8
 * Describe: 数据构建基类
 */
public abstract class TabAdapter<T> {
    private int mLayoutId;
    private List<T> mDatas;
    public TabAdapter(int layoutId, List<T> data) {
        mLayoutId = layoutId;
        mDatas = data;
    }

    /**
     * 获取个数
     * @return
     */
    int getItemCount(){
        return mDatas == null ? 0 : mDatas.size();
    }

    /**
     * 获取id
     * @return
     */
    int getLayoutId(){
        return mLayoutId;
    }

    /**
     * 获取数据
     * @return
     */
    List<T> getDatas(){
        return mDatas;
    }

    /**
     * 公布给外部的数据
     * @param view
     * @param data
     * @param position
     */
    public abstract void bindView(View view,T data,int position);

    /**
     * 通知数据改变
     */
    public void notifyDataChanged(){
        if (mListener != null) {
            mListener.notifyDataChanged();
        }
    }

    /**
     * 构建一个listener，用来改变数据
     */

    public AdapterListener mListener;
    void setListener(AdapterListener listener){
        mListener = listener;
    }
   ... 
}

所以，在TabFlowLayout 新增一个 setAdapter ，把数据设置进去即可：

TabFlowLayout flowLayout = findViewById(R.id.triflow);
flowLayout.setAdapter(new TabFlowAdapter<String>(R.layout.item_msg,mTitle2) {

    @Override
    public void bindView(View view, String data, int position) {
        //设置textview 的 text 和 color
        setText(view,R.id.item_text,data)
                .setTextColor(view,R.id.item_text,Color.BLACK);
    }
});

但里面是怎么实现的呢？其实就是从 adapter 中拿到 layoutId 和 count，再addView 即可

removeAllViews();
TabAdapter adapter = mAdapter;
int itemCount = adapter.getItemCount();
for (int i = 0; i < itemCount; i++) {
    View view = LayoutInflater.from(getContext()).inflate(adapter.getLayoutId(),this,false);
    adapter.bindView(view,adapter.getDatas().get(i),i);
    configClick(view,i);
    addView(view);
}

效果如下：

细节部分，参考这篇文章：实现一个可定制化的TabFlowLayout(三) -- 动态数据添加与常用接口封装

3.3.4 与ViewPager 结合，实现炫酷效果

首先要实现的效果如下：

可以看到，上面实现了几个效果：

子控件的背景跟着自身大小自动变化
背景跟着viewpager的滚动自动滑动
当移动到中间，如果后面有多余的数据，则让背景保持在中间，内容移动

首先，实现一个红色背景框框；首先，思考一下，在 viewgroup 实现 canvas ，是在 onDraw(Canvas canvas) 绘制，还是在 dispatchDraw(Canvas canvas) 呢？答案为 dispathDraw ，为什么？

onDraw 绘制内容 onDraw 为实际要关心的东西，即所有绘制都在这里。
dispatchDraw 只对ViewGroup有意义 dispatchDraw 通常来讲，可以解释成绘制子 View View 继承drawable，view 组件的绘制会先调用 draw(Canvas canvas) 方法，然后先绘制 Drawable背景,接着才是调用 onDraw ，然后调用 dispatchDraw方法。dispatchDraw 会分发给组件去绘制。不过 View 是没有子 view 的，所以dispatchDraw对它来说没意义。

所以，当自定义 ViewGroup 时，假如 ViewGroup 没有背景，是不会回调 onDraw 方法的，只会回调dispatchDraw，有背景才会走正常顺序。(不信？你可以把你的 tabflowlayout 背景去掉，在 onDraw 绘制，看看有没有用)

这样，我们先拿到，第一个子 view 的大小，确定 rect：

View child = getChildAt(0);
if (child != null) {
    //拿到第一个数据
    MarginLayoutParams params = (MarginLayoutParams) child.getLayoutParams();
    mRect.set(getPaddingLeft()+params.leftMargin,
            getPaddingTop()+params.topMargin,
            child.getMeasuredWidth()-params.rightMargin,
            child.getMeasuredHeight() - params.bottomMargin);
}

接着在 dispatchDraw 中绘制圆角矩形：

@Override
protected void dispatchDraw(Canvas canvas) {
    //绘制一个矩形
    canvas.drawRoundRect(mRect, 10, 10, mPaint);
    super.dispatchDraw(canvas);
}

效果如下：

接着，怎么让这个背景跟着 viewpager 移动呢？

可以从 viewpager 的页面监听中拿到 onPageScrolled 方法：

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

三个参数解释如下：

position ：当前第一页的索引，比较有意思的是，当右滑时，position 表示当前页面，当左滑时，为当前页面减1；
positionOffset：当前页面移动的百分比，[0,1]之间；右滑0-1，左滑 1-0；
positionOffsetPixels：当前页面移动的像素

从上面可以看到，我们只需要 position 和 positionOffset 即可，即上一个左边为要移动的偏移量，加上子 view 的宽度变化即可：

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    /**
     * position 当前第一页的索引，比较有意思的是，当右滑时，position 表示当前页面，当左滑时，为当前页面减1；
     * positionOffset 当前页面移动的百分比
     * positionOffsetPixels 当前页面移动的像素
     */
    if (position < getChildCount() - 1) {
        //上一个view
        final View lastView = getChildAt(position);
        //当前view
        final View curView = getChildAt(position + 1);
        //左边偏移量
        float left = lastView.getLeft() + positionOffset * (curView.getLeft() - lastView.getLeft());
        //右边表示宽度变化
        float right = lastView.getRight() + positionOffset * (curView.getRight() - lastView.getRight());
        mRect.left = left;
        mRect.right = right;
        postInvalidate();
  }
}

这样就可以移动了，细节部分请参考这篇文章：实现一个可定制化的TabFlowLayout(四) -- 与ViewPager 结合，实现炫酷效果

扩展

了解了 TabFlowLayout 实现过程，那么实现 LabelFlowLayout 也能照壶画瓢了。无非就是测量的时候，判断是否要换行，然后再在 onLayout 去排列子控件的位置。

这里来了解一下，LabelFlowLayout 显示更多的渐隐效果怎么实现的。

首先，当我们限制为 2 行时，需要显示一个更多的效果，这里为了方便客制化，添加一个 layoutId 让用户去配置。

那怎么让它显示在下面呢？

首先，拿到 layoutId 之后，先转换为view，为了拿到 view 的正确宽高，需要把它给 LabelFlowLayout 去协助测量,并增加 view 的高度一半用来显示，所以在 onMeasure 中，可以这样去写：

/**
 * layoutId 需要父控件即 LabelFlowLayout 去帮助测量，才能通过
 * getMeasuredxxx 拿到正确的宽高、
 */
if (mView != null) {
    measureChild(mView, widthMeasureSpec, heightMeasureSpec);
    //添加它的 1/2 来变模糊
    mViewHeight += mView.getMeasuredHeight() / 2;
    setMeasuredDimension(mLineWidth, mViewHeight);
}

那虚化效果怎么弄呢？其实可以从 paint 下手。

首先，把 view 转换成 bitmap，接着对 paint 设置一个 shader ，上半部分为透明色，下半部分则是和背景色一直，如下：

 /**
 * 拿到 view 的 bitmap
 */
mView.layout(0, 0, getWidth(), mView.getMeasuredHeight());
mView.buildDrawingCache();
mBitmap = mView.getDrawingCache();
/**
 * 同时加上一个 shader，让它有模糊效果
 */
Shader shader = new LinearGradient(0, 0, 0,
        getHeight(), Color.TRANSPARENT, mShowMoreColor, Shader.TileMode.CLAMP);
mPaint.setShader(shader);
mBitRect.set(l, getHeight() - mView.getMeasuredHeight(), r, getHeight());

然后再 dispatchDraw 中把效果和 bitmap 绘制上去即可：

@Override
protected void dispatchDraw(Canvas canvas) {
    super.dispatchDraw(canvas);
    if (isLabelMoreLine() && mBitmap != null) {
        canvas.drawPaint(mPaint);
        canvas.drawBitmap(mBitmap, mBitRect.left, mBitRect.top, null);
    }

}

至此，FLowHelper 的原理就基本分析完了，大家可以先自己实现一遍，然后再参考工程代码。

实现一个可定制化的FlowLayout -- 原理篇

一 关联

效果

三、原理说明

3.1 测量与布局

3.2 实现滚动和平滑过渡

3.3 动态数据添加与常用接口封装

3.3.4 与ViewPager 结合，实现炫酷效果

扩展

一关联