Glance로 앱 위젯 만들기

다음 섹션에서는 Glance를 사용하여 간단한 앱 위젯을 만드는 방법을 설명합니다.

매니페스트에서 AppWidget 선언

설정 단계를 완료한 후 AppWidget 및 앱의 메타데이터도 제공합니다.

1. 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>
AndroidManifest.xml

1. GlanceAppWidgetReceiver에서 AppWidget 수신기를 확장합니다.

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

AppWidgetProviderInfo 메타데이터 추가

그런 다음 다음 단계에 따라 AppWidgetProviderInfo 메타데이터를 추가합니다.

1. 간단한 위젯 만들기 가이드에 따라 앱을 만들고 정의합니다. 위젯 정보를 @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>
my_app_widget_info.xml

GlanceAppWidget 정의

1. 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")
        }
    }
}
GlanceSnippets.kt

1. GlanceAppWidgetReceiver의 glanceAppWidget에서 인스턴스화합니다.

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {

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

이제 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>()
                )
            }
        }
    }
}
GlanceSnippets.kt

위의 코드 샘플은 다음을 수행합니다.

• 최상위 수준 Column에서 항목은 각 항목 뒤에 세로로 배치됩니다. 있습니다.
• Column는 사용 가능한 공간과 일치하도록 크기를 확장합니다( GlanceModifier 및 콘텐츠를 상단 (verticalAlignment)에 맞춥니다. 가로로 가운데 맞춤 (horizontalAlignment)합니다.
• Column의 콘텐츠는 람다를 사용하여 정의됩니다. 순서가 중요합니다.
  • Column의 첫 번째 항목은 Text 구성요소로, 12.dp 패딩.
  • 두 번째 항목은 항목이 가로로 배치되는 Row입니다. 두 개의 Buttons를 가로로 가운데 정렬 (horizontalAlignment). 최종 표시는 사용 가능한 공간에 따라 다릅니다. 다음 이미지는 다음과 같은 모습의 예입니다.

정렬 값을 변경하거나 다른 수정자 값 (예: 패딩)를 사용하여 구성요소의 위치와 크기를 변경할 수 있습니다. 자세한 내용은 이 문서에서 구성요소, 매개변수, 사용 가능한 전체 목록을 확인하세요. 각 클래스의 수정자를 포함합니다.