Tworzenie niestandardowego układu powiadomień

Aby powiadomienia wyglądały świetnie w różnych wersjach Androida, do tworzenia powiadomień użyj standardowego szablonu powiadomień. Jeśli chcesz podać więcej treści w powiadomieniu, rozważ użycie jednego z rozwijanych szablonów powiadomień.

Jeśli jednak szablony systemowe nie spełniają Twoich wymagań, możesz użyć własnego układu powiadomienia.

Utwórz niestandardowy układ obszaru treści

Jeśli potrzebujesz niestandardowego układu, możesz zastosować w powiadomieniu pole NotificationCompat.DecoratedCustomViewStyle. Umożliwia on zapewnianie niestandardowego układu obszaru treści zwykle zajmowanego przez tytuł i tekst przy jednoczesnym korzystaniu z dekoracji systemowych dla ikony powiadomień, sygnatury czasowej, tekstu dodatkowego i przycisków poleceń.

Ten interfejs API działa podobnie do rozwijanych szablonów powiadomień, ponieważ bazuje na podstawowym układzie powiadomień w następujący sposób:

  1. Utwórz podstawowe powiadomienie w NotificationCompat.Builder.
  2. Wywołaj metodę setStyle(), przekazując jej wystąpienie NotificationCompat.DecoratedCustomViewStyle.
  3. Ulepsz swój układ niestandardowy jako przykład elementu RemoteViews.
  4. Wywołaj setCustomContentView(), aby ustawić układ zwiniętego powiadomienia.
  5. Opcjonalnie wywołaj też setCustomBigContentView(), aby ustawić inny układ rozwiniętego powiadomienia.

Przygotuj układy

Musisz mieć układ small i large. W tym przykładzie układ small może wyglądać tak:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/notification_title"
        style="@style/TextAppearance.Compat.Notification.Title"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Small notification, showing only a title" />
</LinearLayout>

A układ elementu large może wyglądać tak:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/notification_title"
        style="@style/TextAppearance.Compat.Notification.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Large notification, showing a title and a body." />

    <TextView
        android:id="@+id/notification_body"
        style="@style/TextAppearance.Compat.Notification.Line2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="This is the body. The height is manually forced to 300dp." />
</LinearLayout>

Tworzenie i wyświetlanie powiadomienia

Gdy szablony będą już gotowe, możesz ich użyć w ten sposób:

Kotlin

val notificationManager = getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager

// Get the layouts to use in the custom notification.
val notificationLayout = RemoteViews(packageName, R.layout.notification_small)
val notificationLayoutExpanded = RemoteViews(packageName, R.layout.notification_large)

// Apply the layouts to the notification.
val customNotification = NotificationCompat.Builder(context, CHANNEL_ID)
        .setSmallIcon(R.drawable.notification_icon)
        .setStyle(NotificationCompat.DecoratedCustomViewStyle())
        .setCustomContentView(notificationLayout)
        .setCustomBigContentView(notificationLayoutExpanded)
        .build()

notificationManager.notify(666, customNotification)

Java

NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);

// Get the layouts to use in the custom notification
RemoteViews notificationLayout = new RemoteViews(getPackageName(), R.layout.notification_small);
RemoteViews notificationLayoutExpanded = new RemoteViews(getPackageName(), R.layout.notification_large);

// Apply the layouts to the notification.
Notification customNotification = new NotificationCompat.Builder(context, CHANNEL_ID)
        .setSmallIcon(R.drawable.notification_icon)
        .setStyle(new NotificationCompat.DecoratedCustomViewStyle())
        .setCustomContentView(notificationLayout)
        .setCustomBigContentView(notificationLayoutExpanded)
        .build();

notificationManager.notify(666, customNotification);

Pamiętaj, że kolor tła powiadomienia może się różnić w zależności od urządzenia i wersji. Zastosuj style z Biblioteki pomocy, takie jak TextAppearance_Compat_Notification do tekstu i TextAppearance_Compat_Notification_Title do tytułu w układzie niestandardowym, jak pokazano w poniższym przykładzie. Dopasowują się one do wariantów kolorystycznych, dzięki czemu tekst jest czarny lub biały na białym.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:text="@string/notification_title"
    android:id="@+id/notification_title"
    style="@style/TextAppearance.Compat.Notification.Title" />

Unikaj ustawiania obrazu tła w obiekcie RemoteViews, bo może on stać się nieczytelny.

Jeśli wywołasz powiadomienie, gdy użytkownik korzysta z aplikacji, wynik będzie podobny do tego na ilustracji 1:

Obraz przedstawiający zwinięte powiadomienie
Rysunek 1. Podczas używania innych aplikacji wyświetla się mały układ powiadomień.

Dotknięcie strzałki rozwijania powoduje rozwinięcie powiadomienia, jak widać na ilustracji 2.

Obraz przedstawiający rozwinięte powiadomienie na pasku systemowym
Rysunek 2. Podczas korzystania z innych aplikacji wyświetlany jest duży układ powiadomień.

Gdy upłynie czas oczekiwania na powiadomienie, powiadomienie będzie widoczne tylko na pasku systemowym, który wygląda jak rysunek 3:

Obraz przedstawiający zwinięte powiadomienie na pasku systemowym
Rysunek 3. Sposób wyświetlania małego układu powiadomień na pasku systemowym.

Dotknięcie strzałki rozwijania powoduje rozwinięcie powiadomienia, jak widać na ilustracji 4.

Obraz przedstawiający rozwinięte powiadomienie na pasku systemowym
Rysunek 4. Na pasku systemowym pojawi się duży układ powiadomienia.

Tworzenie w pełni niestandardowego układu powiadomień

Jeśli nie chcesz, aby powiadomienie było oznaczone standardową ikoną i nagłówkiem, wykonaj powyższe czynności, ale nie wywołuj funkcji setStyle().