Android DemoAndroid 技术开发Android开发

[Android] 自定义View之仿QQ讨论组头像

2017-04-23  本文已影响1178人  一息尚存
效果图

在以前的一个项目中，需要实现类似QQ讨论组头像的控件，只是头像数量和布局有一小点不一样：一是最头像数是4个，二是头像数是2个时的布局是横着排的。其实当时GitHub上就有类似的开源控件，只是那个控件在每一次绘制View的时候都会新创建一些Bitmap对象，这肯定是不可取的，而且那个控件头像输入的是Bitmap对象，不满足需求。所以只能自己实现一个了。实现的时候也没有过多的考虑，传入头像Drawable对象，根据数量排列显示就算完成了，而且传入的图像还必需是圆形的，限制很大，根本不具备通用性。因此要实现和QQ讨论组头像一样的又具备一定通用性的控件，还得重新设计、实现。下面就让我们开始实现吧。

布局

首先需要解决的是头像的布局，在头像数量分别为1至5的情况下，定义头像的布局排列方式，并计算出图像的大小和位置。先把布局图画出来再说：


布局

其中黑色正方形就是View的显示区，蓝色圆形就是头像了。已知的条件是View大小，姑且设为 D 吧，还有头像的数量 n ，求蓝色圆的半径 r 及圆心位置。这不就是一道几何题吗？翻开初中的数学课本——勾三股四弦五……好像不够用啊……

辅助线画了又画，头皮挠了又挠，α,θ,OMG......sin,cos,sh*t......终于算出了r与D和n的关系：

公式1

其实 n=3 的时候半径和 n=4 的时候是一样的，但是考虑到 n=3,5 时在Y轴上还有一个偏移量 dy ,而且 r 和 dy 在 n=3,5 时是有通式的，所以就合在一起了。求偏移量 dy 的公式：


公式2

式中 R 就是布局图中红色大圆的半径。

有了公式，那么代码就好写了，计算每个头像的大小和位置的代码如下：

// 头像信息类，记录大小、位置等信息
private static class DrawableInfo {
    int mId = View.NO_ID;
    Drawable mDrawable;
    // 中心点位置
    float mCenterX;
    float mCenterY;
    // 头像上缺口弧所在圆上的圆心位置，其实就是下一个相邻头像的中心点
    float mGapCenterX;
    float mGapCenterY;
    boolean mHasGap;
    // 头像边界
    final RectF mBounds = new RectF();
    // 圆形蒙板路径，把头像弄成圆形
    final Path mMaskPath = new Path();
}

private void layoutDrawables() {
    mSteinerCircleRadius = 0;
    mOffsetY = 0;

    int width = getWidth() - getPaddingLeft() - getPaddingRight();
    int height = getHeight() - getPaddingTop() - getPaddingBottom();

    mContentSize = Math.min(width, height);
    final List<DrawableInfo> drawables = mDrawables;
    final int N = drawables.size();
    float center = mContentSize * .5f;
    if (mContentSize > 0 && N > 0) {
        // 图像圆的半径。
        final float r;
        if (N == 1) {
            r = mContentSize * .5f;
        } else if (N == 2) {
            r = (float) (mContentSize / (2 + 2 * Math.sin(Math.PI / 4)));
        } else if (N == 4) {
            r = mContentSize / 4.f;
        } else {
            r = (float) (mContentSize / (2 * (2 * Math.sin(((N - 2) * Math.PI) / (2 * N)) + 1)));
            final double sinN = Math.sin(Math.PI / N);
            // 以所有图像圆为内切圆的圆的半径
            final float R = (float) (r * ((sinN + 1) / sinN));
            mOffsetY = (float) ((mContentSize - R - r * (1 + 1 / Math.tan(Math.PI / N))) / 2f);
        }

        // 初始化第一个头像的中心位置
        final float startX, startY;
        if (N % 2 == 0) {
            startX = startY = r;
        } else {
            startX = center;
            startY = r;
        }

        // 变换矩阵
        final Matrix matrix = mLayoutMatrix;
        // 坐标点临时数组
        final float[] pointsTemp = this.mPointsTemp;

        matrix.reset();

        for (int i = 0; i < drawables.size(); i++) {
            DrawableInfo drawable = drawables.get(i);
            drawable.reset();

            drawable.mHasGap = i > 0;
            // 缺口弧的中心
            if (drawable.mHasGap) {
                drawable.mGapCenterX = pointsTemp[0];
                drawable.mGapCenterY = pointsTemp[1];
            }

            pointsTemp[0] = startX;
            pointsTemp[1] = startY;
            if (i > 0) {
                // 以上一个圆的圆心旋转计算得出当前圆的圆位置
                matrix.postRotate(360.f / N, center, center + mOffsetY);
                matrix.mapPoints(pointsTemp);
            }

            // 取出中心点位置
            drawable.mCenterX = pointsTemp[0];
            drawable.mCenterY = pointsTemp[1];

            // 设置边界
            drawable.mBounds.inset(-r, -r);
            drawable.mBounds.offset(drawable.mCenterX, drawable.mCenterY);

            // 设置“蒙板”路径
            drawable.mMaskPath.addCircle(drawable.mCenterX, drawable.mCenterY, r, Path.Direction.CW);
            drawable.mMaskPath.setFillType(Path.FillType.INVERSE_WINDING);
        }

        // 设置第一个头像的缺口，头像数量少于3个的时候没有
        if (N > 2) {
            DrawableInfo first = drawables.get(0);
            DrawableInfo last = drawables.get(N - 1);
            first.mHasGap = true;
            first.mGapCenterX = last.mCenterX;
            first.mGapCenterY = last.mCenterY;
        }

        mSteinerCircleRadius = r;
    }

    invalidate();
}

