时间戳

首页 > 解决方案 > 使用通知计数指示器制作“徽章”自定义视图

android - 使用通知计数指示器制作“徽章”自定义视图

问题描述

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

基本上，我需要一种方法来根据我的类别标准图标创建可绘制对象，该图标还可以在顶部显示一个数字（具体而言，在图标的右下角）。

我最好的领导是创建一个自定义可绘制对象，它还需要一个参数来显示数字并覆盖 on draw 方法，但似乎无法找到顶部带有图像和文本/数字的示例。

编辑：我很抱歉这个广泛的问题，但在过去的几天里我已经绝望了，我希望它不会太广泛并且仍然符合规则。

标签： androiddynamicnavigation-drawerandroid-custom-view

解决方案

您可以使用自定义 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() 方法生成您将绑定到导航抽屉布局的可绘制对象。

推荐阅读