Compose骨架屏：让你的应用加载更快，体验更流畅

Android

2023-12-10 03:35:26

使用 Compose 骨架屏提升 Android 应用程序的用户体验

在当今快速发展的数字时代，用户耐心有限，他们期待应用程序快速加载并提供顺畅的体验。骨架屏是一种高效的技术，可以在应用程序加载时维持用户参与度，同时为他们提供一个清晰的结构。

什么是骨架屏？

骨架屏是页面或部分页面的一个占位符，在实际内容加载之前显示，它通常以灰色区块呈现，大致勾勒出内容的形状和大小。就像建筑工地的脚手架一样，骨架屏为用户提供了一个基础框架，让他们在等待内容加载时有一个清晰的指引。

为什么使用 Compose 骨架屏？

Compose 是一款用于构建现代 Android 应用程序的声明式 UI 框架，它提供以下优势：

简洁的代码： Compose 采用声明式语法，使代码更加简洁易懂，维护起来更方便。
高性能： Compose 利用高效的底层渲染引擎，确保流畅的性能。
可组合性： Compose 组件可以轻松组合，构建出复杂的 UI。

如何使用 Compose 实现骨架屏？

使用 Compose 实现骨架屏非常简单，你可以使用 Skeleton 组件，这是一个包含一组 Shape 的 ConstraintLayout。这些 Shape 可以配置为创建各种骨架形状，例如矩形、圆形和文本占位符。

以下是如何实现一个简单的骨架屏的代码示例：

@Composable
fun SimpleSkeleton() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val skeletonColor = Color.Gray

        val (image, title, description) = createRefs()

        Skeleton(
            modifier = Modifier
                .constrainAs(image) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    width = Dimension.percent(1f)
                    height = Dimension.percent(0.5f)
                }
                .background(skeletonColor, shape = RoundedCornerShape(8.dp)),
        )

        Skeleton(
            modifier = Modifier
                .constrainAs(title) {
                    top.linkTo(image.bottom, margin = 8.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    width = Dimension.percent(1f)
                    height = Dimension.percent(0.2f)
                }
                .background(skeletonColor, shape = RoundedCornerShape(8.dp)),
        )

        Skeleton(
            modifier = Modifier
                .constrainAs(description) {
                    top.linkTo(title.bottom, margin = 8.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    width = Dimension.percent(1f)
                    height = Dimension.percent(0.2f)
                }
                .background(skeletonColor, shape = RoundedCornerShape(8.dp)),
        )
    }
}