다음 섹션에서는 Glance를 사용하여 간단한 앱 위젯을 만드는 방법을 설명합니다.
매니페스트에서 AppWidget
선언
설정 단계를 완료한 후 AppWidget
및
앱의 메타데이터도 제공합니다.
AndroidManifest.xml
파일에 앱 위젯의 제공자를 등록합니다. 및 관련 메타데이터 파일:
<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>
GlanceAppWidgetReceiver
에서AppWidget
수신기를 확장합니다.
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget") }
AppWidgetProviderInfo
메타데이터 추가
그런 다음 다음 단계에 따라 AppWidgetProviderInfo
메타데이터를 추가합니다.
간단한 위젯 만들기 가이드에 따라 앱을 만들고 정의합니다. 위젯 정보를
@xml/my_app_widget_info
파일에 입력합니다.Glance의 유일한 차이점은
initialLayout
XML이 없지만 하나를 정의해야 합니다. 이 API에서 제공되는 사전 정의된 로드 레이아웃을 있습니다.
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:initialLayout="@layout/glance_default_loading_layout">
</appwidget-provider>
GlanceAppWidget
정의
GlanceAppWidget
에서 확장되고provideGlance
메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다. 이 메서드는 다음과 같습니다.
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") } } }
GlanceAppWidgetReceiver
의glanceAppWidget
에서 인스턴스화합니다.
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { // Let MyAppWidgetReceiver know which GlanceAppWidget to use override val glanceAppWidget: GlanceAppWidget = MyAppWidget() }
이제 Glance를 사용하여 AppWidget
를 구성했습니다.
UI 만들기
다음 스니펫은 UI를 만드는 방법을 보여줍니다.
/* 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>() ) } } } }
위의 코드 샘플은 다음을 수행합니다.
- 최상위 수준
Column
에서 항목은 각 항목 뒤에 세로로 배치됩니다. 있습니다. Column
는 사용 가능한 공간과 일치하도록 크기를 확장합니다(GlanceModifier
및 콘텐츠를 상단 (verticalAlignment
)에 맞춥니다. 가로로 가운데 맞춤 (horizontalAlignment
)합니다.Column
의 콘텐츠는 람다를 사용하여 정의됩니다. 순서가 중요합니다.
![대상_위젯](https://developer.android.google.cn/static/develop/ui/compose/images/destination_widget.png?authuser=19&hl=ko)
정렬 값을 변경하거나 다른 수정자 값 (예: 패딩)를 사용하여 구성요소의 위치와 크기를 변경할 수 있습니다. 자세한 내용은 이 문서에서 구성요소, 매개변수, 사용 가능한 전체 목록을 확인하세요. 각 클래스의 수정자를 포함합니다.