Menggunakan widget koleksi

Mencoba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara membuat widget menggunakan API bergaya Compose.

Widget koleksi dikhususkan untuk menampilkan banyak elemen dengan jenis yang sama, seperti koleksi gambar dari aplikasi galeri, artikel dari aplikasi berita, atau pesan dari aplikasi komunikasi. Widget koleksi biasanya berfokus pada dua kasus penggunaan: menjelajahi koleksi dan membuka elemen koleksi ke tampilan detailnya. Widget koleksi dapat di-scroll secara vertikal.

Widget ini menggunakan RemoteViewsService untuk menampilkan koleksi yang didukung oleh data jarak jauh, seperti dari penyedia konten. Widget menampilkan data menggunakan salah satu jenis tampilan berikut, yang dikenal sebagai tampilan koleksi:

ListView: Tampilan yang menampilkan item dalam daftar yang di-scroll secara vertikal.

GridView: Tampilan yang menampilkan item dalam petak scroll dua dimensi.

StackView: Tampilan kartu bertumpuk—seperti rolodex—tempat pengguna dapat menjentikkan kartu depan ke atas atau ke bawah untuk melihat kartu sebelumnya atau berikutnya.

AdapterViewFlipper: ViewAnimator yang didukung adaptor yang menganimasikan antara dua tampilan atau lebih. Hanya satu anak yang ditampilkan dalam satu waktu.

Karena tampilan koleksi ini menampilkan koleksi yang didukung oleh data jarak jauh, tampilan tersebut menggunakan Adapter untuk mengikat antarmuka pengguna ke datanya. Adapter mengikat setiap item dari set data ke setiap objek View.

Dan karena tampilan koleksi ini didukung oleh adaptor, framework Android harus menyertakan arsitektur tambahan untuk mendukung penggunaannya dalam widget. Dalam konteks widget, Adapter diganti dengan RemoteViewsFactory, yang merupakan wrapper tipis di sekitar antarmuka Adapter. Saat diminta untuk item tertentu dalam koleksi, RemoteViewsFactory akan membuat dan menampilkan item untuk koleksi sebagai objek RemoteViews. Untuk menyertakan tampilan koleksi di widget, terapkan RemoteViewsService dan RemoteViewsFactory.

RemoteViewsService adalah layanan yang memungkinkan adaptor jarak jauh meminta objek RemoteViews. RemoteViewsFactory adalah antarmuka untuk adaptor antara tampilan koleksi—seperti ListView, GridView, dan StackView—dan data pokok untuk tampilan tersebut. Dari contoh StackWidget, berikut adalah contoh kode boilerplate untuk mengimplementasikan layanan dan antarmuka ini:

class StackWidgetService : RemoteViewsService() {
    override fun onGetViewFactory(intent: Intent): RemoteViewsFactory =
        StackRemoteViewsFactory(this.applicationContext, intent)
}

class StackRemoteViewsFactory(
    private val context: Context, intent: Intent
) : RemoteViewsService.RemoteViewsFactory {

    // See the RemoteViewsFactory API reference for the full list of methods to implement.

}

Contoh aplikasi

Cuplikan kode di bagian ini juga diambil dari contoh StackWidget:

StackWidget yang menampilkan tampilan bertumpuk
Gambar 1. StackWidget.

Contoh ini terdiri dari tumpukan sepuluh tampilan yang menampilkan nilai nol hingga sembilan. Widget contoh memiliki perilaku utama berikut:

  • Pengguna dapat mengibaskan tampilan atas di widget secara vertikal untuk menampilkan tampilan berikutnya atau sebelumnya. Ini adalah perilaku bawaan StackView.

  • Tanpa interaksi pengguna, widget akan otomatis menampilkan tampilannya secara berurutan, seperti slideshow. Hal ini disebabkan oleh setelan android:autoAdvanceViewId="@id/stack_view" dalam file res/xml/stackwidgetinfo.xml. Setelan ini berlaku untuk ID tampilan, yang dalam hal ini adalah ID tampilan stack view.

  • Jika pengguna menyentuh tampilan atas, widget akan menampilkan pesan Toast "Tampilan yang disentuh n", dengan n adalah indeks (posisi) tampilan yang disentuh. Untuk pembahasan lebih lanjut tentang cara menerapkan perilaku, lihat bagian Menambahkan perilaku ke setiap item.

