Android自定义ViewGroup实现堆叠头像的点赞Layout

下面我将详细讲解“Android自定义ViewGroup实现堆叠头像的点赞Layout”的完整攻略。

1. 确定需求和设计

首先，我们需要明确项目需求和设计，该自定义ViewGroup主要用于实现堆叠头像的点赞Layout。设计思路如下：

• 头像图片使用圆形显示；
• 头像图片堆叠在一起，最上面的头像显示在最底下的头像上方；
• 当有新用户点赞时，新用户的头像会自动堆叠在已有头像的顶部位置，并伴随点赞动画；
• 点赞数量的文本需要搭配点赞动画，使得用户操作得到快速反馈。

2. 编写代码实现

接下来，我们来具体实现这个自定义ViewGroup。我们可以创建一个名为LikeLayout的自定义ViewGroup，并重写它的onMeasure和onLayout方法。

在onMeasure方法中，我们需要遍历所有子View的尺寸，将它们的高度和宽度相加，作为LikeLayout的高度和宽度。在onLayout方法中，我们需要将所有子View叠放在一起，并按照从下到上的顺序将它们显示在屏幕上。

此外，我们还需要考虑以下问题：

• 如何让头像图片显示为圆形；
• 如何实现头像的堆叠和点赞动画，并在顶部显示点赞数量。

圆形图片的实现可以使用canvas绘制的方法实现，具体步骤如下：

1. 创建一个Bitmap对象，作为绘制所需的画布。
2. 创建一个Canvas对象，并将该Bitmap对象作为参数传递给它。
3. 创建一个Paint对象，并将其设置为无锯齿状态。
4. 使用Canvas对象的drawCircle方法将头像图片绘制成圆形图像。

头像的堆叠和点赞动画可以通过设置布局参数和使用属性动画来实现，具体步骤如下：

1. 创建一个ValueAnimator，并设置起始值和结束值。
2. 设置ValueAnimator的监听器，实现数值变化时所需的具体操作。
3. 将该ValueAnimator绑定到布局参数的alpha属性上。
4. 调用start方法启动ValueAnimator。

完整的代码示例如下：

public class LikeLayout extends ViewGroup {

    private final List<View> mLikeViewList = new ArrayList<>();
    private int mCurrentLikeCount = 0;
    private Paint mPaint;

    public LikeLayout(Context context) {
        super(context);
        init();
    }

    public LikeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public LikeLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int childCount = getChildCount();

        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = 0;

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

            View childView = getChildAt(i);

            measureChild(childView, widthMeasureSpec, heightMeasureSpec);

            width = Math.max(width, childView.getMeasuredWidth());

