Jetpack Compose 实战之仿微信UI -实现朋友圈图片预览（四）

前语

回顾下之前的内容，咱们已经完成了以下相关页内容，它们分别是：

Jetpack Compose 实战之仿微信UI -完成登陆页（一）

Jetpack Compose 实战之仿微信UI -完成首页（二）

Jetpack Compose 实战之仿微信UI -完成朋友圈（三）

在这一篇文章中，我将运用 Jetpack Compose 去完成微信朋友圈图片的预览。

功用拆分

微信朋友圈图片预览的功用首要包括：

（1）图片左右滑动

（2）页面指示器

（3）缩放

（4）双击扩大（然后再双击康复，反之）

（5）单击返回

功用完成

图片左右滑动

在完成首页的时分，咱们运用了 HorizontalPager 进行页面切换，所以咱们在这儿直接运用HorizontalPager作为图片左右切换的组件即可，完成的代码为：

HorizontalPager(
    count = images.size,
    state = pageState,
    contentPadding = PaddingValues(horizontal = 0.dp),
    modifier = Modifier.fillMaxSize()
) { page ->
    ImagePageItem()
}

页面指示器

HorizontalPager给咱们封装了一个指示器组件 HorizontalPagerIndicator，咱们直接运用就能完成咱们的作用，完成代码为：

HorizontalPagerIndicator(
    pagerState = pageState,
    activeColor = Color.White,              /*** 指示器选中的色彩 */
    inactiveColor = Color(0xff888888), /*** 指示器未选中的色彩 */
    indicatorHeight = 6.dp,                  /*** 指示器的高度 */
    indicatorWidth = 6.dp,                   /*** 指示器的宽度 */
    modifier = Modifier
        .align(Alignment.BottomCenter)
        .padding(60.dp)
)

到这儿，咱们就完成了图片的切换以及指示器部分了，看下作用

缩放

缩放完成的中心是监听到手势的动作，然后拿到缩放份额值，平移偏移量等数据，经过查找材料，我发现官方给咱们供给了Modifier的拓宽函数 transformable，咱们看下transformable这个拓宽函数的结构：

Modifier.transformable(
    state: TransformableState,
    lockRotationOnZoomPan: Boolean = false,
    enabled: Boolean = true
)

各特点的含义：

state： 监听手势改变

lockRotationOnZoomPan： 假如为true，则仅当在平移或缩放运动之前检测到旋转的接触倾斜时才答应旋转。否则，将检测到平移和缩放手势，但不会检测到旋转手势。假如为false，一旦达到接触斜率，将检测所有三个手势。

enabled： 是否启用手势缩放

所以，在这儿咱们经过state的监听就能够拿到缩放份额值，平移偏移量等数据，具体的代码为：

/*** 缩放份额 */
var scale by remember { mutableStateOf(1f) }
/*** 偏移量 */
var offset  by remember { mutableStateOf(Offset.Zero) }
/*** 监听手势改变 */
val state = rememberTransformableState(onTransformation = { zoomChange, offsetChange, rotationChange ->
    scale = (zoomChange * scale).coerceAtLeast(1f)
    scale = if (scale > 4f) {
        4f
    } else {
        scale
    }
    offset += offsetChange
})

其间 rotationChange 是旋转的改变，这儿咱们不需求，就不处理。4f 是咱们答应扩大的最大倍数，根据自己的需求自定义即可。

到这儿，咱们将 state 赋值到 Image 组件的 Modifier，就能够监听到图片的手势的缩放，平移等，具体代码为：

