Tuesday, 14 June 2022

Zoom Lazycolumn item

I am trying to zoom to an item in a Lazycolumn. I have tried various ways but they all have a problem and I don't know how to fix it. On the first try, I tried to scale and detect the gesture from the image but lose the ability to scroll the list and the second item overlaps. On the second try, I placed the image inside a Box so that it would grow when zoomed in and the image would adapt to the box. Now the second item doesn't overlap when zoom but I can't scroll.

Is there a way to zoom and scroll in a list without overlapping the items?

Thanks

Try 1


var scale = remember { mutableStateOf(1f) }

    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
    ) {
        items(items = list) { item ->

            if (item != null) {

                Image(
                    modifier = Modifier
                        .fillMaxSize()
                        .pointerInput(Unit) {
                            detectTransformGestures { _, _, zoom, _ ->
                                scale.value *= zoom

                            }
                        }
                        .graphicsLayer {
                            scaleX = maxOf(1f, minOf(3f, scale.value));
                            scaleY = maxOf(1f, minOf(3f, scale.value))
                        }, bitmap = item, contentDescription = ""
                )
            }


        }
    }

Try 2


var scale = remember { mutableStateOf(1f) }



    Box(modifier = Modifier
        .fillMaxSize()
        .graphicsLayer {
            scaleX = maxOf(1f, minOf(3f, scale.value));
            scaleY = maxOf(1f, minOf(3f, scale.value))
        }) {


        LazyColumn(
             modifier = Modifier
                .fillMaxSize()
        ) {
            items(items = list) { item ->

                if (item != null) {

                    Image(
                        modifier = Modifier
                            .fillMaxSize().pointerInput(Unit) {
                                detectTransformGestures { _,_, zoom, _ ->
                                    scale.value *= zoom

                                }
                            }, bitmap = item, contentDescription = ""
                    )
                }


            }
        }
    }



from Zoom Lazycolumn item

No comments:

Post a Comment