Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

Glance で UI を作成する

このページでは、既存の Glance コンポーネントを使用して、Glance でサイズを処理し、柔軟でレスポンシブなレイアウトを提供する方法について説明します。

`Box`、`Column`、`Row` を使用します。

Glance には、主に 3 つのコンポーザブルレイアウトがあります。

Box: 要素を重ねて配置します。これは RelativeLayout に変換されます。
Column: 要素を縦軸に沿って並べます。これは、縦向きの LinearLayout に変換されます。
Row: 水平軸に沿って要素を並べます。これは、横向きの LinearLayout に変換されます。

Glance は Scaffold オブジェクトをサポートしています。Column、Row、Box コンポーザブルを、指定された Scaffold オブジェクト内に配置します。

Column、Row、Box のレイアウト。 — **図 1.** Column、Row、Box を使用したレイアウトの例。

これらのコンポーザブルでは、修飾子を使用して、コンテンツの垂直方向と水平方向の配置、および幅、高さ、重み、パディングの制約を定義できます。さらに、各子は修飾子を定義して、親内のスペースと配置を変更できます。

次の例は、図 1 に示すように、子を水平方向に均等に配置する Row を作成する方法を示しています。

Row(modifier = GlanceModifier.fillMaxWidth().padding(16.dp)) {
    val modifier = GlanceModifier.defaultWeight()
    Text("first", modifier)
    Text("second", modifier)
    Text("third", modifier)
}GlanceSnippets.kt

Row は使用可能な最大幅を埋め、各子には同じ重みが設定されているため、使用可能なスペースを均等に共有します。ニーズに合わせてレイアウトを調整するために、さまざまな重み、サイズ、パディング、配置を定義できます。

スクロール可能なレイアウトを使用する

レスポンシブなコンテンツを提供するもう 1 つの方法は、スクロール可能にすることです。これは LazyColumn コンポーザブルで実現できます。このコンポーズ可能な関数を使用すると、アプリウィジェットのスクロール可能なコンテナ内に表示するアイテムのセットを定義できます。

次のスニペットは、LazyColumn 内でアイテムを定義するさまざまな方法を示しています。

アイテムの数を指定できます。

// Remember to import Glance Composables
// import androidx.glance.appwidget.layout.LazyColumn

LazyColumn {
    items(10) { index: Int ->
        Text(
            text = "Item $index",
            modifier = GlanceModifier.fillMaxWidth()
        )
    }
}GlanceSnippets.kt

個々のアイテムを指定する:

LazyColumn {
    item {
        Text("First Item")
    }
    item {
        Text("Second Item")
    }
}GlanceSnippets.kt

アイテムのリストまたは配列を指定します。

LazyColumn {
    items(peopleNameList) { name ->
        Text(name)
    }
}GlanceSnippets.kt

上記の例を組み合わせて使用することもできます。

LazyColumn {
    item {
        Text("Names:")
    }
    items(peopleNameList) { name ->
        Text(name)
    }

    // or in case you need the index:
    itemsIndexed(peopleNameList) { index, person ->
        Text("$person at index $index")
    }
}GlanceSnippets.kt

上記のコードスニペットでは itemId が指定されていません。itemId を指定すると、Android 12 以降のリストと appWidget の更新（リストへのアイテムの追加や削除など）で、パフォーマンスが向上し、スクロール位置が維持されます。次の例は、itemId を指定する方法を示しています。

items(
    items = peopleList,
    itemId = { person -> person.id.hashCode().toLong() }) { person ->
    Text(person.name)
}GlanceSnippets.kt

スナップスクロール

スナップスクロールは、スクロール可能なコンテンツをウィジェットコンテナの上部にスナップできるアニメーションです。

動画 1. 左側は、スクロール中に所定の位置にスナップしないリストアイテムを示しています。右側は、所定の位置にスナップします。

スナップスクロールを実装するには、次の条件を満たしている必要があります。

Glance の依存関係を 1.3.0-alpha02 以降に更新します。
compileSdk を 37 以上に設定します。スナップスクロールは、Android 17 以降を搭載したデバイスでサポートされています。
VerticalScrollMode で LazyColumn を構成します。デバイスがスナップスクロールをサポートしている場合は、SnapScrollMatchHeight を使用します。それ以外の場合は、Normal を使用します。