Image(
    painter = rememberCoilPainter(
        request = image
    ),
    contentDescription = null,
    contentScale = ContentScale.Fit,
    modifier = Modifier.transformable(state = state) 
）

但是，咱们拿到了手势改变的数据，怎样操控图片随着这些数据进行动画呢？官方供给了动画特点 Modifier.graphicsLayer，经过 GraphicsLayerScope 来操控缩放，平移，旋转，透明度，渐变等常用动画，具体的完成代码为：

Image(
    painter = rememberCoilPainter(
        request = image
    ),
    contentDescription = null,
    contentScale = ContentScale.Fit,
    modifier = Modifier
        .transformable(state = state)         /** 检测手势元素的平移、缩放、旋转 */
        .graphicsLayer{  /**缩放、旋转、移动变换 */
            scaleX = scale                    /** 等比缩放 */
            scaleY = scale                    /** 等比缩放 */
            translationX = offset.x           /** X轴位移量*/
            translationY = offset.y           /** Y轴位移量*/
            /** 核算页面的当前偏移 */
            val pageOffset = pagerScope.calculateCurrentOffsetForPage(page = page).absoluteValue
            if (pageOffset == 1.0f) {
                scale = 1.0f
            }
）

这样，咱们监听手势的改变和运用动画就达到了图片缩放，平移的作用了。

双击，单击时事情的处理

咱们运用 pointerInput 来监听图片的单双击事情，具体的代码为：

pointerInput(Unit) {
    detectTapGestures(
        onDoubleTap = {
            scale = if (scale <= 1f) {
                2f
            } else {
                1f
            }
            offset = Offset.Zero
        },
        onTap = {
            context.finish()
        }
    )
}

（1）单击的处理：比较简单，就是直接finish当前页面，假如是运用 navigation 导航的，运用navController.popBackStack()即可，我这儿是运用Activity。

（2）双击的处理：这儿的只有扩大和正常两种状况，当前状况为正常时，双击就扩大2倍（自定义，当然也能够扩大3倍），当前状况为扩大时，双击就将缩放倍数改为1倍，这样那就达到了咱们的作用。

完成的悉数代码为：

@OptIn(ExperimentalPagerApi::class)
@Composable
fun ImagePreviewScreen(images: ArrayList<String>, currentIndex: Int) {
    rememberSystemUiController().setStatusBarColor(Color.Black, darkIcons = true)
    /*** 界面状况改变 */
    val pageState = rememberPagerState(initialPage = currentIndex)
    Box {
        /*** 图片部分 */
        HorizontalPager(
            count = images.size,
            state = pageState,
            contentPadding = PaddingValues(horizontal = 0.dp),
            modifier = Modifier.fillMaxSize()
        ) { page ->
            ImagePageItem(images[page], page, this)
        }
        /*** 指示器部分 */
        HorizontalPagerIndicator(
            pagerState = pageState,
            activeColor = Color.White,              /*** 指示器选中的色彩 */
            inactiveColor = Color(0xff888888), /*** 指示器未选中的色彩 */
            indicatorHeight = 6.dp,                  /*** 指示器的高度 */
            indicatorWidth = 6.dp,                   /*** 指示器的宽度 */
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(60.dp)
        )
    }
}
@OptIn(ExperimentalPagerApi::class)
@Composable
fun ImagePageItem(
    image: String,
    page: Int = 0,
    pagerScope: PagerScope
) {
    val context = LocalContext.current as Activity
    /*** 缩放份额 */
    var scale by remember { mutableStateOf(1f) }
    /*** 偏移量 */
    var offset  by remember { mutableStateOf(Offset.Zero) }
    /*** 监听手势改变 */
    val state = rememberTransformableState(onTransformation = { zoomChange, offsetChange, rotationChange ->
        scale = (zoomChange * scale).coerceAtLeast(1f)
        scale = if (scale > 4f) {
            4f
        } else {
            scale
        }
        offset += offsetChange
    })
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = Color.Black,
    ) {
        Image(
            painter = rememberCoilPainter(
                request = image
            ),
            contentDescription = null,
            contentScale = ContentScale.Fit,
            modifier = Modifier
                .transformable(state = state)         /** 检测手势元素的平移、缩放、旋转 */
                .graphicsLayer{  /**缩放、旋转、移动变换 */
                    scaleX = scale                    /** 等比缩放 */
                    scaleY = scale                    /** 等比缩放 */
                    translationX = offset.x           /** X轴位移量*/
                    translationY = offset.y           /** Y轴位移量*/
                    /** 核算页面的当前偏移 */
                    val pageOffset = pagerScope.calculateCurrentOffsetForPage(page = page).absoluteValue
                    if (pageOffset == 1.0f) {
                        scale = 1.0f
                    }
                }.pointerInput(Unit) {
                    detectTapGestures(
                        onDoubleTap = {
                            scale = if (scale <= 1f) {
                                2f
                            } else {
                                1f
                            }
                            offset = Offset.Zero
                        },
                        onTap = {
                            context.finish()
                        }
                    )
                }
        )
    }
}

到这儿，咱们就完成了仿微信朋友圈图片的预览功用了，一起来看下悉数作用

总结

咱们这一期运用了 HorizontalPager 完成了图片切换，运用 HorizontalPagerIndicator 完成了指示器的功用，运用 transformable 监听手势的缩放，平移等动作，运用了 graphicsLayer 进行动画，运用 pointerInput 来监听图片的单双击事情。

项目地址：ComposeWechat，假如对你有用，别忘了给个star