Android自定义控件 | 小红点的三种实现(终结)

3,747 阅读6分钟

上一篇通过在父控件绘制前景的方式展示小红点,在布局文件中配置标记控件就能为任意子控件添加小红点。实现方案是”布局文件中配置带小红点控件 id,在父控件中获取它们的坐标,并在其右上角绘制圆圈“。但这个方案有一个漏洞,当子控件做动画,即子控件尺寸发生变化时,小红点不会联动。效果入下图:

这是自定义控件系列教程的第七篇,系列文章目录如下:

  1. Android自定义控件 | View绘制原理(画多大?)
  2. Android自定义控件 | View绘制原理(画在哪?)
  3. Android自定义控件 | View绘制原理(画什么?)
  4. Android自定义控件 | 源码里有宝藏之自动换行控件
  5. Android自定义控件 | 小红点的三种实现(上)
  6. Android自定义控件 | 小红点的三种实现(下)
  7. Android自定义控件 | 小红点的三种实现(终结)

所以新的课题是:如何在父控件中监听子控件重绘并作出响应?

监听重绘

在父控件的draw()dispatchDraw()drawChild()中打 log,子控件做动画时都未能捕获到联动的事件。

突然想起androidx.coordinatorlayout.widget.CoordinatorLayout中的Behavior,在onDependentViewChanged()中可以实时获得关联控件的属性变化。它是如何做到的?沿着调用链往上查找:

public class CoordinatorLayout extends ViewGroup{
    final void onChildViewsChanged(@DispatchChangeEvent final int type) {
        final int childCount = mDependencySortedChildren.size();

        for (int i = 0; i < childCount; i++) {
            final View child = mDependencySortedChildren.get(i);

            //'遍历所有依赖的子控件'
            for (int j = i + 1; j < childCount; j++) {
                final View checkChild = mDependencySortedChildren.get(j);
                ...
                if (b != null && b.layoutDependsOn(this, checkChild, child)) {
                    ...
                    final boolean handled;
                    switch (type) {
                        case EVENT_VIEW_REMOVED:
                            // EVENT_VIEW_REMOVED means that we need to dispatch
                            // onDependentViewRemoved() instead
                            b.onDependentViewRemoved(this, checkChild, child);
                            handled = true;
                            break;
                        default:
                            //'将子控件变化传递出去'
                            handled = b.onDependentViewChanged(this, checkChild, child);
                            break;
                    }
                    ...
                }
        }
    }
}

当关联子控件发生变化时,会遍历关联控件并将变换通过onDependentViewChanged()传递出去。沿着调用链再往上:

public class CoordinatorLayout extends ViewGroup{
    class OnPreDrawListener implements ViewTreeObserver.OnPreDrawListener {
        @Override
        public boolean onPreDraw() {
            //'在 onPreDraw() 中捕获子控件属性变化事件'
            onChildViewsChanged(EVENT_PRE_DRAW);
            return true;
        }
    }
    
