建立視差捲動效果

視差捲動是一種技術,可讓背景內容和前景內容以不同速度捲動。您可以實作這項技巧來改善應用程式的 UI,為使用者提供更生動的捲動體驗。

版本相容性

這個實作方式需要將專案 minSDK 設為 API 級別 21 以上。

依附元件

建立視差效果

如要實現視差效果,請將捲動可組合項的捲動值的一小部分套用至需要視差效果的可組合項。以下程式碼片段會擷取兩個巢狀視覺元素 (圖片和文字區塊),並以不同速度在同方向捲動:

@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 修飾符,以調整可組合項捲動的速度。
  • Image 的捲動速度比 Text 慢,因此當兩個可組合項以不同的速度垂直轉譯時,就會產生視差效果。

結果

圖 1. 具有視差效果的捲動清單。

包含此指南的集合

本指南是精選的快速指南系列之一,涵蓋更廣泛的 Android 開發目標:

清單和格線可讓應用程式以視覺上賞心悅目且使用者易於取用的形式顯示集合。
瞭解如何運用明亮吸睛的視覺元素,為 Android 應用程式打造美觀的視覺效果。
文字是任何 UI 的核心部分。瞭解在應用程式中顯示文字的不同方式,以提供優質的使用者體驗。

有問題或意見回饋嗎?

請前往常見問題頁面,瞭解快速指南或與我們聯絡,分享您的想法。