Интеграция бейджей

Бейджи — небольшие элементы на карточке товара, которые содержат информацию о кешбэке баллами Плюса или платежах Яндекс Сплит.

Внимание

Поддерживаемые версии: Android 7.0 (API Level — 24) и выше.

Шаг 1. Подключите библиотеку к вашему проекту

Откройте gradle-файл вашего проекта, найдите раздел «dependencies» и добавьте туда зависимость на библиотеку com.yandex.pay:widget-badge. Рекомендуется использовать наиболее актуальную версию библиотеки.

dependencies{
    ...
    implementation "com.yandex.pay:widget-badge:2.3.10"
    ...
}

Шаг 2. Разместите YPayBadgeView

Вставьте указанный код в нужное место вашей разметки.

<LinearLayout
    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">

    <!-- ваша разметка -->

    <com.yandex.pay.widgets.badge.api.view.YPayBadgeView
        android:id="@+id/badgeView"
        android:layout_width="wrap_content"
        android:layout_height="24dp" />

</LinearLayout>

Важно

У бейджей установлено фиксированное соотношение сторон, которое меняется в зависимости от типа бейджа. Подробнее читайте в главе ниже.

Алгоритм расчета размеров бейджа

Размеры бейджа определяются по правилам:

Если высота установлена, то ширина рассчитывается автоматически с учетом соотношения сторон. При этом ширина, установленная в разметке, не учитывается.
Если высота не установлена, но в разметке указана ширина, то высота рассчитывается автоматически с учетом соотношения сторон.
В остальных случаях высота бейджа по умолчанию составит 24 dp. Если ограничение по высоте или ширине не позволит занять нужный размер, бейдж автоматически уменьшится до максимально допустимого.

Шаг 3. Инициализируйте инвентарь

Укажите основные параметры, необходимые для работы инвентаря и бейджей в частности:

// общие параметры инвентаря:
YPayInventory.init {
    // контекст вашего приложения:
    appContext = yourApplicationContext
    // ваш Merchant ID :
    merchantId = YPayMerchantId("")
    // вариант сетевого окружения PROD / SANDBOX:
    environment = YPayNetworkEnvironment.PROD
}
// инициализация компонентов бейджей:
.badges {
    // режим скрытия бейджей в случае отсутствия данных
    hidingPolicy = HidingPolicy.GONE
}

Важно

Параметры appContext и merchantId являются обязательными. Параметр environment, определяющий сетевое окружение, может быть пропущен. В этом случае будет использовано PROD-окружение. Параметр hidingPolicy влияет на то, каким образом скрывается бейдж в случае невозможности загрузить данные для отображения. По умолчанию будет использован HidingPolicy.INVISIBLE.

Для корректного завершения работы с компонентами бейджей, используйте следующий код:

YPayInventory.clear()
    // деинициализация компонентов бейджей:
    .badges()

Шаг 4. Установите параметры бейджа

Для установки суммы бейджа используйте метод setSum().
```
badgeView.setSum(BigDecimal(10000))
```

Установить визуальные параметры BadgeRenderData вы можете двумя способами:

Через метод setRenderData()

Через атрибуты в XML

badgeView.setRenderData(
    // Тип бейджа: с кешбэком или Сплитом
    BadgeRenderData.SplitBadgeRenderData(
        // Тема бейджа
        theme = BadgeTheme.LIGHT,
        // Цвет бейджа
        color = SplitBadgeColor.PRIMARY,
        // Выравнивание бейджа относительно контейнера
        align = BadgeAlign.LEFT,
        // Версия бейджа, только для типа со Сплитом
        variant = SplitBadgeVariant.SIMPLE
    )
)

<com.yandex.pay.widgets.badge.api.view.YPayBadgeView
android:id="@+id/badgeView"
android:layout_width="wrap_content"
android:layout_height="24dp"
app:ypay_badge_type="split"
app:ypay_badge_align="left"
app:ypay_badge_split_color="green"
app:ypay_badge_split_variant="simple"
app:ypay_badge_theme="light" />

Вы можете использовать разные типы бейджа BadgeRenderData для кешбэка и Сплита:

Тип BadgeRenderData	Описание	Внешний вид
`CashbackBadgeRenderData`	Сконфигурирует бейдж с отображением кешбэка
`SplitBadgeRenderData`	Сконфигурирует бейдж с отображением Сплита

Примеры внешнего вида бейджа в зависимости от настроек визуальных параметров.

Параметр	Значение	Внешний вид
Тема бейджа
`theme`	`BadgeTheme.LIGHT`
`theme`	`BadgeTheme.DARK`
`theme`	`BadgeTheme.SYSTEM`
Цвет бейджа (при CashbackBadgeRenderData)
`color`	`CashbackBadgeColor.PRIMARY`
`color`	`CashbackBadgeColor.GREY`
`color`	`CashbackBadgeColor.TRANSPARENT`
Цвет бейджа (при SplitBadgeRenderData)
`color`	`SplitBadgeColor.PRIMARY`
`color`	`SplitBadgeColor.GREEN`
`color`	`SplitBadgeColor.GREY`
`color`	`SplitBadgeColor.TRANSPARENT`
Выравнивание бейджа относительно контейнера
`align`	`BadgeAlign.LEFT`
`align`	`BadgeAlign.RIGHT`
`align`	`BadgeAlign.CENTER`
Вариант отображения бейджа (при CashbackBadgeRenderData)
`variant`	`CashbackBadgeVariant.SIMPLE`
`variant`	`CashbackBadgeVariant.DETAILED`
Вариант отображения бейджа (при SplitBadgeRenderData)
`variant`	`SplitBadgeVariant.SIMPLE`
`variant`	`SplitBadgeVariant.DETAILED`

Примечание

Чтобы изменить параметры бейджа, повторно вызовите методы setSum() или setRenderData() с новыми параметрами. После обновления будет вызван метод requestLayout(), и внешний вид бейджа изменится.

Шаг 5. Проверьте работу приложения

Запустите приложение и проверьте правильность отображения бейджей. Если контейнер бейджа не помещается, уменьшите его размер.

Была ли статья полезна?

Обзор

Виджеты