Jetpack Compose 怎样实现跑马灯效果（Marquee）

Marquee 效果也就是跑马灯效果，在使用传统的 XML 布局实现时，使用 TextView 可以很容易实现，当文字内容超过 View 的宽度时，设置不同的 ellipsize 会有不同的显示效果，设置 android:ellipsize="marquee" 等属性即可实现。使用 Jetpack Compose 怎样实现呢？

1. 使用 AndroidView 实现跑马灯效果

那使用 Jetpack Compose 怎样实现跑马灯效果呢，Jetpack Compose 的文档中并没有相关的介绍，Text 可组合函数的 overflow 属性只有 Clip Ellipsis Visible 三种可选。

这时我们首先想到的肯定是通过 AndroidView 在 Compose 中使用传统的 TextView，这是可行的，上图中 Android marquees: 部分就是这样实现的。

使用 AndroidView 实现跑马灯效果：

@Preview(showBackground = true)
@Composable
fun BasicMarqueeDemo() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = spacedBy(4.dp)
    ) {
        Text("Android marquees:", style = MaterialTheme.typography.titleMedium)
        AndroidMarqueeTextView("short", Modifier.fillMaxWidth())
        listOf(40.dp, 80.dp, 120.dp).forEach {
            AndroidMarqueeTextView("long text in short marquee", Modifier.width(it))
        }
        AndroidMarqueeWithClickableLink()
        Row {
            Text("Tap to focus: ")
            AndroidMarqueeTextView(
                "only animate when focused",
                Modifier.size(80.dp, 30.dp),
                initiallySelected = false,
                focusable = true
            )
        }
    }
}

@Composable
private fun AndroidMarqueeTextView(
    text: CharSequence,
    modifier: Modifier = Modifier,
    initiallySelected: Boolean = true,
    focusable: Boolean = false
) {
    var isFocused by remember { mutableStateOf(false) }
    AndroidView(
        modifier = modifier
            .border(if (isFocused) 4.dp else 1.dp, Color.Black)
            .onFocusChanged { isFocused = it.hasFocus },
        factory = {
            TextView(it).apply {
                ellipsize = TextUtils.TruncateAt.MARQUEE
                marqueeRepeatLimit = -1 // repeat forever
                // Enable clickable spans.
                movementMethod = LinkMovementMethod.getInstance()
                isSingleLine = true
                isSelected = initiallySelected
                isFocusableInTouchMode = focusable
            }
        },
        update = {
            it.text = text
        }
    )
}

2. 使用第三方库

也可以使用第三方库实现跑马灯效果，不过有更好的方法实现，这里就不多做介绍了。

3. 使用官方的实现方式

2022年12月14日，androidx 项目有新的提交：“Introduce marquee modifier.“

增加了一个 BasicMarquee.kt 通过 Modifier.basicMarquee 实现跑马灯效果，也就是说它不止可以用于文字，也可以用于其他可组合项，比如使用 basicMarquee 实现 Row 的跑马灯效果：

@Preview(showBackground = true)
@Composable
fun BasicMarqueeDemo() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = spacedBy(4.dp)
    ) {
        MarqueeRow()
        Text("Compose marquees:", style = MaterialTheme.typography.titleMedium)
        MarqueeText("short", Modifier.fillMaxWidth())
        listOf(40.dp, 80.dp, 120.dp).forEach {
            MarqueeText("long text in short marquee", Modifier.width(it))
        }
        MarqueeText(
            "backwards animation",
            Modifier.width(80.dp),
            velocity = -DefaultMarqueeVelocity
        )
        MarqueeWithClickable()
        Row {
            Text("Tap to focus: ")
            MarqueeText(
                "only animate when focused",
                Modifier.size(80.dp, 30.dp),
                animationMode = WhileFocused
            )
        }
    }
}

@Composable
fun MarqueeRow() {
    val uriHandler = LocalUriHandler.current
    Row(
        Modifier
            .fillMaxWidth()
            .border(1.dp, Color.Black)
            .basicMarquee(iterations = Int.MAX_VALUE),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Icon(
            modifier = Modifier.size(40.dp),
            imageVector = Icons.Default.Home,
            contentDescription = ""
        )
        Text(
            text = "Hello! ",
        )
        TextButton(onClick = { uriHandler.openUri("https://itmob.cn") }) {
            Text("ITmob.cn")
        }
        Text(" Click the link to open the ITmob.cn website for more infomation.")
    }
}

现在是 2022年12月29日，当前 compose fundation 的最新版本是 1.4.0-alpha03 还不包含这个提交，未来的版本应该会包含 basicMarquee。

如果我们现在就想使用它，也可以暂时直接将 BasicMarquee 的源码用于我们的项目中，正式版本发布后在替换它。

问题：

直接将 BasicMarquee 源码放入自己的项目中使用可能会编译不通过，会出现如下错误：

Inheritance from an interface with '@JvmDefault' members is only allowed with -Xjvm-default option

出现 @JvmDefault 错误，可以修改 Gradle 中的 Kotlin 选项，增加 "-Xjvm-default=all-compatibility" 选项。

// build.gradle
android {
    ...
    kotlinOptions {
        jvmTarget = '1.8'
        freeCompilerArgs += [
                "-Xjvm-default=all-compatibility",
        ]
    }
    ...
}