画像でスナップスクロールを使用している場合は、フルブリード画像の正規レイアウトをご覧ください。

@Composable
fun SnapScrollLayout() {
    val height = LocalSize.current.height
    val items = listOf(
        ColorItem(Color.Red, "Red"),
        ColorItem(Color.Yellow, "Yellow"),
        ColorItem(Color.Blue, "Blue")
    )

    val scrollMode = if (Build.VERSION.SDK_INT >= 37) {
        VerticalScrollMode.SnapScrollMatchHeight(height)
    } else {
        VerticalScrollMode.Normal
    }

    LazyColumn(
        verticalScrollMode = scrollMode
    ) {
        items(items) { item ->
            ColorCard(item, height)
        }
    }
}

@Composable
private fun ColorCard(item: ColorItem, height: Dp) {
    Box(
        modifier = GlanceModifier
            .background(item.color)
            .fillMaxWidth()
            .height(height),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = item.name,
            modifier = GlanceModifier.background(Color.White)
        )
    }
}GlanceSnippets.kt

`SizeMode` を定義する

AppWidget のサイズは、デバイス、ユーザーチョイス、ランチャーによって異なる可能性があるため、柔軟なウィジェットレイアウトを提供するページで説明されているように、柔軟なレイアウトを提供することが重要です。Glance では、SizeMode 定義と LocalSize 値を使用して、この処理を簡素化しています。以降のセクションでは、3 つのモードについて説明します。

`SizeMode.Single`

SizeMode.Single モード（デフォルトモード）: これは、1 種類のコンテンツのみが提供されることを示します。つまり、AppWidget の使用可能なサイズが変更されても、コンテンツサイズは変更されません。

class MyAppWidget : GlanceAppWidget() {

    override val sizeMode = SizeMode.Single

    override suspend fun provideGlance(context: Context, id: GlanceId) {
        // ...

        provideContent {
            MyContent()
        }
    }

    @Composable
    private fun MyContent() {
        // Size will be the minimum size or resizable
        // size defined in the App Widget metadata
        val size = LocalSize.current
        // ...
    }
}GlanceSnippets.kt

このモードを使用する場合は、次の点を確認してください。

最小サイズと最大サイズのメタデータ値が、コンテンツサイズに基づいて適切に定義されている。
コンテンツは、想定されるサイズ範囲内で十分な柔軟性を備えている。

一般に、このモードは次のいずれかの場合に使用します。

a）AppWidget のサイズが固定されている。 b）サイズを変更してもコンテンツが変更されない。

`SizeMode.Responsive`

このモードは、レスポンシブレイアウトの提供に相当します。これにより、GlanceAppWidget は特定のサイズに制限されたレスポンシブレイアウトのセットを定義できます。定義されたサイズごとに、AppWidget の作成時または更新時にコンテンツが作成され、特定のサイズにマッピングされます。システムは、使用可能なサイズに基づいて最適なものを選択します。

たとえば、宛先 AppWidget では、3 つのサイズとそのコンテンツを定義できます。

class MyAppWidget : GlanceAppWidget() {

    companion object {
        private val SMALL_SQUARE = DpSize(100.dp, 100.dp)
        private val HORIZONTAL_RECTANGLE = DpSize(250.dp, 100.dp)
        private val BIG_SQUARE = DpSize(250.dp, 250.dp)
    }

    override val sizeMode = SizeMode.Responsive(
        setOf(
            SMALL_SQUARE,
            HORIZONTAL_RECTANGLE,
            BIG_SQUARE
        )
    )

    override suspend fun provideGlance(context: Context, id: GlanceId) {
        // ...

        provideContent {
            MyContent()
        }
    }

    @Composable
    private fun MyContent() {
        // Size will be one of the sizes defined above.
        val size = LocalSize.current
        Column {
            if (size.height >= BIG_SQUARE.height) {
                Text(text = "Where to?", modifier = GlanceModifier.padding(12.dp))
            }
            Row(horizontalAlignment = Alignment.CenterHorizontally) {
                Button()
                Button()
                if (size.width >= HORIZONTAL_RECTANGLE.width) {
                    Button("School")
                }
            }
            if (size.height >= BIG_SQUARE.height) {
                Text(text = "provided by X")
            }
        }
    }
}
GlanceSnippets.kt

