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이 없지만 직접 정의해야 한다는 것입니다. 라이브러리에서 제공되는 사전 정의된 로드 레이아웃을 사용할 수 있습니다.

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

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

• 최상위 수준 Column에서는 항목이 세로로 나란히 배치됩니다.
• Column는 사용 가능한 공간에 맞게 크기를 확장하고 (GlanceModifier를 통해 콘텐츠를 상단 (verticalAlignment)에 정렬하고 가로로 가운데 정렬 (horizontalAlignment)합니다.
• Column의 콘텐츠는 람다를 사용하여 정의됩니다. 순서가 중요합니다.
  • Column의 첫 번째 항목은 12.dp의 패딩이 있는 Text 구성요소입니다.
  • 두 번째 항목은 Row로, 항목은 가로로 나란히 배치되고 두 개의 Buttons는 가로로 가운데 배치(horizontalAlignment)됩니다. 최종 디스플레이는 사용 가능한 공간에 따라 다릅니다. 다음 이미지는 이러한 모습의 예입니다.

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