मैं इस लेआउट को Jetpack Compose में रखना चाहता हूं। मैं कार्ड के नीचे छवि को कैसे रख सकता हूं और इसे कार्ड की सीमाओं से थोड़ा बाहर रख सकता हूं? यह भी कैसे सुनिश्चित करें कि ऊपर दी गई सामग्री छवि से नहीं टकराएगी, क्योंकि ऊपर दी गई सामग्री लंबी हो सकती है। बहुत बहुत धन्यवाद।

enter image description here

0
Arash Shahzamani 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
Philip Dukhov 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 )
    )
}

enter image description here

यदि आप ऑफ़सेट की गणना करना चाहते हैं तो आप 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
Gabriele Mariotti 24 अगस्त 2021, 13:46