Mengimplementasikan widget dengan koleksi

Untuk menerapkan widget dengan koleksi, ikuti prosedur untuk menerapkan widget apa pun, diikuti dengan beberapa langkah tambahan: ubah manifes, tambahkan tampilan koleksi ke tata letak widget, dan ubah subclass AppWidgetProvider Anda.

Manifes untuk widget dengan koleksi

Selain persyaratan yang tercantum dalam Mendeklarasikan widget dalam manifes, Anda harus memungkinkan widget dengan koleksi untuk mengikat ke RemoteViewsService Anda. Lakukan ini dengan mendeklarasikan layanan dalam file manifes Anda dengan izin BIND_REMOTEVIEWS. Tindakan ini mencegah aplikasi lain mengakses data widget Anda secara bebas.

Misalnya, saat membuat widget yang menggunakan RemoteViewsService untuk mengisi tampilan koleksi, entri manifes mungkin terlihat seperti ini:

<service android:name="MyWidgetService"
    android:permission="android.permission.BIND_REMOTEVIEWS" />

Dalam contoh ini, android:name="MyWidgetService" merujuk ke subclass RemoteViewsService Anda.

Tata letak untuk widget dengan koleksi

Persyaratan utama untuk file XML tata letak widget Anda adalah menyertakan salah satu tampilan koleksi: ListView, GridView, StackView, atau AdapterViewFlipper. Berikut adalah file widget_layout.xml untuk contoh StackWidget:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <StackView
        android:id="@+id/stack_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:loopViews="true" />
    <TextView
        android:id="@+id/empty_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:background="@drawable/widget_item_background"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:text="@string/empty_view_text"
        android:textSize="20sp" />
</FrameLayout>

Perhatikan bahwa tampilan kosong harus merupakan seinduk dari tampilan koleksi yang tampilan kosongnya mewakili status kosong.

Selain file tata letak untuk seluruh widget, buat file tata letak lain yang menentukan tata letak untuk setiap item dalam koleksi—misalnya, tata letak untuk setiap buku dalam koleksi buku. Contoh StackWidget hanya memiliki satu file tata letak item, widget_item.xml, karena semua item menggunakan tata letak yang sama.

Class AppWidgetProvider untuk widget dengan koleksi

Seperti widget biasa, sebagian besar kode di subclass AppWidgetProvider biasanya masuk ke onUpdate(). Perbedaan utama dalam implementasi untuk onUpdate() saat membuat widget dengan koleksi adalah Anda harus memanggil setRemoteAdapter(). Hal ini memberi tahu tampilan koleksi tempat untuk mendapatkan datanya. RemoteViewsService kemudian dapat menampilkan implementasi RemoteViewsFactory Anda, dan widget dapat menyajikan data yang sesuai. Saat Anda memanggil metode ini, teruskan intent yang mengarah ke implementasi RemoteViewsService dan ID widget yang menentukan widget yang akan diupdate.

Misalnya, berikut cara contoh StackWidget mengimplementasikan metode callback onUpdate() untuk menetapkan RemoteViewsService sebagai adaptor jarak jauh untuk koleksi widget:

override fun onUpdate(
    context: Context, appWidgetManager: AppWidgetManager, appWidgetIds: IntArray
) {
    // Update each of the widgets with the remote adapter.
    appWidgetIds.forEach { appWidgetId ->

        // Set up the intent that starts the StackViewService, which
        // provides the views for this collection.
        val intent = Intent(context, StackWidgetService::class.java).apply {
            // Add the widget ID to the intent extras.
            putExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, appWidgetId)
            data = Uri.parse(toUri(Intent.URI_INTENT_SCHEME))
        }
        // Instantiate the RemoteViews object for the widget layout.
        val views = RemoteViews(context.packageName, R.layout.widget_layout).apply {
            // Set up the RemoteViews object to use a RemoteViews adapter.
            // This adapter connects to a RemoteViewsService through the
            // specified intent.
            // This is how you populate the data.
            setRemoteAdapter(R.id.stack_view, intent)

            // The empty view is displayed when the collection has no items.
            // It must be in the same layout used to instantiate the
            // RemoteViews object.
            setEmptyView(R.id.stack_view, R.id.empty_view)
        }

        // Do additional processing specific to this widget.

        appWidgetManager.updateAppWidget(appWidgetId, views)
    }
    super.onUpdate(context, appWidgetManager, appWidgetIds)
}

Mempertahankan data

Seperti yang dijelaskan di halaman ini, subclass RemoteViewsService menyediakan RemoteViewsFactory yang digunakan untuk mengisi tampilan koleksi jarak jauh.

Secara khusus, lakukan langkah-langkah berikut:

  1. Subclass RemoteViewsService. RemoteViewsService adalah layanan yang melaluinya adaptor jarak jauh dapat meminta RemoteViews.

  2. Dalam subclass RemoteViewsService, sertakan class yang mengimplementasikan antarmuka RemoteViewsFactory. RemoteViewsFactory adalah antarmuka untuk adaptor antara tampilan koleksi jarak jauh—seperti ListView, GridView, StackView—dan data pokok untuk tampilan tersebut. Implementasi Anda bertanggung jawab untuk membuat objek RemoteViews untuk setiap item dalam set data. Antarmuka ini adalah wrapper tipis di sekitar Adapter.

Anda tidak dapat mengandalkan satu instance layanan, atau data apa pun yang ada di dalamnya, untuk tetap ada. Jangan menyimpan data di RemoteViewsService kecuali jika data tersebut statis. Jika Anda ingin data widget tetap ada, pendekatan terbaik adalah menggunakan ContentProvider yang datanya tetap ada di luar siklus proses proses. Misalnya, widget toko bahan makanan dapat menyimpan status setiap item daftar belanja di lokasi persisten, seperti database SQL.

Konten utama implementasi RemoteViewsService adalah RemoteViewsFactory, yang dijelaskan di bagian berikut.

Antarmuka RemoteViewFactory

Class kustom Anda yang mengimplementasikan antarmuka RemoteViewsFactory menyediakan data untuk item dalam koleksinya ke widget. Untuk melakukannya, adaptor menggabungkan file tata letak XML item widget Anda dengan sumber data. Sumber data ini dapat berupa apa saja, mulai dari database hingga array. Dalam contoh StackWidget, sumber data adalah array WidgetItems. RemoteViewsFactory berfungsi sebagai adaptor untuk merekatkan data ke tampilan koleksi jarak jauh.

Dua metode terpenting yang perlu Anda terapkan untuk subclass RemoteViewsFactory adalah onCreate() dan getViewAt().

Sistem akan memanggil onCreate() saat membuat factory untuk pertama kalinya. Di sinilah Anda menyiapkan koneksi atau kursor ke sumber data. Misalnya, contoh StackWidget menggunakan onCreate() untuk menginisialisasi array objek WidgetItem. Saat widget Anda aktif, sistem akan mengakses objek ini menggunakan posisi indeksnya dalam array dan menampilkan teks yang dimuatnya.

Berikut adalah kutipan dari implementasi RemoteViewsFactory contoh StackWidget yang menunjukkan bagian-bagian metode onCreate():

private const val REMOTE_VIEW_COUNT: Int = 10

class StackRemoteViewsFactory(
    private val context: Context
) : RemoteViewsService.RemoteViewsFactory {

    private lateinit var widgetItems: List<WidgetItem>

    override fun onCreate() {
        // In onCreate(), set up any connections or cursors to your data
        // source. Heavy lifting, such as downloading or creating content,
        // must be deferred to onDataSetChanged() or getViewAt(). Taking
        // more than 20 seconds on this call results in an ANR.
        widgetItems = List(REMOTE_VIEW_COUNT) { index -> WidgetItem("$index!") }
    }

}

