【开源项目分享】一个非常简单易用的Compose版骨架屏，快来看看！

Jetpack Compose是谷歌在2019Google i/o大会上发布的新的库，一个用于构建原生Android UI的现代工具包。他有强大的工具和直观的Kotlin API，简化并加速了Android上的UI开发。可以帮助开发者用更少更直观的代码创建View，有更强大的功能，还能提高开发速度。

今天要和大家分享的是一个简单易用的Compose版骨架屏，笔者觉得用起来挺棒，大家可以看看。希望对大家的学习和工作有所帮助。
（PS：开源地址在文末）

前言

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。
骨架屏加载中效果，比起传统的加载中效果可以提供更多信息，用户体验更好，因此也变得越来越流行
本文主要介绍如何使用Compose实现一个简单易用的骨架屏效果

效果图

首先看下最终的效果图

特性

• 简单易用，可复用页面UI,不需要针对骨架屏定制UI
• 支持设置骨架屏是否显示，一般结合加载状态使用
• 支持设置骨架屏背景与高亮颜色
• 支持设置骨架屏高度部分宽度，渐变部分宽度
• 支持设置骨架屏动画的角度与方向
• 支持设置骨架屏动画的时间与两次动画间隔

使用

接入

第 1 步:在工程的build.gradle中添加：

allprojects {
	repositories {
		...
		mavenCentral()
	}
}

第2步：在应用的build.gradle中添加：

dependencies {
        implementation 'io.github.shenzhen2017:shimmer:1.0.0'
}

简单使用

@Composable
fun ShimmerSample() {
    var loading: Boolean by remember {
        mutableStateOf(true)
    }
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .shimmer(loading,config = ShimmerConfig())
    ) {
        repeat(3) {
            PlaceHolderItem()
            Spacer(modifier = Modifier.height(10.dp))
        }
    }
}

如上所示:

• 只需要在Column的Modifier中加上shimmer，Column下的所有组件即可实现骨架屏效果
• 可通过loading参数，控制骨架屏效果是否显示
• 如果需要定制骨架屏动画效果，也可通过一些参数配置

具体主要有以下这些参数

data class ShimmerConfig(
    // 未高亮部分颜色
    val contentColor: Color = Color.LightGray.copy(alpha = 0.3f),
    //