绘制

计算好每个头像的大小和位置后，就可以把它们绘制出来了。但在此之前，还得先解决一个问题——如何使头像图像变圆？因为输入Drawable对象并没有任何限制。在上面的layoutDrawables方法中有这样两行代码：

drawable.mMaskPath.addCircle(drawable.mCenterX, drawable.mCenterY, r, Path.Direction.CW);
drawable.mMaskPath.setFillType(Path.FillType.INVERSE_WINDING);

其中第一行是添加一个圆形路径，这个路径就是布局图中蓝色圆的路径，而第二行是设置路径的填充模式，默认的填充模式是填充路径内部，而INVERSE_WINDING模式是填充路径外部，再配合Paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR))就可以绘制出圆形的图像了。头像上的缺口同理。（ps:关于Path.FillType和PorterDuff.Mode网上介绍挺多的，这里就不详细介绍了）

下面来看一下onDraw方法：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    ...
    canvas.translate(0, mOffsetY);

    final Paint paint = mPaint;
    final float gapRadius = mSteinerCircleRadius * (mGap + 1f);
    for (int i = 0; i < drawables.size(); i++) {
        DrawableInfo drawable = drawables.get(i);
        RectF bounds = drawable.mBounds;
        final int savedLayer = canvas.saveLayer(0, 0, mContentSize, mContentSize, null, Canvas.ALL_SAVE_FLAG);

        // 设置Drawable的边界
        drawable.mDrawable.setBounds((int) bounds.left, (int) bounds.top,
                Math.round(bounds.right), Math.round(bounds.bottom));
        // 绘制Drawable
        drawable.mDrawable.draw(canvas);

        // 绘制“蒙板”路径，将Drawable绘制的图像“剪”成圆形
        canvas.drawPath(drawable.mMaskPath, paint);
        // “剪”出弧形的缺口
        if (drawable.mHasGap && mGap > 0f) {
            canvas.drawCircle(drawable.mGapCenterX, drawable.mGapCenterY, gapRadius, paint);
        }

        canvas.restoreToCount(savedLayer);
    }
}

Drawable支持

既然输入的是Drawable对象，那就不能像Bitmap那样绘制出来就完事了的，除非你不打算支持Drawable的一些功能，如自更新、动画、状态等。

此时，Drawable自更新的支持和动画Drawable的支持基本上是完成了。当然，View不可见和onDetachedFromWindow()时应该是要暂停或者停止动画的，这些在这里就不多说了，可以去看源码（在文章结尾处有链接），主要是调用Drawable.setVisible(boolean, boolean)方法。下面展示一下效果：

AnimationDrawable

好了，到这里控件算是完成了。
其他效果展示：

效果1
效果2

源代码：https://github.com/YiiGuxing/CompositionAvatar
我的GitHub：https://github.com/YiiGuxing
欢迎Star，谢谢！

上一篇下一篇

猜你喜欢

热点阅读