Android Jetpack Compose中的跑马灯(Marquee)效果实现

blog logo

配置

marquee 修饰符可从依赖项1.4.0的版本中获得androidx.compose.foundation:foundation。如果您使用以下任一依赖项 —androidx.compose.material3:material3或androidx.compose.material:material，那么您只需升级到1.4.0上述库即可。这是因为这两个material库都依赖于基础模块。因此，升级它们的版本也将隐式更新基础模块的版本。

dependencies {
    
    
    // if you're using material design 2
    implementation 'androidx.compose.material3:material:1.4.0'
    // if you're using material design 3
    implementation 'androidx.compose.material3:material3:1.4.0'
    // if you're just using foundation directly
    implementation 'androidx.compose.foundation:foundation:1.4.0'
}

或者，如果您正在使用Compose Bill Of Materials（BOM），则升级bom的版本到2023.03.00。

https://developer.android.com/jetpack/compose/bom/bom

dependencies {
    
    
    def composeBom = platform('androidx.compose:compose-bom:2023.03.00')
    implementation composeBom
    androidTestImplementation composeBom
}

将跑马灯效果应用于组合式非常简单。只需在您想要添加跑马灯效果的组合式上使用 basicMarquee() 修饰符即可。就是这么简单！在撰写本文时，basicMarquee() 修饰符带有 @ExperimentalFoundationApi 注释。因此，您可以使用 @OptIn(ExperimentalFoundationApi::class) 注释进行选择加入，或者在使用修饰符的组合式上使用 @ExperimentalFoundationApi 进行传播。以下是一个示例。

@OptIn(ExperimentalFoundationApi::class)
@Composable
private fun MarqueeEffect() {
    
    
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
    
    
        Text(
            modifier = Modifier.basicMarquee(),
            text = "Compose has finally added support for Marquee! It's soo easy to implement!"
        )
    }
}

Marquee 修饰符被应用于文本组合式

marquee 修饰符应用于非文本组合

是的，您读对了！作为修饰符，marquee 修饰符也可以应用于任何组合式，而不仅仅是文本组合式。以下是在非文本组合式上使用它的示例。

@OptIn(ExperimentalFoundationApi::class)
@Composable
private fun MarqueeEffect() {
    
    
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
    
    
        Row(modifier = Modifier.basicMarquee()) {
    
    
            repeat(30) {
    
    
                Box(
                    modifier = Modifier
                        .size(30.dp)
                        .background(Color.Red)
                )
                Spacer(modifier = Modifier.width(8.dp))
            }
        }
    }
}

Marquee 修饰符被应用于非文本组合式

basicMarquee() 修饰符的几点需要注意的事项

只有当应用了该修饰符的组合式的内容过宽而无法适应可用空间时，修饰符才会应用跑马灯效果。如果内容能够适应可用空间，则修饰符无效。
如果动画正在运行，则当传递给修饰符的任何参数发生更改或内容/容器组合式的大小发生更改时，它将重新启动。
无限制地保持跑马灯动画运行并不是一个好主意，因为它可能会影响电池寿命，而且从用户体验的角度来看，这并没有什么意义。一个很好的默认值是仅在用户表明想要查看更多内容时才运行动画，例如通过单击内容。

将跑马灯效果应用于更实际的情况中

如前所述，长期运行跑马灯动画并不理想。一个改进的方式是仅在组合在焦点时运行动画。可以通过利用modifier的animationMode参数来实现这一点。

@OptIn(ExperimentalFoundationApi::class)
@Composable
private fun MarqueeEffect() {
    
    
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
    
    
        val focusRequester = remember {
    
     FocusRequester() }
        Text(
            modifier = Modifier
                .basicMarquee(animationMode = MarqueeAnimationMode.WhileFocused)
                .focusRequester(focusRequester)
                .focusable()
                .clickable {
    
     focusRequester.requestFocus() },
            text = "Compose has finally added support for Marquee! It's soo easy to implement!"
        )
    }
}

仅在有焦点状态下才运行跑马灯效果

结论

本篇博客介绍了basicMarquee()修饰符的使用方法，我们仅仅是对其进行了浅显的讲解，还有许多不同的参数可以对修饰符的行为进行自定义，大家一定要多加尝试和探索！