上の例では、provideContent メソッドが 3 回呼び出され、定義されたサイズにマッピングされています。

最初の呼び出しでは、サイズは 100x100 と評価されます。コンテンツには、追加のボタン、上部と下部のテキストは含まれていません。
2 回目の呼び出しでは、サイズは 250x100 と評価されます。コンテンツには追加のボタンが含まれていますが、上部と下部のテキストは含まれていません。
3 回目の呼び出しでは、サイズは 250x250 と評価されます。コンテンツには、追加のボタンと両方のテキストが含まれます。

SizeMode.Responsive は、他の 2 つのモードを組み合わせたもので、事前定義された境界内でレスポンシブコンテンツを定義できます。一般的に、このモードはパフォーマンスが向上し、AppWidget のサイズ変更時にスムーズな遷移が可能になります。

次の表に、SizeMode と AppWidget の使用可能なサイズに応じたサイズの値を示します。

利用可能なサイズ	105 x 110	203 x 112	72 x 72	203 x 150
`SizeMode.Single`	110 x 110	110 x 110	110 x 110	110 x 110
`SizeMode.Exact`	105 x 110	203 x 112	72 x 72	203 x 150
`SizeMode.Responsive`	80 x 100	80 x 100	80 x 100	150×120
* 正確な値はデモ用です。

`SizeMode.Exact`

SizeMode.Exact は、正確なレイアウトを提供することと同等です。これは、使用可能な AppWidget サイズが変更されるたびに（たとえば、ユーザーがホーム画面で AppWidget のサイズを変更したとき）、GlanceAppWidget コンテンツをリクエストします。

たとえば、デスティネーションウィジェットでは、使用可能な幅が特定の値より大きい場合に、追加のボタンを追加できます。

class MyAppWidget : GlanceAppWidget() {

    override val sizeMode = SizeMode.Exact

    override suspend fun provideGlance(context: Context, id: GlanceId) {
        // ...

        provideContent {
            MyContent()
        }
    }

    @Composable
    private fun MyContent() {
        // Size will be the size of the AppWidget
        val size = LocalSize.current
        Column {
            Text(text = "Where to?", modifier = GlanceModifier.padding(12.dp))
            Row(horizontalAlignment = Alignment.CenterHorizontally) {
                Button()
                Button()
                if (size.width > 250.dp) {
                    Button("School")
                }
            }
        }
    }
}GlanceSnippets.kt

このモードは他のモードよりも柔軟性に優れていますが、いくつかの注意点があります。

サイズが変更されるたびに、AppWidget を完全に再作成する必要があります。コンテンツが複雑な場合、パフォーマンスの問題や UI のジャンプが発生する可能性があります。
使用可能なサイズは、ランチャーの実装によって異なる場合があります。たとえば、ランチャーがサイズのリストを提供しない場合は、可能な最小サイズが使用されます。
Android 12 より前のデバイスでは、サイズ計算ロジックがすべての状況で機能するとは限りません。

一般に、SizeMode.Responsive を使用できない場合（つまり、少数のレスポンシブレイアウトでは対応できない場合）は、このモードを使用する必要があります。

リソースにアクセスする

次の例に示すように、LocalContext.current を使用して Android リソースにアクセスします。

LocalContext.current.getString(R.string.glance_title)GlanceSnippets.kt

最終的な RemoteViews オブジェクトのサイズを縮小し、ダイナミックカラーなどの動的リソースを有効にするには、リソース ID を直接指定することをおすすめします。

コンポーザブルとメソッドは、ImageProvider などの「プロバイダ」を使用するか、GlanceModifier.background(R.color.blue) などのオーバーロードメソッドを使用して、リソースを受け入れます。次に例を示します。

Column(
    modifier = GlanceModifier.background(R.color.default_widget_background)
) { /**...*/ }

Image(
    provider = ImageProvider(R.drawable.ic_logo),
    contentDescription = "My image",
)GlanceSnippets.kt

テキストを処理する

Glance 1.1.0 には、テキストスタイルを設定する API が含まれています。TextStyle クラスの fontSize、fontWeight、fontFamily 属性を使用してテキストスタイルを設定します。