Metode RemoteViewsFactory getViewAt() menampilkan objek RemoteViews yang sesuai dengan data pada position yang ditentukan dalam set data. Berikut adalah kutipan dari implementasi RemoteViewsFactory contoh StackWidget:

override fun getViewAt(position: Int): RemoteViews {
    // Construct a remote views item based on the widget item XML file
    // and set the text based on the position.
    return RemoteViews(context.packageName, R.layout.widget_item).apply {
        setTextViewText(R.id.widget_item, widgetItems[position].text)
    }
}

Menambahkan perilaku ke setiap item

Bagian sebelumnya menunjukkan cara mengikat data ke koleksi widget. Namun, bagaimana jika Anda ingin menambahkan perilaku dinamis ke setiap item dalam tampilan koleksi?

Seperti yang dijelaskan dalam Menangani peristiwa dengan class onUpdate(), Anda biasanya menggunakan setOnClickPendingIntent() untuk menetapkan perilaku klik objek—seperti membuat tombol meluncurkan Activity. Namun, pendekatan ini tidak diizinkan untuk tampilan turunan dalam item koleksi individual. Misalnya, Anda dapat menggunakan setOnClickPendingIntent() untuk menyiapkan tombol global di widget Gmail yang meluncurkan aplikasi, tetapi tidak pada item daftar individual.

Sebagai gantinya, untuk menambahkan perilaku klik ke setiap item dalam koleksi, gunakan setOnClickFillInIntent(). Siapkan template intent tertunda untuk tampilan koleksi Anda dan tetapkan intent pengisian pada setiap item dalam koleksi menggunakan RemoteViewsFactory.

Bagian ini menggunakan contoh StackWidget untuk menjelaskan cara menambahkan perilaku ke setiap item. Dalam contoh StackWidget, jika pengguna menyentuh tampilan atas, widget akan menampilkan pesan Toast "Tampilan yang disentuh n", dengan n adalah indeks (posisi) tampilan yang disentuh. Begini cara kerjanya:

  • StackWidgetProvider—subclass AppWidgetProvider—membuat intent tertunda dengan tindakan kustom yang disebut TOAST_ACTION.

  • Saat pengguna menyentuh tampilan, intent akan diaktifkan dan menyiarkan TOAST_ACTION.

  • Siaran ini dicegat oleh metode onReceive() class StackWidgetProvider, dan widget menampilkan pesan Toast untuk tampilan yang disentuh. Data untuk item koleksi disediakan oleh RemoteViewsFactory melalui RemoteViewsService.

Menyiapkan template intent tertunda

StackWidgetProvider (subclass AppWidgetProvider) menyiapkan intent tertunda. Item individual dari koleksi tidak dapat menyiapkan intent tertundanya sendiri. Sebagai gantinya, koleksi secara keseluruhan menyiapkan template intent tertunda, dan setiap item menetapkan intent pengisian untuk membuat perilaku unik pada setiap item.

Class ini juga menerima siaran yang dikirim saat pengguna menyentuh tampilan. Hal ini memproses peristiwa ini pada onReceive() metodenya. Jika tindakan intent adalah TOAST_ACTION, widget akan menampilkan pesan Toast untuk tampilan saat ini.

const val TOAST_ACTION = "com.example.android.stackwidget.TOAST_ACTION"
const val EXTRA_ITEM = "com.example.android.stackwidget.EXTRA_ITEM"

class StackWidgetProvider : AppWidgetProvider() {

    // ...

