制作带有通知计数指示器的“徽章”自定义视图

时间:2019-01-28 12:58:47

标签: android dynamic navigation-drawer android-custom-view

对于我的应用程序,我在不同的导航抽屉部分中有不同的应用程序内通知消息。我希望能够更改导航抽屉中的图标以表示每个类别中的未读通知的数量,而不必为每个与应用程序大小相关的原因制作一个图标。

基本上,我需要一种基于类别的标准图标创建可绘制对象的方法,该方法也可以在顶部显示一个数字(具体在图标的右下角)。

我最好的方法是创建一个自定义的可绘制对象,该对象也带有一个要显示的数字参数并覆盖on draw方法,但似乎找不到顶部带有图像和文本/数字的示例。 / p>

编辑:对这个广泛的问题感到抱歉,但是最近几天我感到绝望,我希望它不要太宽泛并且仍然符合规则。

1 个答案:

答案 0 :(得分:1)

您可以使用自定义xml布局创建自己的自定义视图,并在运行时为该布局生成位图。 布局可能类似于以下布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    <ImageView android:layout_width="96dp"
               android:layout_height="96dp"
               android:src="@drawable/ic_message" app:layout_constraintEnd_toEndOf="parent"
               android:layout_marginEnd="8dp" app:layout_constraintStart_toStartOf="parent"
               android:layout_marginStart="8dp" android:layout_marginTop="8dp"
               app:layout_constraintTop_toTopOf="parent" android:layout_marginBottom="8dp"
               app:layout_constraintBottom_toBottomOf="parent" android:id="@+id/imageView"/>
    <TextView
            android:id="@+id/tvCounter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="@+id/imageView"
            tools:text="1"
            android:textSize="16sp"
            android:textStyle="bold" app:layout_constraintStart_toStartOf="@+id/imageView"
            app:layout_constraintEnd_toEndOf="@+id/imageView" app:layout_constraintHorizontal_bias="0.9"
            app:layout_constraintBottom_toBottomOf="@+id/imageView" app:layout_constraintVertical_bias="0.100000024"
            android:textColor="@android:color/white"/>

</android.support.constraint.ConstraintLayout>

然后,创建一个扩展ConstraintLayout的自定义视图。在此视图中,定义一个“ init”方法来膨胀您的自定义布局,如下所示,其中custom_counter_layout是您通过xml创建的布局的名称:

 private void init() {
        inflate(getContext(), R.layout.custom_counter_layout, this);
        this.tvCounter = findViewById(R.id.tvCounter);
    }

这时,您可以在CustomView构造函数中调用此“ init”方法,例如:

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

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

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

然后,定义一个“ getBitmap()”方法,该方法从视图布局生成位图:

public Bitmap getBitmap(){
        DisplayMetrics displayMetrics = new DisplayMetrics();
        ((Activity) getContext()).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

        measure(displayMetrics.widthPixels, displayMetrics.heightPixels);
        layout(0, 0, displayMetrics.widthPixels, displayMetrics.heightPixels);
        buildDrawingCache();
        Bitmap bitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(bitmap);
        draw(canvas);
        //return the bitmap
        return bitmap;
    }

此外,还定义“ setTvCounter”便捷方法以从外部设置视图的编号:

  public void setTvCounter(int counter) {
        tvCounter.setText(String.valueOf(counter));
    }

完成后,这应该是CustomCounterLayout类:

package com.ngallazzi.stacktests;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.support.constraint.ConstraintLayout;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.widget.TextView;

/**
 * StackTests
 * Created by Nicola on 1/28/2019.
 * Copyright © 2019 Zehus. All rights reserved.
 */
public class CustomCounterLayout extends ConstraintLayout {
    private TextView tvCounter;

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

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

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

    private void init() {
        inflate(getContext(), R.layout.custom_counter_layout, this);
        this.tvCounter = findViewById(R.id.tvCounter);
    }

    public Bitmap getBitmap(){
        DisplayMetrics displayMetrics = new DisplayMetrics();
        ((Activity) getContext()).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

        measure(displayMetrics.widthPixels, displayMetrics.heightPixels);
        layout(0, 0, displayMetrics.widthPixels, displayMetrics.heightPixels);
        buildDrawingCache();
        Bitmap bitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(bitmap);
        draw(canvas);
        //return the bitmap
        return bitmap;
    }

    public void setTvCounter(int counter) {
        tvCounter.setText(String.valueOf(counter));
    }
}

为了使用正确的项目计数设置布局,请在活动布局中使用自定义视图,然后使用setTvCounter方法更新自定义视图。完成此操作后,使用getBitmap()方法生成可绘制对象,并将其绑定到导航抽屉布局。