fontFamily は、次の例に示すように、すべてのシステムフォントをサポートしていますが、アプリのカスタムフォントはサポートしていません。

Text(
    style = TextStyle(
        fontWeight = FontWeight.Bold,
        fontSize = 18.sp,
        fontFamily = FontFamily.Monospace
    ),
    text = "Example Text"
)GlanceSnippets.kt

複合ボタンを追加する

複合ボタンは Android 12 で導入されました。Glance は、次のタイプの複合ボタンの下位互換性をサポートしています。

これらの複合ボタンはそれぞれ、「チェック済み」状態を表すクリック可能なビューを表示します。

var isApplesChecked by remember { mutableStateOf(false) }
var isEnabledSwitched by remember { mutableStateOf(false) }
var isRadioChecked by remember { mutableIntStateOf(0) }

CheckBox(
    checked = isApplesChecked,
    onCheckedChange = { isApplesChecked = !isApplesChecked },
    text = "Apples"
)

Switch(
    checked = isEnabledSwitched,
    onCheckedChange = { isEnabledSwitched = !isEnabledSwitched },
    text = "Enabled"
)

RadioButton(
    checked = isRadioChecked == 1,
    onClick = { isRadioChecked = 1 },
    text = "Checked"
)GlanceSnippets.kt

状態が変化すると、指定されたラムダがトリガーされます。次の例に示すように、チェック状態を保存できます。

class MyAppWidget : GlanceAppWidget() {

    override suspend fun provideGlance(context: Context, id: GlanceId) {
        val myRepository = MyRepository.getInstance()

        provideContent {
            val scope = rememberCoroutineScope()

            val saveApple: (Boolean) -> Unit =
                { scope.launch { myRepository.saveApple(it) } }
            MyContent(saveApple)
        }
    }

    @Composable
    private fun MyContent(saveApple: (Boolean) -> Unit) {

        var isAppleChecked by remember { mutableStateOf(false) }

        Button(
            text = "Save",
            onClick = { saveApple(isAppleChecked) }
        )
    }
}GlanceSnippets.kt

colors 属性を CheckBox、Switch、RadioButton に指定して、色をカスタマイズすることもできます。

CheckBox(
    // ...
    colors = CheckboxDefaults.colors(
        checkedColor = ColorProvider(day = colorAccentDay, night = colorAccentNight),
        uncheckedColor = ColorProvider(day = Color.DarkGray, night = Color.LightGray)
    ),
    checked = isChecked,
    onCheckedChange = { isChecked = !isChecked }
)

Switch(
    // ...
    colors = SwitchDefaults.colors(
        checkedThumbColor = ColorProvider(day = Color.Red, night = Color.Cyan),
        uncheckedThumbColor = ColorProvider(day = Color.Green, night = Color.Magenta),
        checkedTrackColor = ColorProvider(day = Color.Blue, night = Color.Yellow),
        uncheckedTrackColor = ColorProvider(day = Color.Magenta, night = Color.Green)
    ),
    checked = isChecked,
    onCheckedChange = { isChecked = !isChecked },
    text = "Enabled"
)

RadioButton(
    // ...
    colors = RadioButtonDefaults.colors(
        checkedColor = ColorProvider(day = Color.Cyan, night = Color.Yellow),
        uncheckedColor = ColorProvider(day = Color.Red, night = Color.Blue)
    ),

    )GlanceSnippets.kt

追加コンポーネント

Glance 1.1.0 には、次の表に示すように、追加のコンポーネントのリリースが含まれています。

名前	参照リンク	その他の注意事項
塗りつぶしボタン	コンポーネント
アウトラインボタン	コンポーネント
アイコンボタン	コンポーネント	プライマリ / セカンダリ / アイコンのみ
タイトルバー	コンポーネント
Scaffold		Scaffold とタイトルバーは同じデモにあります。

設計の詳細については、Figma のデザインキットのコンポーネント設計をご覧ください。

正規レイアウトの詳細については、正規ウィジェットレイアウトをご覧ください。

GlanceAppWidget を管理、更新する

Glance テーマを実装する

Glance で UI を作成する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

Box、Column、Row を使用します。