    // Called when the BroadcastReceiver receives an Intent broadcast.
    // Checks whether the intent's action is TOAST_ACTION. If it is, the
    // widget displays a Toast message for the current item.
    override fun onReceive(context: Context, intent: Intent) {
        val mgr: AppWidgetManager = AppWidgetManager.getInstance(context)
        if (intent.action == TOAST_ACTION) {
            val appWidgetId: Int = intent.getIntExtra(
                AppWidgetManager.EXTRA_APPWIDGET_ID,
                AppWidgetManager.INVALID_APPWIDGET_ID
            )
            // EXTRA_ITEM represents a custom value provided by the Intent
            // passed to the setOnClickFillInIntent() method to indicate the
            // position of the clicked item. See StackRemoteViewsFactory in
            // Set the fill-in Intent for details.
            val viewIndex: Int = intent.getIntExtra(EXTRA_ITEM, 0)
            Toast.makeText(context, "Touched view $viewIndex", Toast.LENGTH_SHORT).show()
        }
        super.onReceive(context, intent)
    }

    override fun onUpdate(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetIds: IntArray
    ) {
        // Update each of the widgets with the remote adapter.
        appWidgetIds.forEach { appWidgetId ->

            // Sets up the intent that points to the StackViewService that
            // provides the views for this collection.
            val intent = Intent(context, StackWidgetService::class.java).apply {
                putExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, appWidgetId)
                // When intents are compared, the extras are ignored, so embed
                // the extra sinto the data so that the extras are not ignored.
                data = Uri.parse(toUri(Intent.URI_INTENT_SCHEME))
            }
            val rv = RemoteViews(context.packageName, R.layout.widget_layout).apply {
                setRemoteAdapter(R.id.stack_view, intent)

                // The empty view is displayed when the collection has no items.
                // It must be a sibling of the collection view.
                setEmptyView(R.id.stack_view, R.id.empty_view)
            }

            // This section makes it possible for items to have individualized
            // behavior. It does this by setting up a pending intent template.
            // Individuals items of a collection can't set up their own pending
            // intents. Instead, the collection as a whole sets up a pending
            // intent template, and the individual items set a fillInIntent
            // to create unique behavior on an item-by-item basis.
            val toastPendingIntent: PendingIntent = Intent(
                context,
                StackWidgetProvider::class.java
            ).run {
                // Set the action for the intent.
                // When the user touches a particular view, it has the effect of
                // broadcasting TOAST_ACTION.
                action = TOAST_ACTION
                putExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, appWidgetId)
                data = Uri.parse(toUri(Intent.URI_INTENT_SCHEME))

                // The template must be mutable, because each item fills in its
                // own extras through setOnClickFillInIntent().
                PendingIntent.getBroadcast(
                    context, 0, this,
                    PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_MUTABLE
                )
            }
            rv.setPendingIntentTemplate(R.id.stack_view, toastPendingIntent)

            appWidgetManager.updateAppWidget(appWidgetId, rv)
        }
        super.onUpdate(context, appWidgetManager, appWidgetIds)
    }
}

Menetapkan intent pengisian

RemoteViewsFactory Anda harus menetapkan intent pengisian pada setiap item dalam koleksi. Hal ini memungkinkan untuk membedakan setiap tindakan klik dari item tertentu. Intent pengisian kemudian digabungkan dengan template PendingIntent untuk menentukan intent akhir yang dijalankan saat item diketuk.

private const val REMOTE_VIEW_COUNT: Int = 10

class StackRemoteViewsFactory(
    private val context: Context,
    intent: Intent
) : RemoteViewsService.RemoteViewsFactory {

    private lateinit var widgetItems: List<WidgetItem>
    private val appWidgetId: Int = intent.getIntExtra(
        AppWidgetManager.EXTRA_APPWIDGET_ID,
        AppWidgetManager.INVALID_APPWIDGET_ID
    )

    override fun onCreate() {
        // In onCreate(), set up any connections or cursors to your data source.
        // Heavy lifting, such as downloading or creating content, must be
        // deferred to onDataSetChanged() or getViewAt(). Taking more than 20
        // seconds on this call results in an ANR.
        widgetItems = List(REMOTE_VIEW_COUNT) { index -> WidgetItem("$index!") }
        // ...
    }

    // ...

    override fun getViewAt(position: Int): RemoteViews {
        // Construct a remote views item based on the widget item XML file
        // and set the text based on the position.
        return RemoteViews(context.packageName, R.layout.widget_item).apply {
            setTextViewText(R.id.widget_item, widgetItems[position].text)

            // Set a fill-intent to fill in the pending intent template.
            // that is set on the collection view in StackWidgetProvider.
            val fillInIntent = Intent().apply {
                Bundle().also { extras ->
                    extras.putInt(EXTRA_ITEM, position)
                    putExtras(extras)
                }
            }
            // Make it possible to distinguish the individual on-click
            // action of a given item.
            setOnClickFillInIntent(R.id.widget_item, fillInIntent)
            // ...
        }
    }
    // ...
}