            height += childView.getMeasuredHeight();
        }

        setMeasuredDimension(width, height);
    }

    private void init() {
        setWillNotDraw(false);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(1);
        mPaint.setColor(Color.parseColor("#e9e4d8"));
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int totalHeight = 0;
        int childCount = getChildCount();

        for (int i = childCount - 1; i >= 0; i--) {
            View childView = getChildAt(i);
            int width = childView.getMeasuredWidth();
            int height = childView.getMeasuredHeight();

            int left = (r - width) / 2;
            int top = totalHeight;

            childView.layout(left, top, left + width, top + height);

            totalHeight += height;
        }
    }

    private Bitmap makeCircleView(Bitmap bitmap) {
        Bitmap circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(circleBitmap);

        Paint paint = new Paint();
        paint.setAntiAlias(true);

        int x = bitmap.getWidth();
        canvas.drawCircle(x / 2f, x / 2f, x / 2f, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, 0, 0, paint);

        return circleBitmap;
    }

    public void increaseCount(Bitmap bitmap) {
        mCurrentLikeCount++;

        ImageView imageView = new ImageView(getContext());
        imageView.setImageBitmap(makeCircleView(bitmap));

        mLikeViewList.add(imageView);
        addView(imageView);

        startAnimation(imageView);
    }

    private void startAnimation(final View view) {
        ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f);
        final LayoutParams layoutParams = (LayoutParams) view.getLayoutParams();
        animation.setDuration(500);
        animation.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                if (mLikeViewList.contains(view)) {
                    mLikeViewList.remove(view);
                    removeView(view);
                    mCurrentLikeCount--;
                    changeCount();
                }
            }
        });
        animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                Float val = (Float) valueAnimator.getAnimatedValue();
                layoutParams.alpha = (int) (255f * (1f - val));
                view.setLayoutParams(layoutParams);
            }
        });
        animation.start();

        AlphaAnimation alphaAnimation = new AlphaAnimation(1f, 0f);
        alphaAnimation.setDuration(500);
        view.startAnimation(alphaAnimation);
    }

    private void changeCount() {
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int x = getWidth() / 2;
        int y = getHeight() / 2;
        int radius = getHeight() / 2 - 10;

        canvas.drawCircle(x, y, radius, mPaint);

        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setTextSize(30);

        String text = String.valueOf(mCurrentLikeCount);

        Rect bounds = new Rect();
        paint.getTextBounds(text, 0, text.length(), bounds);

        int textWidth = bounds.width();
        int textHeight = bounds.height();

        canvas.drawText(text, x - textWidth / 2, y + textHeight / 2, paint);
    }

}

上述代码实现了基本的点赞效果，当用户进行操作时，会自动地创建一个新的ImageView对象并添加到LikeLayout上，并以动画的形式移动到目标位置。同时，点赞数量的文本也会随着用户操作而变化，并搭配动画显示。该代码可以通过在布局文件中引用自定义View实现。

3. 示例说明

下面提供两个示例来说明如何使用我们的自定义ViewGroup。

示例一：将LikeLayout添加到布局中

首先，在布局xml文件中添加以下代码：

<com.example.customview.LikeLayout
        android:id="@+id/like_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp" />

然后，在Activity中添加以下代码，初始化LikeLayout，并为之添加点赞事件处理：

LikeLayout likeLayout = findViewById(R.id.like_layout);
ImageView avatarView = findViewById(R.id.avatar);

avatarView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Bitmap bitmap = ((BitmapDrawable)avatarView.getDrawable()).getBitmap();
        likeLayout.increaseCount(bitmap);
    }
});

示例二：根据网络请求动态添加LikeView

在实际开发中，我们可能需要根据网络请求动态地添加LikeView，而不是在用户点击头像时添加。

假设我们从网络请求中获取了一组点赞数据，那么我们可以按照以下步骤来实现：

1. 遍历点赞数据列表，将其中的用户头像添加到LikeLayout中，使用以下代码：

for (LikeInfo likeInfo : likeInfoList) {
    ImageView likeView = new ImageView(getContext());
    likeView.setImageBitmap(makeCircleView(likeInfo.getAvatar()));
    likeLayout.addView(likeView);
}

1. 使用属性动画实现头像图片的堆叠效果，使用以下代码：

for (int i = 0; i < likeViewList.size(); i++) {
    View view = likeViewList.get(i);
    float offset = (i + 1) * 1f / (likeViewList.size() + 1);
    AnimationSet animationSet = new AnimationSet(true);
    animationSet.addAnimation(new TranslateAnimation(
            Animation.RELATIVE_TO_SELF, 0f,
            Animation.RELATIVE_TO_SELF, 0f,
            Animation.RELATIVE_TO_SELF, 0f,
            Animation.RELATIVE_TO_SELF, -offset));
    animationSet.addAnimation(new AlphaAnimation(0f, 1f));
    animationSet.setDuration(1000);
    animationSet.setInterpolator(new OvershootInterpolator());
    view.startAnimation(animationSet);
}

至此，我们完成了“Android自定义ViewGroup实现堆叠头像的点赞Layout”的详细攻略和示例说明。