Создавайте виджеты приложений для Android с помощью Jetpack Glance

Создайте виджет цены биткойна с кнопкой обновления

Прошло много времени с моего последнего поста. На этот раз я здесь, чтобы представить вам Jetpack Glance для виджетов приложений. Давайте начнем.

Jetpack Glance — это фреймворк стиля компоновки, который позволяет разрабатывать удаленные представления для Android.

Вы можете создавать модные, современные и ответственные виджеты приложений с минимальным кодом и декларативным API Kotlin.

Jetpack Glance все еще находится в альфа-версии с версией 1.0.0-alpha01.

Чтобы добавить Glance в свой проект, вам нужно добавить Google Maven и зависимость в файл build.gradle.

Вам может быть интересно, что Glance работает? Всего в нескольких предложениях он обеспечивает совместимость представления компоновки с удаленными представлениями. Обратите внимание, что у Glance есть собственный набор составных элементов, несовместимых с androidx.compose.

Хотя собственный набор компонентов Glance еще не включает в себя все компоненты Jetpack Compose. Думаю, что они появятся и в дальнейших стабильных релизах. Ладно, тогда давайте попотеем!

Выполнение

На этом этапе я начну объяснять, как шаг за шагом создать виджет биткойнов с реализацией кода. Идея этого биткойн-виджета состоит в том, чтобы позволить пользователю просматривать ежедневные изменения цены биткойнов.

Кроме того, они могут нажать кнопку обновления, чтобы получить последнее значение из локального источника данных. Я сказал локальный источник, так как мы помещаем последнее значение в локальный, если оно не просрочено.

1. Создайте AppWidgetProvider в XML

Для начала создайте XML виджета приложения в resources.

Этот файл XML является вашим идентификатором конкретного виджета. Вы можете добавить в него основные атрибуты, такие как minWidth, minHeight и updateFrequency и т. д. Дополнительные атрибуты можно найти в официальной документации Android.

2. Создайте подкласс GlanceAppWidget

Это наш уровень пользовательского интерфейса, который взаимодействует с AppWidgetManager.

Когда вы вызовете его метод update, будет запущена композиция, и составные представления будут переведены в RemoteViews.

Для композиции вам необходимо переопределить методы Content, как показано ниже:

3. Создайте компонуемый вид вашего виджета

Между прочим, я разделил окно создания на другой файл BitcoinWidget.kt, как показано ниже:

3. Создайте подкласс GlanceAppWidgetReceiver

GlanceAppWidgetReceiver — это класс, производный от AppWidgetProvider, для создания удаленных представлений.

Вам нужно переопределить атрибут glanceAppWidget, чтобы создать приемник виджета.

В вышеупомянутом классе MarketWidgetReceiver происходит много всего.

• Метод onUpdate будет вызываться при первом появлении виджета на вашем экране.
• Существует также функция observeData, называемая методом onUpdate. Метод observeData запускает сопрограмму для получения данных из локального. Получив последние данные о цене биткойнов, мы будем использовать updateAppWidgetState для отображения последних значений из Preferences и вызывать метод update GlanceAppWidget для обновления представления.
• Но для обновления виджета нам нужен способ прослушивания широковещательных событий. Именно здесь на сцену выходит метод onReceive с новой трансляцией действий MarketRefreshCallback.

4. Создайте составной пользовательский интерфейс для обновления виджета

Прежде чем мы перейдем к реализации класса обратного вызова, давайте создадим представление BitcoinWidgetHeader, состоящее из кнопки обновления (которая в конечном итоге вызовет обратный вызов):

Приведенный выше код говорит сам за себя.

5. Настройте ActionCallBack для виджета приложения.

Теперь давайте создадим файл ActionCallback. Поскольку мы хотим обновить виджет при нажатии кнопки, мы создали ActionCallback и переопределили метод onRun.

Внутри метода onRun мы создали намерение sendBroadcast. Эта трансляция сообщит методу onReceive MarketWidgetReceiver. В конце концов, мы получаем эту трансляцию через намерение и наблюдаем за нашими последними данными.

6. Обновите файл AndroidManifest.xml.

Затем обновите файл Manifest, добавив класс MarketWidgetReceiver. И не забудьте добавить поставщика виджета приложения, как показано ниже:

Вот окончательный предварительный просмотр со всеми функциями в действии:

Исходный код