Memastikan data koleksi terus diperbarui

Gambar 2 mengilustrasikan alur update dalam widget yang menggunakan koleksi. Kode ini menunjukkan cara kode widget berinteraksi dengan RemoteViewsFactory dan cara Anda dapat memicu update:

Interaksi dengan RemoteViewsFactory selama update
Gambar 2. Interaksi dengan RemoteViewsFactory selama update.

Widget yang menggunakan koleksi dapat memberikan konten terbaru kepada pengguna. Misalnya, widget Gmail memberi pengguna ringkasan kotak masuk mereka. Untuk memungkinkan hal ini, picu RemoteViewsFactory dan tampilan koleksi Anda untuk mengambil dan menampilkan data baru.

Untuk melakukannya, gunakan AppWidgetManager untuk memanggil notifyAppWidgetViewDataChanged(). Panggilan ini menghasilkan callback ke metode onDataSetChanged() objek RemoteViewsFactory, yang memungkinkan Anda mengambil data baru.

Anda dapat melakukan operasi yang memerlukan pemrosesan intensif secara sinkron dalam callback onDataSetChanged(). Panggilan ini selesai sebelum metadata atau data tampilan diambil dari RemoteViewsFactory. Anda juga dapat melakukan operasi intensif pemrosesan dalam metode getViewAt(). Jika panggilan ini memerlukan waktu lama, tampilan pemuatan—yang ditentukan oleh metode getLoadingView() objek RemoteViewsFactory—akan ditampilkan di posisi tampilan koleksi yang sesuai hingga panggilan tersebut ditampilkan.

Menggunakan RemoteCollectionItems untuk meneruskan koleksi secara langsung

Android 12 (API level 31) menambahkan metode setRemoteAdapter(int viewId, RemoteViews.RemoteCollectionItems items), yang memungkinkan aplikasi Anda meneruskan koleksi secara langsung saat mengisi tampilan koleksi. Jika Anda menetapkan adaptor menggunakan metode ini, Anda tidak perlu mengimplementasikan RemoteViewsFactory dan tidak perlu memanggil notifyAppWidgetViewDataChanged().

Selain memudahkan pengisian adaptor, pendekatan ini juga menghilangkan latensi untuk mengisi item baru saat pengguna men-scroll daftar untuk menampilkan item baru. Pendekatan untuk menyetel adaptor ini lebih disarankan selama set item koleksi Anda relatif kecil. Namun, misalnya, pendekatan ini tidak berfungsi dengan baik jika koleksi Anda berisi banyak Bitmaps yang diteruskan ke setImageViewBitmap.

Jika koleksi tidak menggunakan kumpulan tata letak yang konstan—yaitu, jika beberapa item hanya ada sesekali—gunakan setViewTypeCount untuk menentukan jumlah maksimum tata letak unik yang dapat dimuat koleksi. Hal ini memungkinkan adaptor digunakan kembali di seluruh update widget aplikasi Anda.

Berikut contoh cara menerapkan koleksi RemoteViews yang disederhanakan.

val itemLayouts = listOf(
    R.layout.item_type_1,
    R.layout.item_type_2,
    // ...
)

remoteView.setRemoteAdapter(
    R.id.list_view,
    RemoteViews.RemoteCollectionItems.Builder()
        .addItem(/* id= */ ID_1, RemoteViews(context.packageName, R.layout.item_type_1))
        .addItem(/* id= */ ID_2, RemoteViews(context.packageName, R.layout.item_type_2))
        // ...
        .setViewTypeCount(itemLayouts.count())
        .build()
)