मैं इस लेआउट को Jetpack Compose में रखना चाहता हूं। मैं कार्ड के नीचे छवि को कैसे रख सकता हूं और इसे कार्ड की सीमाओं से थोड़ा बाहर रख सकता हूं? यह भी कैसे सुनिश्चित करें कि ऊपर दी गई सामग्री छवि से नहीं टकराएगी, क्योंकि ऊपर दी गई सामग्री लंबी हो सकती है। बहुत बहुत धन्यवाद।
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)
)
}
}
नतीजा:
एक आसान तरीका है 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)
}
}
संबंधित सवाल
नए सवाल
android
एंड्रॉइड Google का मोबाइल ऑपरेटिंग सिस्टम है, जिसका उपयोग प्रोग्रामिंग या डिजिटल डिवाइस (स्मार्टफोन, टैबलेट, ऑटोमोबाइल्स, टीवी, वियर, ग्लास, IoT) को विकसित करने के लिए किया जाता है। एंड्रॉइड से संबंधित विषयों के लिए, एंड्रॉइड-विशिष्ट टैग जैसे कि एंड्रॉइड-इरादे, एंड्रॉइड-गतिविधि, एंड्रॉइड-एडॉप्टर आदि का उपयोग करें। विकास या प्रोग्रामिंग के अलावा अन्य प्रश्नों के लिए, लेकिन एंड्रॉइड फ्रेमवर्क से संबंधित हैं, इस लिंक का उपयोग करें: https: // android.stackexchange.com।