Compose-BeforeAfter 开源项目教程

Compose-BeforeAfter 开源项目教程

项目介绍

Compose-BeforeAfter 是一个用于在 Jetpack Compose 中展示和比较两张图片或 Composables 的开源库。它支持通过触摸和缩放手势来调整比较进度，并提供了丰富的自定义选项。该库主要用于展示图片或界面元素在不同状态下的变化，适用于前后对比、版本更新展示等场景。

项目快速启动

1. 添加 JitPack 仓库

首先，在你的根目录下的 build.gradle 文件中添加 JitPack 仓库：

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

2. 添加依赖

在你的模块级 build.gradle 文件中添加依赖：

dependencies {
    implementation 'com.github.SmartToolFactory:Compose-BeforeAfter:<version>'
}

请将 <version> 替换为最新的版本号。

3. 使用 BeforeAfterImage

在你的 Composable 中使用 BeforeAfterImage：

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ImageBitmap
import com.smarttoolfactory.compose.beforeafter.BeforeAfterImage

@Composable
fun BeforeAfterExample() {
    val beforeImage = // 加载你的 before 图片
    val afterImage = // 加载你的 after 图片

    BeforeAfterImage(
        modifier = Modifier,
        beforeImage = beforeImage,
        afterImage = afterImage
    )
}

应用案例和最佳实践

案例1：前后对比图片展示

假设你有一个应用，需要展示用户在不同时间点的照片变化。你可以使用 BeforeAfterImage 来直观地展示这些变化：

@Composable
fun PhotoComparison() {
    val beforeImage = // 加载 before 图片
    val afterImage = // 加载 after 图片

    BeforeAfterImage(
        modifier = Modifier.fillMaxSize(),
        beforeImage = beforeImage,
        afterImage = afterImage,
        enableProgressWithTouch = true,
        enableZoom = true
    )
}

案例2：界面元素变化展示

假设你需要展示应用界面在不同版本中的变化，可以使用 BeforeAfterImage 来展示这些变化：

@Composable
fun UIComparison() {
    val beforeImage = // 加载 before 界面截图
    val afterImage = // 加载 after 界面截图

    BeforeAfterImage(
        modifier = Modifier.fillMaxSize(),
        beforeImage = beforeImage,
        afterImage = afterImage,
        enableProgressWithTouch = true,
        enableZoom = true
    )
}

典型生态项目

Compose-BeforeAfter 可以与其他 Jetpack Compose 库和工具结合使用，以增强其功能和应用场景。以下是一些典型的生态项目：

1. Accompanist: 一个提供各种 Compose 扩展库的项目，可以与 Compose-BeforeAfter 结合使用，提供更多的图片加载和处理功能。
2. Coil: 一个用于 Compose 的图片加载库，可以与 Compose-BeforeAfter 结合使用，简化图片加载过程。
3. Landscapist: 另一个用于 Compose 的图片加载库，支持 Glide 和 Coil，可以与 Compose-BeforeAfter 结合使用，提供更丰富的图片加载选项。

通过结合这些生态项目，你可以进一步扩展 Compose-BeforeAfter 的功能，实现更复杂和多样化的应用场景。