Tạo tiện ích ứng dụng bằng tính năng Xem nhanh

Các phần sau đây mô tả cách tạo một tiện ích ứng dụng đơn giản bằng tính năng Xem nhanh.

Khai báo AppWidget trong Tệp kê khai

Sau khi hoàn tất các bước thiết lập, hãy khai báo AppWidget và siêu dữ liệu của nó trong ứng dụng.

  1. Đăng ký nhà cung cấp tiện ích ứng dụng trong tệp AndroidManifest.xml và tệp siêu dữ liệu liên kết:
<receiver android:name=".glance.MyReceiver"
    android:exported="true">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data
        android:name="android.appwidget.provider"
        android:resource="@xml/my_app_widget_info" />
</receiver>
AndroidManifest.xml
  1. Mở rộng receiver AppWidget từ GlanceAppWidgetReceiver:

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {
    override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget")
}
GlanceSnippets.kt

Thêm siêu dữ liệu AppWidgetProviderInfo

Tiếp theo, hãy làm theo bước sau để thêm siêu dữ liệu AppWidgetProviderInfo:

  1. Làm theo hướng dẫn Tạo một tiện ích đơn giản để tạo và xác định thông tin về tiện ích ứng dụng trong tệp @xml/my_app_widget_info.

    Điểm khác biệt duy nhất của tính năng Xem nhanh là không có XML initialLayout, nhưng bạn phải xác định một XML. Bạn có thể sử dụng bố cục tải định sẵn được cung cấp trong thư viện:

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/glance_default_loading_layout">
</appwidget-provider>
my_app_widget_info.xml

Định nghĩa GlanceAppWidget

  1. Tạo một lớp mới mở rộng từ GlanceAppWidget và ghi đè phương thức provideGlance. Đây là phương thức mà bạn có thể tải dữ liệu cần thiết để kết xuất tiện ích của bạn:

class MyAppWidget : GlanceAppWidget() {

    override suspend fun provideGlance(context: Context, id: GlanceId) {

        // In this method, load data needed to render the AppWidget.
        // Use `withContext` to switch to another thread for long running
        // operations.

        provideContent {
            // create your AppWidget here
            Text("Hello World")
        }
    }
}
GlanceSnippets.kt

  1. Tạo thực thể trong glanceAppWidget trên GlanceAppWidgetReceiver của bạn:

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {

    // Let MyAppWidgetReceiver know which GlanceAppWidget to use
    override val glanceAppWidget: GlanceAppWidget = MyAppWidget()
}
GlanceSnippets.kt

Bạn hiện đã định cấu hình AppWidget bằng tính năng Xem nhanh.

Tạo giao diện người dùng

Đoạn mã sau đây minh hoạ cách tạo giao diện người dùng:

/* Import Glance Composables
 In the event there is a name clash with the Compose classes of the same name,
 you may rename the imports per https://kotlinlang.org/docs/packages.html#imports
 using the `as` keyword.

import androidx.glance.Button
import androidx.glance.layout.Column
import androidx.glance.layout.Row
import androidx.glance.text.Text
*/
class MyAppWidget : GlanceAppWidget() {

    override suspend fun provideGlance(context: Context, id: GlanceId) {
        // Load data needed to render the AppWidget.
        // Use `withContext` to switch to another thread for long running
        // operations.

        provideContent {
            // create your AppWidget here
            GlanceTheme {
                MyContent()
            }
        }
    }

    @Composable
    private fun MyContent() {
        Column(
            modifier = GlanceModifier.fillMaxSize()
                .background(GlanceTheme.colors.background),
            verticalAlignment = Alignment.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Where to?", modifier = GlanceModifier.padding(12.dp))
            Row(horizontalAlignment = Alignment.CenterHorizontally) {
                Button(
                    text = "Home",
                    onClick = actionStartActivity<MainActivity>()
                )
                Button(
                    text = "Work",
                    onClick = actionStartActivity<MainActivity>()
                )
            }
        }
    }
}
GlanceSnippets.kt

Mã mẫu trên có những chức năng sau:

  • Trong cấp cao nhất Column, các mục được xếp lần lượt theo chiều dọc.
  • Column mở rộng kích thước để phù hợp với không gian có sẵn (thông qua GlanceModifier và căn chỉnh nội dung ở trên cùng (verticalAlignment) và căn giữa theo chiều ngang (horizontalAlignment).
  • Nội dung của Column được xác định bằng hàm lambda. Thứ tự rất quan trọng.
    • Mục đầu tiên trong Column là thành phần Text có 12.dp khoảng đệm.
    • Mục thứ hai là Row, trong đó các mục được đặt lần lượt theo chiều ngang, với hai Buttons được căn giữa theo chiều ngang (horizontalAlignment). Màn hình cuối cùng phụ thuộc vào không gian còn trống. Sau đây là một ví dụ về hình thức của giao diện này:
tiện_ích_đích
Hình 1. Giao diện người dùng mẫu.

Bạn có thể thay đổi các giá trị căn chỉnh hoặc áp dụng các giá trị đối tượng sửa đổi khác nhau (chẳng hạn như khoảng đệm) để thay đổi vị trí và kích thước của các thành phần. Hãy xem tài liệu tham khảo để biết danh sách đầy đủ các thành phần, tham số và đối tượng sửa đổi có sẵn cho từng lớp.

Trước
Thiết lập nhanh
Tiếp
Xử lý tương tác của người dùng bằng tính năng Xem nhanh