パララックス スクロール効果を作成する

パララックス スクロールは、背景コンテンツと前景コンテンツを異なる速度でスクロールする手法です。この手法を実装すると、アプリの UI を強化し、ユーザーがスクロールする際によりダイナミックなエクスペリエンスを実現できます。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

パララックス効果を作成する

パララックス効果を実現するには、スクロール コンポーザブルのスクロール値の一部を、パララックス効果が必要なコンポーザブルに適用します。次のスニペットは、2 つのネストされたビジュアル要素(画像とテキストのブロック)を取り、同じ方向に異なる速度でスクロールします。

@Composable
fun ParallaxEffect() {
    fun Modifier.parallaxLayoutModifier(scrollState: ScrollState, rate: Int) =
        layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            val height = if (rate > 0) scrollState.value / rate else scrollState.value
            layout(placeable.width, placeable.height) {
                placeable.place(0, height)
            }
        }

    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .verticalScroll(scrollState),
    ) {

        Image(
            painterResource(id = R.drawable.cupcake),
            contentDescription = "Android logo",
            contentScale = ContentScale.Fit,
            // Reduce scrolling rate by half.
            modifier = Modifier.parallaxLayoutModifier(scrollState, 2)
        )

        Text(
            text = stringResource(R.string.detail_placeholder),
            modifier = Modifier
                .background(Color.White)
                .padding(horizontal = 8.dp),

        )
    }
}

コードに関する主なポイント

  • カスタム layout 修飾子を作成して、コンポーザブルのスクロール速度を調整します。
  • ImageText よりも遅い速度でスクロールし、2 つのコンポーザブルが異なる速度で垂直方向に移動するため、パララックス効果が生成されます。

結果

図 1. パララックス エフェクトのあるスクロール リスト。

このガイドを含むコレクション

このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。

リストとグリッドを使用すると、アプリでコレクションを視覚的に魅力的でユーザーが使いやすい形式で表示できます。
明るく魅力的なビジュアルを使用して、Android アプリの外観を美しくする手法について学びます。
テキストは UI の主要な構成要素です。アプリでテキストを表示して優れたユーザー エクスペリエンスを提供するさまざまな方法を学びます。

ご質問やフィードバックがある場合

よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。