    @Override
    public void onAttachedToWindow() {
        super.onAttachedToWindow();
        if (mNeedsPreDrawListener) {
            if (mOnPreDrawListener == null) {
                //'在 onAttachedToWindow() 中构建PreDrawListener'
                mOnPreDrawListener = new OnPreDrawListener();
            }
            final ViewTreeObserver vto = getViewTreeObserver();
            //'注册 View 树观察者'
            vto.addOnPreDrawListener(mOnPreDrawListener);
        }
    }
}

//'全局 View 树观察者'
public final class ViewTreeObserver {
    public interface OnPreDrawListener {
        //'view 树被绘制前该接口被调用,此时 view 树中所有视图已经被 measure 和 layout '
        public boolean onPreDraw();
    }
}

CoordinatorLayoutonAttachedToWindow()时注册了 View 树观察者,子控件属性变化时必定会触发 View树重绘,这样就可以在onPreDraw()中监听到它们的属性变化。

将这套机制照搬到自定义容器控件TreasureBox

//自定义容器控件,需配合标记控件使用
class TreasureBox @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
    ConstraintLayout(context, attrs, defStyleAttr) {
    //'标记控件列表,用于标记哪些子控件需要小红点'
    private var treasures = mutableListOf<Treasure>()
    //'View 树观察者'
    private var onPreDrawListener: ViewTreeObserver.OnPreDrawListener = ViewTreeObserver.OnPreDrawListener {
        //'View 树重绘前通知所有标记控件'
        treasures.forEach { treasure -> treasure.onPreDraw(this) }
        true
    }

    override fun onViewAdded(child: View?) {
        super.onViewAdded(child)
        //存储标记控件
        (child as? Treasure)?.let { treasure ->
            treasures.add(treasure)
        }
    }

    override fun onViewRemoved(child: View?) {
        super.onViewRemoved(child)
        //移除标记控件
        (child as? Treasure)?.let { treasure ->
            treasures.remove(treasure)
        }
    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        //'注册 View 树监听器'
        viewTreeObserver.addOnPreDrawListener(onPreDrawListener)
    }

这样当需要绘制小红点的子控件属性发生变化时,标记控件就可以在onPreDraw()中收到通知:

//'抽象标记控件'
abstract class Treasure @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
    View(context, attrs, defStyleAttr) {
    //'关联控件 id 列表'
    internal var ids = mutableListOf<Int>()

    fun onPreDraw(treasureBox: TreasureBox) {
        ids.map { treasureBox.findViewById<View>(it) }.forEach { v ->
            //'这里可以监听到关联子控件属性变化'
        }
    }

子控件重绘带动父控件重绘

每次 View 树重绘前都可以在onPreDraw()中实时获取子控件的宽高及坐标,为了避免过度重绘,只有当属性变化时,才触发父控件重绘。需要记忆上次重绘的属性,通过比较就能知道属性是否发生变更:

abstract class Treasure @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
    View(context, attrs, defStyleAttr) {
    //'关联控件属性,与关联控件id列表一一对应'
    var layoutParams = mutableListOf<LayoutParam>()
    //'关联控件id列表'
    internal var ids = mutableListOf<Int>()
        
    fun onPreDraw(treasureBox: TreasureBox) {
        //'在关联控件重绘前,遍历它们检查其属性是否变更'
        ids.forEachIndexed { index, id ->
            treasureBox.findViewById<View>(id)?.let { v ->
                LayoutParam(v.width, v.height, v.x, v.y).let { lp ->
                    //'若关联控件属性变更,触发父控件重绘'
                    if (layoutParams[index] != lp) {
                        if (layoutParams[index].isValid()) {
                            treasureBox.postInvalidate()
                        }
                        layoutParams[index] = lp
                    }
                }
            }
        }
    }
        
    //'控件属性实体类,储存宽高和坐标'
    data class LayoutParam(var width: Int = 0, var height: Int = 0, var x: Float = 0f, var y: Float = 0f) {
        private var id: Int? = null
        override fun equals(other: Any?): Boolean {
            if (other == null || other !is LayoutParam) return false
            //'只有所有属性都一样,才认为属性没有变更'
            return width == other.width && height == other.height && x == other.x && y == other.y
        }

        fun isValid() = width != 0 && height != 0
    }
}

还需要变更下小红点绘制逻辑,之前的逻辑如下:

//'小红点标记控件'
class RedPointTreasure @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
    Treasure(context, attrs, defStyleAttr) {
    
    override fun drawTreasure(treasureBox: TreasureBox, canvas: Canvas?) {
        //'遍历关联控件,并在父控件画布上对应位置绘制小红点'
        ids.forEachIndexed { index, id ->
            treasureBox.findViewById<View>(id)?.let { v ->
                //'通过关联控件的 right 值,决定小红点横坐标'
                val cx = v.right + v.width + offsetXs.getOrElse(index) { 0F }.dp2px()
                //'通过关联控件的 top 值,决定小红点纵坐标'
                val cy = v.top + offsetYs.getOrElse(index) { 0F }.dp2px()
                val radius = radiuses.getOrElse(index) { DEFAULT_RADIUS }.dp2px()
                canvas?.drawCircle(cx, cy, radius, bgPaint)
            }
        }
    }
}

如果沿用这套绘制逻辑,即使父控件监听到子控件重绘,小红点也不会跟着联动。那是因为 View 的getTop()getRight()不包含位移值:

public class View{
    public final int getTop() {
        return mTop;
    }
    
    public final int getRight() {
        return mRight;
    }
}

getX()getY()则包含了位移值:

public class View{
    public float getX() {
        return mLeft + getTranslationX();
    }
    
    public float getY() {
        return mTop + getTranslationY();
    }
}

只需要将绘制逻辑中的v.rightv.top换成v.xv.y,小红点就能和动画联动了。为控件添加位移和缩放动画,测试一下:

GG思密达~ 。位移动画的确会联动,但缩放并没有~

打了 log 才发现,View 通过setScale()的方式进行动画时,它的宽高和坐标并不会发生变化。。。

但必然是有一个属性的值变化了,虽然暂且不知道它是啥?

只能打开View源码,遍历所有get开头的函数,然后把它们的值打印在onPreDraw()中。经过多次尝试,终于找到了一个函数,它的返回值和子控件缩放动画联动:

public class View{
    public void getHitRect(Rect outRect) {
        if (hasIdentityMatrix() || mAttachInfo == null) {
            outRect.set(mLeft, mTop, mRight, mBottom);
        } else {
            final RectF tmpRect = mAttachInfo.mTmpTransformRect;
            tmpRect.set(0, 0, getWidth(), getHeight());
            //'将 matrix 值考虑在内'
            getMatrix().mapRect(tmpRect)
            outRect.set((int) tmpRect.left + mLeft, (int) tmpRect.top + mTop,
                    (int) tmpRect.right + mLeft, (int) tmpRect.bottom + mTop);
        }
    }
}

当子控件做缩小动画时,该函数返回的Rect中的left会变大而right会变小。

函数的返回值在mLeft,mRight,mTop,mBottom的基础上叠加了matrix的值。做动画的属性值最终都会反映到matrix上,这样一分析好像能自圆其说,即该函数会实时返回 view 因动画而改变的属性值。

如此一来,只需要记忆上一次的Rect,就能在下次重绘前通过比较得知子控件是否做了动画:

//标记控件
abstract class Treasure @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
    View(context, attrs, defStyleAttr) {
    //关联子控件id列表
    internal var ids = mutableListOf<Int>()
    //'关联子控件当前帧区域列表'
    var rects = mutableListOf<Rect>()
    //'关联子控件上一帧区域列表'
    var lastRects = mutableListOf<Rect>()
    
    fun onPreDraw(treasureBox: TreasureBox) {
        //'遍历关联控件'
        ids.forEachIndexed { index, id ->
            treasureBox.findViewById<View>(id)?.let { v ->
                //'获得当前帧控件区域'
                v.getHitRect(rects[index])
                //'若当前帧控件区域变更,则通知父控件重绘'
                if (rects[index] != lastRects[index]) {
                    treasureBox.postInvalidate()
                    //'更新上一帧控件区域'
                    lastRects[index].set(rects[index])
                }
            }
        }
    }
    
    //解析 xml 读取关联子控件id
    open fun readAttrs(attributeSet: AttributeSet?) {
        attributeSet?.let { attrs ->
            context.obtainStyledAttributes(attrs, R.styleable.Treasure)?.let {
                divideIds(it.getString(R.styleable.Treasure_reference_ids))
                it.recycle()
            }
        }
    }

    //'分割关联子控件id字串'
    private fun divideIds(idString: String?) {
        idString?.split(",")?.forEach { id ->
            ids.add(resources.getIdentifier(id.trim(), "id", context.packageName))
            //'为每个关联子控件初始化当前帧区域'
            rects.add(Rect())
            //'为每个关联子控件初始化上一帧区域'
            lastRects.add(Rect())
        }
        ids.toCollection(mutableListOf()).print("ids") { it.toString() }
    }
}

绘制小红点逻辑也要做响应改动:

class RedPointTreasure @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
    Treasure(context, attrs, defStyleAttr) {

    //'在父控件画布的前景上绘制小红点'
    override fun drawTreasure(treasureBox: TreasureBox, canvas: Canvas?) {
        ids.forEachIndexed { index, id ->
            treasureBox.findViewById<View>(id)?.let { v ->
                //'小红点圆心横坐标依赖于当前帧区域右边界'
                val cx = rects[index].right + offsetXs.getOrElse(index) { 0F }.dp2px()
                //'小红点圆心纵坐标依赖于当前帧区域上边界'
                val cy = rects[index].top + offsetYs.getOrElse(index) { 0F }.dp2px()
                val radius = radiuses.getOrElse(index) { DEFAULT_RADIUS }.dp2px()
                canvas?.drawCircle(cx, cy, radius, bgPaint)
            }
        }
    }

大功告成,效果如下:

talk is cheap, show me the code