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 Glance.

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à trong ứng dụng của bạn.

1. Đăng ký nhà cung cấp tiện ích ứng dụng trong tệp AndroidManifest.xml của bạn 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 trình nhận 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 tiện ích đơn giản để tạo và xác định ứng dụng thông tin tiện ích trong tệp @xml/my_app_widget_info.

   Điểm khác biệt duy nhất của tính năng Glance là không có XML initialLayout, nhưng bạn phải xác định một định dạng. Bạn có thể dùng bố cục tải được xác định trước 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 rồi 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 để hiển thị 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:

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {

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

Lúc này, bạn đã định cấu hình AppWidget bằng tính năng Glance.

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<MyActivity>()
                )
                Button(
                    text = "Work",
                    onClick = actionStartActivity<MyActivity>()
                )
            }
        }
    }
}
GlanceSnippets.kt

Mã mẫu ở trên sẽ thực hiện những việc sau:

• Trong cấp cao nhất Column, các mục được đặt lần lượt theo chiều dọc khá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 của nó lên 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 là khoảng đệm.
  • Mục thứ hai là Row, trong đó các mục được đặt theo chiều ngang sau nhau, với hai Buttons nằm ở giữa theo chiều ngang (horizontalAlignment). Màn hình cuối cùng phụ thuộc vào không gian có sẵn. Hình ảnh sau đây là ví dụ về giao diện của quy trình này:

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. Xem tài liệu tham khảo tài liệu để biết danh sách đầy đủ các thành phần, thông số và phương pháp đối tượng sửa đổi cho mỗi lớp.