Мобильная версияI'm working on creating a custom composable method for building a card in Compose. The card is intended to have a background image, a logo, two text fields, and a foreground image without applying padding to the foreground image.
Here is what i'm aiming for:
Currently, I'm using a ConstraintLayout for this layout, but I'm encountering difficulty in making it resizable dynamically. Specifically, I want the card to adjust its size when the bottom text is longer. The desired behavior is to have the text move to a new line without overlapping image2 and dynamically resize the card accordingly.
The challenge lies in the fact that I've set a specific height for the parent view, and I'm seeking guidance on alternative approaches to achieve this flexibility. Any assistance or suggestions would be highly appreciated!
Card( modifier = Modifier .fillMaxWidth() .height(85.dp) .clip(RoundedCornerShape(14.dp)) .clickable { onClick() }, shape = RoundedCornerShape(14.dp), colors = CardDefaults.cardColors( containerColor = Color.Transparent, ) ) { Box(modifier = Modifier.fillMaxSize()) { Image( painter = painterResource(id = backgroundImageId), contentDescription = null, modifier = Modifier .fillMaxSize() .clip(RoundedCornerShape(14.dp)), contentScale = ContentScale.Crop ) ConstraintLayout( modifier = Modifier .fillMaxWidth() .padding(start = 8.dp, end = 8.dp, top = 16.dp, bottom = 16.dp) ) { val (logoImage, valueTV, infoTV, foregroundImage) = createRefs() Image( painter = painterResource(id = logoId), contentDescription = null, modifier = Modifier .size(55.dp) .clipToBounds() .constrainAs(logoImage) { centerVerticallyTo(parent) }, contentScale = ContentScale.Crop ) CTText( text = valueText, isBold = true, modifier = Modifier .constrainAs(valueTV) { start.linkTo(logoImage.end, margin = 10.dp) }) CTText( text = infoText, modifier = Modifier .widthIn(max = 200.dp) // maximum width for the text before newline // TODO find new way .constrainAs(infoTV) { top.linkTo(valueTV.bottom, margin = 10.dp) start.linkTo(logoImage.end, margin = 10.dp) }) val painter = painterResource(id = foregroundImageId) Image( modifier = Modifier .size(110.dp) .aspectRatio(painter.intrinsicSize.width / painter.intrinsicSize.height) .fillMaxSize() .constrainAs(foregroundImage) { end.linkTo(parent.end, margin = (-8).dp) bottom.linkTo(parent.bottom, margin = (-3).dp) }, painter = painter, contentDescription = null, contentScale = ContentScale.Fit ) } } }
Источник: https://stackoverflow.com/questions/781 ... efactoring
