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.
- Đă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>
- Mở rộng trình nhận
AppWidget
từGlanceAppWidgetReceiver
:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget") }
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
:
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>
Định nghĩa GlanceAppWidget
Tạo một lớp mới mở rộng từ
GlanceAppWidget
rồi ghi đè phương thứcprovideGlance
. Đâ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") } } }
- Tạo thực thể trong
glanceAppWidget
trênGlanceAppWidgetReceiver
:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { // Let MyAppWidgetReceiver know which GlanceAppWidget to use override val glanceAppWidget: GlanceAppWidget = MyAppWidget() }
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>() ) } } } }
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 quaGlanceModifier
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ầnText
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 haiButtons
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:
- Mục đầu tiên trong
![tiện_ích_đích](https://developer.android.com/static/develop/ui/compose/images/destination_widget.png?authuser=8&hl=vi)
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.