Android Jetpack Compose中的跑马灯(Marquee)效果实现
配置
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 修饰符也可以应用于任何组合式，而不仅仅是文本组合式。以下是在非文本组合式上使用它的示例。
@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))
}
}
}
}
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()修饰符的使用方法，我们仅仅是对其进行了浅显的讲解，还有许多不同的参数可以对修饰符的行为进行自定义，大家一定要多加尝试和探索！
参考阅读
您阅读本篇文章共花了：
发表评论