मैं इस लेआउट को Jetpack Compose में रखना चाहता हूं। मैं कार्ड के नीचे छवि को कैसे रख सकता हूं और इसे कार्ड की सीमाओं से थोड़ा बाहर रख सकता हूं? यह भी कैसे सुनिश्चित करें कि ऊपर दी गई सामग्री छवि से नहीं टकराएगी, क्योंकि ऊपर दी गई सामग्री लंबी हो सकती है। बहुत बहुत धन्यवाद।
0
24 अगस्त 2021, 12:35
2 जवाब
सबसे बढ़िया उत्तर
आप मुख्य दृश्य लेआउट के लिए Card का उपयोग कर सकते हैं।
एक आइकन को इस तरह रखने के लिए, आपको इसे Card के साथ एक बॉक्स में रखना होगा, Alignment.BottomCenter को इमेज में एलाइनमेंट करना होगा और पैडिंग जोड़ना होगा।
छवि को आपके पाठ के अंतर्गत बनाने के लिए, मैंने छवि आकार पर गणना किए गए आकार के साथ Spacer जोड़ा है।
@Composable
fun TestView() {
CompositionLocalProvider(
LocalContentColor provides Color.White
) {
Column {
LazyRow {
items(10) {
Item()
}
}
Box(Modifier.fillMaxWidth().background(Color.DarkGray)) {
Text("next view")
}
}
}
}
@Composable
fun Item() {
Box(
Modifier
.padding(10.dp)
) {
val imagePainter = painterResource(id = R.drawable.test2)
val imageOffset = 20.dp
Card(
shape = RoundedCornerShape(0.dp),
backgroundColor = Color.DarkGray,
modifier = Modifier
.padding(bottom = imageOffset)
.width(200.dp)
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.padding(20.dp)
) {
Text(
"Title",
modifier = Modifier.align(Alignment.Start)
)
Spacer(modifier = Modifier.size(15.dp))
Text("PM2.5")
Text(
"10",
fontSize = 35.sp,
)
Text("m/s")
Spacer(modifier = Modifier.size(15.dp))
Text(
"Very Good",
fontSize = 25.sp,
)
Spacer(
modifier = Modifier
.size(
with(LocalDensity.current) { imagePainter.intrinsicSize.height.toDp() - imageOffset }
)
)
}
}
Image(
painter = imagePainter,
contentDescription = "",
Modifier
.align(Alignment.BottomCenter)
)
}
}
नतीजा:
0
24 अगस्त 2021, 14:12
एक आसान तरीका है Box का उपयोग करना और Offset को Image पर लागू करना
Box() {
val overlayBoxHeight = 40.dp
Card(
modifier = Modifier
.fillMaxWidth()
.height(300.dp)
) {
//...
}
Image(
painterResource(id = R.drawable.xxxx),
contentDescription = "",
modifier = Modifier
.align(BottomCenter)
.offset(x = 0.dp, y = overlayBoxHeight )
)
}
यदि आप ऑफ़सेट की गणना करना चाहते हैं तो आप Layout कंपोज़ेबल का उपयोग कर सकते हैं।
कुछ इस तरह:
Layout( content = {
Card(
elevation = 10.dp,
modifier = Modifier
.layoutId("card")
.fillMaxWidth()
.height(300.dp)
) {
//...
}
Image(
painterResource(id = R.drawable.conero),
contentDescription = "",
modifier = Modifier
.layoutId("image")
)
}){ measurables, incomingConstraints ->
val constraints = incomingConstraints.copy(minWidth = 0, minHeight = 0)
val cardPlaceable =
measurables.find { it.layoutId == "card" }?.measure(constraints)
val imagePlaceable =
measurables.find { it.layoutId == "image" }?.measure(constraints)
//align the icon on the top/end edge
layout(width = widthOrZero(cardPlaceable),
height = heightOrZero(cardPlaceable)+ heightOrZero(imagePlaceable)/2){
cardPlaceable?.placeRelative(0, 0)
imagePlaceable?.placeRelative(widthOrZero(cardPlaceable)/2 - widthOrZero(imagePlaceable)/2,
heightOrZero(cardPlaceable) - heightOrZero(imagePlaceable)/2)
}
}
0
24 अगस्त 2021, 13:46