Home > Net >  Collapsing Layout in Jetpack Compose
Collapsing Layout in Jetpack Compose

Time:10-31

I am trying to build a collapsing layout in jetpackCompose but couldn't figure it out how the lerp function is throwing up a error i am providing the specific size and float. Error say the following arguments is not supplied and there is no import statement for lerp side in my imports . Should i add any dependencies to import

My composables

private val BottomBarHeight = 56.dp
private val TitleHeight = 128.dp
private val GradientScroll = 180.dp
private val ImageOverlap = 115.dp
private val MinTitleOffset = 56.dp
private val MinImageOffset = 12.dp
private val MaxTitleOffset = ImageOverlap   MinTitleOffset   
GradientScroll
private val ExpandedImageSize = 300.dp
private val CollapsedImageSize = 150.dp
private val HzPadding = Modifier.padding(horizontal = 24.dp)

@Composable
fun Image(urls: MutableMap<String, String>?, scrollProvider: () -> Int) {
val collapseRange = with(LocalDensity.current) { (MaxTitleOffset - 
MaxTitleOffset).toPx() }
val collapseFractionProvider = {
    (scrollProvider() / collapseRange).coerceIn(0f, 1f)
}

CollapsingImageLayout(collapseFractionProvider = collapseFractionProvider,
    modifier = HzPadding.then(Modifier.statusBarsPadding())) {

    ProductImage(imageUrl = urls.toString(),
        contentDescription = null,
        modifier = Modifier.fillMaxSize())
}
}


@Composable
private fun CollapsingImageLayout(
collapseFractionProvider: () -> Float,
modifier: Modifier = Modifier,
content: @Composable () -> Unit,
) {
Layout(
    modifier = modifier,
    content = content
) { measurables, constraints ->
    check(measurables.size == 1)

    val collapseFraction = collapseFractionProvider()

    val imageMaxSize = min(ExpandedImageSize.roundToPx(), constraints.maxWidth)
    val imageMinSize = max(CollapsedImageSize.roundToPx(), constraints.minWidth)
    val imageWidth = lerp(imageMaxSize, imageMinSize, collapseFraction) //Error thrown up here
    val imagePlaceable = measurables[0].measure(Constraints.fixed(imageWidth, imageWidth))

    val imageY = lerp(MinTitleOffset, MinImageOffset, collapseFraction).roundToPx()
    val imageX = lerp(
        (constraints.maxWidth - imageWidth) / 2, // centered when expanded
        constraints.maxWidth - imageWidth, // right aligned when collapsed
        collapseFraction
    )
    layout(
        width = constraints.maxWidth,
        height = imageY   imageWidth
    ) {
        imagePlaceable.placeRelative(imageX, imageY)
    }
}

}

My Imports

import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.*
import kotlin.math.max
import kotlin.math.min

Error

e:/home/shiva/AndroidStudioProjects/ZuZu/app/src/main/java/com/shivaconsulting/zuzu/prese ntation/components/productCompose/productDetails/ProductDetail.kt: (97, 26): None of the following functions can be called with the arguments supplied: 
public fun lerp(start: Dp, stop: Dp, fraction: Float): Dp defined in 
androidx.compose.ui.unit
public fun lerp(start: DpOffset, stop: DpOffset, fraction: Float): DpOffset defined 
in androidx.compose.ui.unit
public fun lerp(start: DpSize, stop: DpSize, fraction: Float): DpSize defined in 
androidx.compose.ui.unit
public fun lerp(start: IntOffset, stop: IntOffset, fraction: Float): IntOffset 
defined in androidx.compose.ui.unit
public fun lerp(start: IntRect, stop: IntRect, fraction: Float): IntRect defined in 
androidx.compose.ui.unit
public fun lerp(start: TextUnit, stop: TextUnit, fraction: Float): TextUnit defined 
in 
androidx.compose.ui.unit

CodePudding user response:

To be able to use lerp(Float, Float, Float) you need to import

implementation "androidx.compose.ui:ui-util:1.3.0"

https://developer.android.com/reference/kotlin/androidx/compose/ui/util/package-summary

  • Related