├── .gitignore ├── README.md ├── app ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── zj │ │ └── composeshimmer │ │ └── ExampleInstrumentedTest.kt │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── zj │ │ │ └── composeshimmer │ │ │ ├── ImageLoadingSampleUtils.kt │ │ │ ├── ListItems.kt │ │ │ ├── MainActivity.kt │ │ │ ├── ShimmerSampleActivity.kt │ │ │ └── ui │ │ │ └── theme │ │ │ ├── Color.kt │ │ │ ├── Shape.kt │ │ │ ├── Theme.kt │ │ │ └── Type.kt │ └── res │ │ ├── drawable-v24 │ │ └── ic_launcher_foreground.xml │ │ ├── drawable │ │ └── ic_launcher_background.xml │ │ ├── mipmap-anydpi-v26 │ │ ├── ic_launcher.xml │ │ └── ic_launcher_round.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── values-night │ │ └── themes.xml │ │ └── values │ │ ├── colors.xml │ │ ├── strings.xml │ │ └── themes.xml │ └── test │ └── java │ └── com │ └── zj │ └── composeshimmer │ └── ExampleUnitTest.kt ├── build.gradle ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── publish-mavencentral.gradle ├── settings.gradle └── shimmer ├── .gitignore ├── build.gradle ├── consumer-rules.pro ├── proguard-rules.pro └── src ├── androidTest └── java │ └── com │ └── zj │ └── shimmer │ └── ExampleInstrumentedTest.kt ├── main ├── AndroidManifest.xml └── java │ └── com │ └── zj │ └── shimmer │ ├── Shimmer.kt │ ├── ShimmerConfig.kt │ └── ShimmerDirection.kt └── test └── java └── com └── zj └── shimmer └── ExampleUnitTest.kt /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/caches 5 | /.idea/libraries 6 | /.idea/modules.xml 7 | /.idea/workspace.xml 8 | /.idea/navEditor.xml 9 | /.idea/assetWizardSettings.xml 10 | .DS_Store 11 | /build 12 | /captures 13 | .externalNativeBuild 14 | .cxx 15 | local.properties 16 | /.idea 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 前言 2 | 骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。 3 | 骨架屏加载中效果，比起传统的加载中效果可以提供更多信息，用户体验更好，因此也变得越来越流行 4 | 本文主要介绍如何使用`Compose`实现一个简单易用的骨架屏效果 5 | 6 | ## 效果图 7 | 首先看下最终的效果图 8 | 9 | ![](https://raw.githubusercontents.com/shenzhen2017/resource/main/2021/september/p1.gif) 10 | ![](https://raw.githubusercontents.com/shenzhen2017/resource/main/2021/september/p2.gif) 11 | 12 | ## 特性 13 | 1. 简单易用，可复用页面`UI`,不需要针对骨架屏定制`UI` 14 | 2. 支持设置骨架屏是否显示，一般结合加载状态使用 15 | 3. 支持设置骨架屏背景与高亮颜色 16 | 4. 支持设置骨架屏高度部分宽度，渐变部分宽度 17 | 5. 支持设置骨架屏动画的角度与方向 18 | 6. 支持设置骨架屏动画的时间与两次动画间隔 19 | 20 | ## 使用 21 | ### 接入 22 | 第 1 步:在工程的`build.gradle`中添加： 23 | ```groovy 24 | allprojects { 25 | repositories { 26 | ... 27 | mavenCentral() 28 | } 29 | } 30 | ``` 31 | 32 | 第2步：在应用的`build.gradle`中添加： 33 | ```groovy 34 | dependencies { 35 | implementation 'io.github.shenzhen2017:shimmer:1.0.0' 36 | } 37 | ``` 38 | 39 | ### 简单使用 40 | ```kotlin 41 | @Composable 42 | fun ShimmerSample() { 43 | var loading: Boolean by remember { 44 | mutableStateOf(true) 45 | } 46 | Column( 47 | modifier = Modifier 48 | .fillMaxWidth() 49 | .shimmer(loading,config = ShimmerConfig()) 50 | ) { 51 | repeat(3) { 52 | PlaceHolderItem() 53 | Spacer(modifier = Modifier.height(10.dp)) 54 | } 55 | } 56 | } 57 | ``` 58 | 如上所示: 59 | 1. 只需要在`Column`的`Modifier`中加上`shimmer`，`Column`下的所有组件即可实现骨架屏效果 60 | 2. 可通过`loading`参数，控制骨架屏效果是否显示 61 | 3. 如果需要定制骨架屏动画效果，也可通过一些参数配置 62 | 63 | 具体主要有以下这些参数 64 | ```kotlin 65 | data class ShimmerConfig( 66 | // 未高亮部分颜色 67 | val contentColor: Color = Color.LightGray.copy(alpha = 0.3f), 68 | // 高亮部分颜色 69 | val higLightColor: Color = Color.LightGray.copy(alpha = 0.9f), 70 | // 渐变部分宽度 71 | @FloatRange(from = 0.0, to = 1.0) 72 | val dropOff: Float = 0.5f, 73 | // 高亮部分宽度 74 | @FloatRange(from = 0.0, to = 1.0) 75 | val intensity: Float = 0.2f, 76 | //骨架屏动画方向 77 | val direction: ShimmerDirection = ShimmerDirection.LeftToRight, 78 | //动画旋转角度 79 | val angle: Float = 20f, 80 | //动画时长 81 | val duration: Float = 1000f, 82 | //两次动画间隔 83 | val delay: Float = 200f 84 | ) 85 | ``` 86 | 87 | ## 主要原理 88 | ### 通过图像混合模式复用页面`UI` 89 | 如果我们要实现骨架屏效果，首先想到的是需要按照页面的结构再写一套`UI`，然后在加载中的时候，显示这套`UI`，否则隐藏 90 | 一般的加载中效果都是这样实现的，但这样会带来一个问题，不同的页面结构不同，那我们岂不是要一个页面就重写一套`UI`?这显然是不可接受的 91 | 我们可以想到，页面的结构其实我们已经写过一遍了，如果我们能复用我们写的页面结构不就好了吗？ 92 | 93 | 我们可以通过图像混合模式来实现这一点 94 | 95 | 图像混合模式定义的是，当两个图像合成时，图像最终的展示方式。在`Androd`中，有相应的`API`接口来支持图像混合模式，即`Xfermode`. 96 | 图像混合模式主要有以下16种,以下这张图片从一定程度上形象地说明了图像混合的作用，两个图形一圆一方通过一定的计算产生不同的组合效果，具体如下 97 | ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/10/24/16dfbb120666a993~tplv-t2oaga2asx-watermark.awebp) 98 | 我们介绍几个常用的,其它的感兴趣的同学可自行查阅 99 | 100 | - `SRC_IN`:只在源图像和目标图像相交的地方绘制【源图像】 101 | - `DST_IN`:只在源图像和目标图像相交的地方绘制【目标图像】，绘制效果受到源图像对应地方透明度影响 102 | - `SRC_OUT`:只在源图像和目标图像不相交的地方绘制【源图像】，相交的地方根据目标图像的对应地方的`alpha`进行过滤，目标图像完全不透明则完全过滤，完全透明则不过滤 103 | - `DST_OUT`:只在源图像和目标图像不相交的地方绘制【目标图像】，在相交的地方根据源图像的`alpha`进行过滤，源图像完全不透明则完全过滤，完全透明则不过滤 104 | 105 | 如果我们把页面的`UI`结构作为目标图像，骨架屏效果作为源图像，然后使用`SRC_IN`混合模式 106 | 就可以实现只在页面的结构上显示骨架屏，在空白部分不显示，这样就可以避免重复写`UI`了 107 | 108 | ### 通过平移实现动画效果 109 | 上面我们已经实现了在页面结构上显示骨架屏，但是骨架屏效果还有一个动画效果 110 | 其实也很简单，给骨架屏设置一个渐变效果，然后做一个平移动画，然后看起来就是现在的骨架屏闪光动画了 111 | ```kotlin 112 | fun Modifier.shimmer(): Modifier = composed { 113 | var progress: Float by remember { mutableStateOf(0f) } 114 | val infiniteTransition = rememberInfiniteTransition() 115 | progress = infiniteTransition.animateFloat().value // 动画效果，计算百分比 116 | ShimmerModifier(visible = visible, progress = progress, config = config) 117 | } 118 | 119 | internal class ShimmerModifier(progress:Float) : DrawModifier, LayoutModifier { 120 | private val paint = Paint().apply { 121 | blendMode = BlendMode.SrcIn //设置混合模式 122 | shader = LinearGradientShader(Offset(0f, 0f),toOffset,colors,colorStops)//设置渐变色 123 | } 124 | 125 | override fun ContentDrawScope.draw() { 126 | drawContent() 127 | val (dx, dy) = getOffset(progress) //根据progress，设置平移的位置 128 | paint.shader?.postTranslate(dx, dy) // 平移操作 129 | it.drawRect(Rect(0f, 0f, size.width, size.height), paint = paint)//绘制骨架屏效果 130 | } 131 | } 132 | ``` 133 | 如上所示，主要是几步： 134 | 1. 启动动画，获得当前进度`progress`，并根据`progress`获得当前平移的位置 135 | 2. 设置骨架屏的背景渐变颜色与混合模式 136 | 3. 绘制骨架屏效果 137 | 138 | ### 自定义骨架屏效果 139 | 上面介绍了我们提供了一些参数，可以自定义骨架屏的效果，其它参数都比较好理解，主要是以下两个参数有点难理解 140 | 1. `dropOff`：渐变部分宽度 141 | 2. `intensity`: 高亮部分宽度 142 | 143 | 我们知道，可以通过`contentColor`自定义普通部分颜色,`higLightColor`自定义高亮部分颜色 144 | 但是这两种颜色是如何分布的呢？渐变的比例是怎样的呢？可以看下下面的代码： 145 | ```kotlin 146 | private val paint = Paint().apply { 147 | shader = LinearGradientShader(Offset(0f, 0f),toOffset,colors,colorStops)//设置渐变色 148 | } 149 | 150 | private val colors = listOf( 151 | config.contentColor, 152 | config.higLightColor, 153 | config.higLightColor, 154 | config.contentColor 155 | ) 156 | 157 | private val colorStops: List = listOf( 158 | ((1f - intensity - dropOff) / 2f).coerceIn(0f, 1f), 159 | ((1f - intensity - 0.001f) / 2f).coerceIn(0f, 1f), 160 | ((1f + intensity + 0.001f) / 2f).coerceIn(0f, 1f), 161 | ((1f + intensity + dropOff) / 2f).coerceIn(0f, 1f) 162 | ) 163 | ``` 164 | 可以看出，我们的颜色渐变有以下特点： 165 | 1. 渐变颜色分布为：`contentColor`->`higLightColor`->`higLightColor`->`contentColor` 166 | 2. `LinearGradientShader`使用`colors`定义颜色,`colorStops`定义颜色渐变的分布,`colorStops`由`intensity`与`dropoff`计算得来 167 | 3. `intensity`决定了高亮部分的宽度，即`intensity`越大，高亮部分越大 168 | 4. `dropOff`决定了渐变部分的宽度，即`dropOff`越大，渐变部分越大 169 | 170 | ## 总结 171 | ### 特别鸣谢 172 | 在实现`Compose`版本骨架屏的过程中，主要借鉴了以下开源框架的思想，有兴趣的同学也可以了解下 173 | [Facebook开源的shimmer-android](https://github.com/facebook/shimmer-android) 174 | [Habib Kazemi开源的compose-shimmer](https://github.com/kazemihabib/compose-shimmer) 175 | 176 | ### 项目地址 177 | [简单易用的Compose版骨架屏](https://github.com/shenzhen2017/ComposeShimmer) 178 | 开源不易，如果项目对你有所帮助，欢迎点赞,`Star`,收藏~ -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | plugins { 2 | id 'com.android.application' 3 | id 'kotlin-android' 4 | } 5 | 6 | android { 7 | compileSdk 31 8 | 9 | defaultConfig { 10 | applicationId "com.zj.composeshimmer" 11 | minSdk 21 12 | targetSdk 31 13 | versionCode 1 14 | versionName "1.0" 15 | 16 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 17 | vectorDrawables { 18 | useSupportLibrary true 19 | } 20 | } 21 | 22 | buildTypes { 23 | release { 24 | minifyEnabled false 25 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' 26 | } 27 | } 28 | compileOptions { 29 | sourceCompatibility JavaVersion.VERSION_1_8 30 | targetCompatibility JavaVersion.VERSION_1_8 31 | } 32 | kotlinOptions { 33 | jvmTarget = '1.8' 34 | useIR = true 35 | } 36 | buildFeatures { 37 | compose true 38 | } 39 | composeOptions { 40 | kotlinCompilerExtensionVersion compose_version 41 | kotlinCompilerVersion kotlin_version 42 | } 43 | packagingOptions { 44 | resources { 45 | excludes += '/META-INF/{AL2.0,LGPL2.1}' 46 | } 47 | } 48 | } 49 | 50 | dependencies { 51 | implementation 'androidx.core:core-ktx:1.6.0' 52 | implementation 'androidx.appcompat:appcompat:1.3.1' 53 | implementation 'com.google.android.material:material:1.4.0' 54 | implementation "androidx.compose.ui:ui:$compose_version" 55 | implementation "androidx.compose.material:material:$compose_version" 56 | implementation "androidx.compose.ui:ui-tooling-preview:$compose_version" 57 | implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1' 58 | implementation 'androidx.activity:activity-compose:1.3.1' 59 | implementation "com.google.accompanist:accompanist-placeholder-material:0.17.0" 60 | implementation "androidx.compose.ui:ui-tooling:1.0.1" 61 | implementation "com.google.accompanist:accompanist-insets:0.17.0" 62 | implementation "com.google.accompanist:accompanist-systemuicontroller:0.17.0" 63 | implementation "com.google.accompanist:accompanist-swiperefresh:0.17.0" 64 | implementation "androidx.compose.material:material-icons-extended:$compose_version" 65 | implementation "io.coil-kt:coil-compose:1.3.0" 66 | if (useLocal == "true") { 67 | implementation project(path: ':shimmer') 68 | } else { 69 | implementation 'io.github.shenzhen2017:shimmer:1.0.0' 70 | } 71 | } -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /app/src/androidTest/java/com/zj/composeshimmer/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.zj.composeshimmer 2 | 3 | import androidx.test.platform.app.InstrumentationRegistry 4 | import androidx.test.ext.junit.runners.AndroidJUnit4 5 | 6 | import org.junit.Test 7 | import org.junit.runner.RunWith 8 | 9 | import org.junit.Assert.* 10 | 11 | /** 12 | * Instrumented test, which will execute on an Android device. 13 | * 14 | * See [testing documentation](http://d.android.com/tools/testing). 15 | */ 16 | @RunWith(AndroidJUnit4::class) 17 | class ExampleInstrumentedTest { 18 | @Test 19 | fun useAppContext() { 20 | // Context of the app under test. 21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext 22 | assertEquals("com.zj.composeshimmer", appContext.packageName) 23 | } 24 | } -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /app/src/main/java/com/zj/composeshimmer/ImageLoadingSampleUtils.kt: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2020 The Android Open Source Project 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * https://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | package com.zj.composeshimmer 18 | 19 | private val rangeForRandom = (0..100000) 20 | 21 | fun randomSampleImageUrl( 22 | seed: Int = rangeForRandom.random(), 23 | width: Int = 300, 24 | height: Int = width, 25 | ): String { 26 | return "https://picsum.photos/seed/$seed/$width/$height" 27 | } 28 | -------------------------------------------------------------------------------- /app/src/main/java/com/zj/composeshimmer/ListItems.kt: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2020 The Android Open Source Project 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * https://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | package com.zj.composeshimmer 18 | 19 | import androidx.compose.foundation.Image 20 | import androidx.compose.foundation.layout.Row 21 | import androidx.compose.foundation.layout.Spacer 22 | import androidx.compose.foundation.layout.padding 23 | import androidx.compose.foundation.layout.size 24 | import androidx.compose.foundation.layout.width 25 | import androidx.compose.foundation.shape.RoundedCornerShape 26 | import androidx.compose.material.MaterialTheme 27 | import androidx.compose.material.Text 28 | import androidx.compose.runtime.Composable 29 | import androidx.compose.ui.Alignment 30 | import androidx.compose.ui.Modifier 31 | import androidx.compose.ui.draw.clip 32 | import androidx.compose.ui.graphics.painter.Painter 33 | import androidx.compose.ui.unit.dp 34 | 35 | /** 36 | * Simple list item row which displays an image and text. 37 | */ 38 | @Composable 39 | fun ListItem( 40 | painter: Painter, 41 | text: String, 42 | modifier: Modifier = Modifier, 43 | childModifier: Modifier = Modifier, 44 | ) { 45 | Row(modifier.padding(horizontal = 16.dp, vertical = 8.dp)) { 46 | Image( 47 | painter = painter, 48 | contentDescription = null, 49 | modifier = childModifier 50 | .size(64.dp) 51 | .clip(RoundedCornerShape(4.dp)), 52 | ) 53 | 54 | Spacer(Modifier.width(16.dp)) 55 | 56 | Text( 57 | text = text, 58 | style = MaterialTheme.typography.subtitle2, 59 | modifier = childModifier 60 | .weight(1f) 61 | .align(Alignment.CenterVertically) 62 | ) 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /app/src/main/java/com/zj/composeshimmer/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.zj.composeshimmer 2 | 3 | import android.os.Bundle 4 | import androidx.activity.ComponentActivity 5 | import androidx.activity.compose.setContent 6 | import androidx.compose.foundation.background 7 | import androidx.compose.foundation.clickable 8 | import androidx.compose.foundation.layout.* 9 | import androidx.compose.foundation.lazy.LazyColumn 10 | import androidx.compose.foundation.shape.RoundedCornerShape 11 | import androidx.compose.material.MaterialTheme 12 | import androidx.compose.material.Slider 13 | import androidx.compose.material.Surface 14 | import androidx.compose.material.Text 15 | import androidx.compose.runtime.* 16 | import androidx.compose.ui.Alignment 17 | import androidx.compose.ui.Modifier 18 | import androidx.compose.ui.draw.clip 19 | import androidx.compose.ui.graphics.Color 20 | import androidx.compose.ui.platform.LocalContext 21 | import androidx.compose.ui.text.style.TextAlign 22 | import androidx.compose.ui.unit.dp 23 | import androidx.core.view.WindowCompat 24 | import com.google.accompanist.insets.ProvideWindowInsets 25 | import com.google.accompanist.insets.statusBarsHeight 26 | import com.google.accompanist.systemuicontroller.rememberSystemUiController 27 | import com.zj.composeshimmer.ui.theme.ComposeShimmerTheme 28 | import com.zj.shimmer.ShimmerDirection 29 | import com.zj.shimmer.shimmer 30 | 31 | class MainActivity : ComponentActivity() { 32 | override fun onCreate(savedInstanceState: Bundle?) { 33 | super.onCreate(savedInstanceState) 34 | WindowCompat.setDecorFitsSystemWindows(window, false) 35 | setContent { 36 | ComposeShimmerTheme { 37 | ProvideWindowInsets { 38 | rememberSystemUiController().setStatusBarColor( 39 | Color.Transparent, 40 | darkIcons = true 41 | ) 42 | Surface(color = MaterialTheme.colors.background) { 43 | HomeScreen() 44 | } 45 | } 46 | } 47 | } 48 | } 49 | } 50 | 51 | class ShimmerModel { 52 | var contentColor: Color by mutableStateOf(Color.LightGray.copy(alpha = 0.3f)) 53 | 54 | var highlightColor: Color by mutableStateOf(Color.LightGray.copy(alpha = 0.8f)) 55 | 56 | var dropOff: Float by mutableStateOf(0.5f) 57 | 58 | var intensity: Float by mutableStateOf(0.2f) 59 | 60 | var angle: Float by mutableStateOf(20f) 61 | } 62 | 63 | @Composable 64 | fun HomeScreen() { 65 | var loading: Boolean by remember { 66 | mutableStateOf(true) 67 | } 68 | val model by remember { mutableStateOf(ShimmerModel()) } 69 | LazyColumn(modifier = Modifier.padding(20.dp)) { 70 | item { 71 | Spacer( 72 | modifier = Modifier.statusBarsHeight() 73 | ) 74 | } 75 | item { 76 | Column( 77 | modifier = Modifier 78 | .fillMaxWidth() 79 | .shimmer( 80 | loading, config = com.zj.shimmer.ShimmerConfig( 81 | contentColor = model.contentColor, 82 | higLightColor = model.highlightColor, 83 | dropOff = model.dropOff, 84 | intensity = model.intensity, 85 | angle = model.angle, 86 | direction = ShimmerDirection.LeftToRight 87 | ) 88 | ) 89 | .clickable { 90 | loading = !loading 91 | } 92 | ) { 93 | repeat(3) { 94 | PlaceHolderItem() 95 | Spacer(modifier = Modifier.height(10.dp)) 96 | } 97 | } 98 | } 99 | item { 100 | ConfigSlide(model = model) 101 | } 102 | item { 103 | ConfigBtn(model = model) 104 | } 105 | } 106 | 107 | } 108 | 109 | @Composable 110 | fun PlaceHolderItem() { 111 | Row(modifier = Modifier.fillMaxWidth()) { 112 | Box( 113 | modifier = Modifier 114 | .size(110.dp) 115 | .background(color = Color.LightGray) 116 | ) 117 | Spacer(modifier = Modifier.width(16.dp)) 118 | Column(modifier = Modifier.fillMaxWidth()) { 119 | repeat(3) { 120 | Spacer( 121 | modifier = Modifier 122 | .fillMaxWidth() 123 | .height(20.dp) 124 | .background(color = Color.LightGray) 125 | ) 126 | Spacer(modifier = Modifier.height(10.dp)) 127 | } 128 | Text( 129 | text = "", modifier = Modifier 130 | .width(200.dp) 131 | .height(20.dp) 132 | .background(Color.White) 133 | ) 134 | } 135 | } 136 | } 137 | 138 | @Composable 139 | private fun ConfigBtn(model: ShimmerModel) { 140 | val context = LocalContext.current 141 | Column( 142 | horizontalAlignment = Alignment.CenterHorizontally, 143 | modifier = Modifier.fillMaxWidth() 144 | ) { 145 | Text( 146 | text = "修改高亮颜色", 147 | color = Color.White, 148 | style = MaterialTheme.typography.h5, 149 | textAlign = TextAlign.Center, 150 | modifier = Modifier 151 | .padding(16.dp) 152 | .width(200.dp) 153 | .wrapContentHeight() 154 | .clip(RoundedCornerShape(10.dp)) 155 | .background(Color.Blue) 156 | .padding(0.dp, 10.dp) 157 | .clickable { 158 | if (model.highlightColor != Color(0x4DFF0000)) { 159 | model.highlightColor = Color(0x4DFF0000) 160 | } else { 161 | model.highlightColor = Color.LightGray.copy(alpha = 0.8f) 162 | } 163 | }) 164 | Text( 165 | text = "查看更多示例", 166 | color = Color.White, 167 | style = MaterialTheme.typography.h5, 168 | textAlign = TextAlign.Center, 169 | modifier = Modifier 170 | .padding(16.dp) 171 | .width(200.dp) 172 | .wrapContentHeight() 173 | .clip(RoundedCornerShape(10.dp)) 174 | .background(Color.Blue) 175 | .padding(0.dp, 10.dp) 176 | .clickable { 177 | ShimmerSampleActivity.navigate(context) 178 | }) 179 | } 180 | } 181 | 182 | @Composable 183 | private fun ConfigSlide(model: ShimmerModel) { 184 | LabelSlider( 185 | label = "drop off", 186 | value = model.dropOff, 187 | onValueChange = model::dropOff::set, 188 | range = 0f..1f 189 | ) 190 | LabelSlider( 191 | label = "intensity", 192 | value = model.intensity, 193 | onValueChange = model::intensity::set, 194 | range = 0f..1f 195 | ) 196 | LabelSlider( 197 | label = "angle", 198 | value = model.angle, 199 | onValueChange = model::angle::set, 200 | range = 0f..90f 201 | ) 202 | } 203 | 204 | @Composable 205 | private fun LabelSlider( 206 | label: String, 207 | value: Float, 208 | onValueChange: (Float) -> Unit, 209 | range: ClosedFloatingPointRange 210 | ) { 211 | val formatValue = String.format("%.2f", value) 212 | Row(verticalAlignment = Alignment.CenterVertically) { 213 | Text("$label($formatValue)", modifier = Modifier.width(110.dp)) 214 | Slider(value = value, onValueChange = onValueChange, valueRange = range) 215 | } 216 | } -------------------------------------------------------------------------------- /app/src/main/java/com/zj/composeshimmer/ShimmerSampleActivity.kt: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 The Android Open Source Project 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * https://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | package com.zj.composeshimmer 18 | 19 | import android.content.Context 20 | import android.content.Intent 21 | import android.os.Bundle 22 | import androidx.activity.ComponentActivity 23 | import androidx.activity.compose.setContent 24 | import androidx.compose.foundation.background 25 | import androidx.compose.foundation.layout.* 26 | import androidx.compose.foundation.lazy.LazyColumn 27 | import androidx.compose.material.MaterialTheme 28 | import androidx.compose.material.Scaffold 29 | import androidx.compose.material.Text 30 | import androidx.compose.material.TopAppBar 31 | import androidx.compose.material.icons.Icons 32 | import androidx.compose.material.icons.filled.ArrowDownward 33 | import androidx.compose.runtime.* 34 | import androidx.compose.ui.Modifier 35 | import androidx.compose.ui.graphics.Color 36 | import androidx.compose.ui.graphics.vector.rememberVectorPainter 37 | import androidx.compose.ui.unit.dp 38 | import androidx.core.view.WindowCompat 39 | import coil.compose.rememberImagePainter 40 | import com.google.accompanist.insets.ProvideWindowInsets 41 | import com.google.accompanist.insets.statusBarsHeight 42 | import com.google.accompanist.placeholder.material.placeholder 43 | import com.google.accompanist.swiperefresh.SwipeRefresh 44 | import com.google.accompanist.swiperefresh.rememberSwipeRefreshState 45 | import com.google.accompanist.systemuicontroller.rememberSystemUiController 46 | import com.zj.composeshimmer.ui.theme.ComposeShimmerTheme 47 | import com.zj.shimmer.shimmer 48 | import kotlinx.coroutines.delay 49 | 50 | class ShimmerSampleActivity : ComponentActivity() { 51 | companion object { 52 | fun navigate(context: Context) { 53 | context.startActivity(Intent(context, ShimmerSampleActivity::class.java)) 54 | } 55 | } 56 | 57 | override fun onCreate(savedInstanceState: Bundle?) { 58 | super.onCreate(savedInstanceState) 59 | WindowCompat.setDecorFitsSystemWindows(window, false) 60 | setContent { 61 | ComposeShimmerTheme { 62 | ProvideWindowInsets { 63 | rememberSystemUiController().setStatusBarColor( 64 | Color.Transparent, 65 | darkIcons = true 66 | ) 67 | Sample() 68 | } 69 | } 70 | } 71 | } 72 | } 73 | 74 | @Composable 75 | private fun Sample() { 76 | Scaffold( 77 | topBar = { 78 | Column() { 79 | Spacer(modifier = Modifier.statusBarsHeight()) 80 | TopAppBar( 81 | title = { Text(text = "Shimmer Example") }, 82 | backgroundColor = MaterialTheme.colors.surface, 83 | elevation = 0.dp 84 | ) 85 | Spacer(modifier = Modifier.fillMaxWidth().height(0.5.dp).background(Color.LightGray)) 86 | } 87 | }, 88 | modifier = Modifier.fillMaxSize() 89 | ) { 90 | // Simulate a fake 2-second 'load'. Ideally this 'refreshing' value would 91 | // come from a ViewModel or similar 92 | var refreshing by remember { mutableStateOf(false) } 93 | LaunchedEffect(refreshing) { 94 | if (refreshing) { 95 | delay(4000) 96 | refreshing = false 97 | } 98 | } 99 | 100 | SwipeRefresh( 101 | state = rememberSwipeRefreshState(isRefreshing = refreshing), 102 | onRefresh = { refreshing = true }, 103 | ) { 104 | LazyColumn { 105 | if (refreshing.not()) { 106 | item { 107 | ListItem( 108 | painter = rememberVectorPainter(Icons.Default.ArrowDownward), 109 | text = "Pull down" 110 | ) 111 | } 112 | } 113 | items(30) { index -> 114 | ListItem( 115 | painter = rememberImagePainter(randomSampleImageUrl(index)), 116 | text = "Text", 117 | modifier = Modifier.shimmer(refreshing), 118 | childModifier = Modifier.placeholder( 119 | visible = refreshing 120 | ) 121 | ) 122 | } 123 | } 124 | } 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /app/src/main/java/com/zj/composeshimmer/ui/theme/Color.kt: -------------------------------------------------------------------------------- 1 | package com.zj.composeshimmer.ui.theme 2 | 3 | import androidx.compose.ui.graphics.Color 4 | 5 | val Purple200 = Color(0xFFBB86FC) 6 | val Purple500 = Color(0xFF6200EE) 7 | val Purple700 = Color(0xFF3700B3) 8 | val Teal200 = Color(0xFF03DAC5) -------------------------------------------------------------------------------- /app/src/main/java/com/zj/composeshimmer/ui/theme/Shape.kt: -------------------------------------------------------------------------------- 1 | package com.zj.composeshimmer.ui.theme 2 | 3 | import androidx.compose.foundation.shape.RoundedCornerShape 4 | import androidx.compose.material.Shapes 5 | import androidx.compose.ui.unit.dp 6 | 7 | val Shapes = Shapes( 8 | small = RoundedCornerShape(4.dp), 9 | medium = RoundedCornerShape(4.dp), 10 | large = RoundedCornerShape(0.dp) 11 | ) -------------------------------------------------------------------------------- /app/src/main/java/com/zj/composeshimmer/ui/theme/Theme.kt: -------------------------------------------------------------------------------- 1 | package com.zj.composeshimmer.ui.theme 2 | 3 | import androidx.compose.foundation.isSystemInDarkTheme 4 | import androidx.compose.material.MaterialTheme 5 | import androidx.compose.material.darkColors 6 | import androidx.compose.material.lightColors 7 | import androidx.compose.runtime.Composable 8 | 9 | private val DarkColorPalette = darkColors( 10 | primary = Purple200, 11 | primaryVariant = Purple700, 12 | secondary = Teal200 13 | ) 14 | 15 | private val LightColorPalette = lightColors( 16 | primary = Purple500, 17 | primaryVariant = Purple700, 18 | secondary = Teal200 19 | 20 | /* Other default colors to override 21 | background = Color.White, 22 | surface = Color.White, 23 | onPrimary = Color.White, 24 | onSecondary = Color.Black, 25 | onBackground = Color.Black, 26 | onSurface = Color.Black, 27 | */ 28 | ) 29 | 30 | @Composable 31 | fun ComposeShimmerTheme( 32 | darkTheme: Boolean = isSystemInDarkTheme(), 33 | content: @Composable() () -> Unit 34 | ) { 35 | val colors = if (darkTheme) { 36 | DarkColorPalette 37 | } else { 38 | LightColorPalette 39 | } 40 | 41 | MaterialTheme( 42 | colors = colors, 43 | typography = Typography, 44 | shapes = Shapes, 45 | content = content 46 | ) 47 | } -------------------------------------------------------------------------------- /app/src/main/java/com/zj/composeshimmer/ui/theme/Type.kt: -------------------------------------------------------------------------------- 1 | package com.zj.composeshimmer.ui.theme 2 | 3 | import androidx.compose.material.Typography 4 | import androidx.compose.ui.text.TextStyle 5 | import androidx.compose.ui.text.font.FontFamily 6 | import androidx.compose.ui.text.font.FontWeight 7 | import androidx.compose.ui.unit.sp 8 | 9 | // Set of Material typography styles to start with 10 | val Typography = Typography( 11 | body1 = TextStyle( 12 | fontFamily = FontFamily.Default, 13 | fontWeight = FontWeight.Normal, 14 | fontSize = 16.sp 15 | ) 16 | /* Other default text styles to override 17 | button = TextStyle( 18 | fontFamily = FontFamily.Default, 19 | fontWeight = FontWeight.W500, 20 | fontSize = 14.sp 21 | ), 22 | caption = TextStyle( 23 | fontFamily = FontFamily.Default, 24 | fontWeight = FontWeight.Normal, 25 | fontSize = 12.sp 26 | ) 27 | */ 28 | ) -------------------------------------------------------------------------------- /app/src/main/res/drawable-v24/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 15 | 18 | 21 | 22 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoJiang/ComposeShimmer/38aa9b243cd32ec3c72e79214e4cc976d6ee2434/app/src/main/res/mipmap-hdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoJiang/ComposeShimmer/38aa9b243cd32ec3c72e79214e4cc976d6ee2434/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoJiang/ComposeShimmer/38aa9b243cd32ec3c72e79214e4cc976d6ee2434/app/src/main/res/mipmap-mdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoJiang/ComposeShimmer/38aa9b243cd32ec3c72e79214e4cc976d6ee2434/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoJiang/ComposeShimmer/38aa9b243cd32ec3c72e79214e4cc976d6ee2434/app/src/main/res/mipmap-xhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoJiang/ComposeShimmer/38aa9b243cd32ec3c72e79214e4cc976d6ee2434/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoJiang/ComposeShimmer/38aa9b243cd32ec3c72e79214e4cc976d6ee2434/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoJiang/ComposeShimmer/38aa9b243cd32ec3c72e79214e4cc976d6ee2434/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoJiang/ComposeShimmer/38aa9b243cd32ec3c72e79214e4cc976d6ee2434/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoJiang/ComposeShimmer/38aa9b243cd32ec3c72e79214e4cc976d6ee2434/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/values-night/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFBB86FC 4 | #FF6200EE 5 | #FF3700B3 6 | #FF03DAC5 7 | #FF018786 8 | #FF000000 9 | #FFFFFFFF 10 | -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ComposeShimmer 3 | -------------------------------------------------------------------------------- /app/src/main/res/values/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | 17 | 21 | 22 |