Laurynas Mykolaitis
03/20/2023, 6:37 AMimport androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.*
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
@Composable
private fun TestScreen() {
MaterialTheme {
val scrollState = rememberLazyListState()
LazyColumn(
modifier = Modifier.fillMaxSize(),
state = scrollState,
contentPadding = WindowInsets.navigationBars.asPaddingValues()
) {
item {
Text(
text = "This is header",
style = MaterialTheme.typography.h3
)
}
MyListBox(listOf(1,2))
item { Spacer(modifier = Modifier.height(8.dp)) }
MyListBox(listOf(5,6,7))
item { Spacer(modifier = Modifier.height(8.dp)) }
MyListBox(listOf(1,2,8,9,10))
}
}
}
private fun LazyListScope.MyListBox(listItems: List<Any>) {
item { Spacer(modifier = Modifier.height(8.dp)) }
item {
Box(
modifier = Modifier
.fillMaxWidth()
.height(20.dp)
.padding(horizontal = 24.dp)
.shadow(
elevation = 15.dp,
shape = RoundedCornerShape(
topStart = CornerSize(20.dp),
topEnd = CornerSize(20.dp),
bottomStart = CornerSize(0.dp),
bottomEnd = CornerSize(0.dp)
)
)
.background(
color = Color.White,
shape = RoundedCornerShape(
topStart = CornerSize(20.dp),
topEnd = CornerSize(20.dp),
bottomStart = CornerSize(0.dp),
bottomEnd = CornerSize(0.dp)
)
)
)
}
item {
Text(
"This is a title ", style = MaterialTheme.typography.h4,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 24.dp)
.shadow(
elevation = 15.dp,
shape = RectangleShape
)
.background(color = Color.White)
.padding(horizontal = 20.dp)
.padding(bottom = 20.dp)
)
}
items(listItems,) { item ->
Text(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 24.dp)
.shadow(
elevation = 15.dp,
shape = RectangleShape
)
.background(color = Color.White)
.padding(20.dp),
text = "This is test $item"
)
}
item {
Box(
modifier = Modifier
.fillMaxWidth()
.height(20.dp)
.padding(horizontal = 24.dp)
.shadow(
elevation = 15.dp,
shape = RoundedCornerShape(
topStart = CornerSize(0.dp),
topEnd = CornerSize(0.dp),
bottomStart = CornerSize(20.dp),
bottomEnd = CornerSize(20.dp)
)
)
.background(
color = Color.White,
shape = RoundedCornerShape(
topStart = CornerSize(0.dp),
topEnd = CornerSize(0.dp),
bottomStart = CornerSize(20.dp),
bottomEnd = CornerSize(20.dp)
)
)
)
}
}
@Preview
@Composable
private fun TestPreview() {
TestScreen()
}
Oleksandr Balan
03/21/2023, 10:03 AMclipSides
modifier, which draws a content, but clips it to the rectangle based on the given arguments.
fun Modifier.clipSides(
left: Boolean = false,
top: Boolean = false,
right: Boolean = false,
bottom: Boolean = false,
): Modifier = drawWithContent {
clipRect(
left = if (left) 0f else -Float.MAX_VALUE,
top = if (top) 0f else -Float.MAX_VALUE,
right = if (right) size.width else Float.MAX_VALUE,
bottom = if (bottom) size.height else Float.MAX_VALUE,
) {
this@drawWithContent.drawContent()
}
}
However you are using a larger elevation value, and that causes a visible defect where two items are placed together. See 1st image, where left has a small elevation (looks relatively ok) and right has a big elevation (defect is more visible).
So I was thinking how this could be improved and came up with an idea of “extending” a shape for the shadow
modifier.
However there is a still an issue at the bottom of the screen, see 2nd image which I am now unable to resolve 🤔
Anyway I am curious if this could be implemented in another way 🤷
private fun LazyListScope.MyListBox(
listItems: List<Any>,
elevation: Dp = 15.dp,
cornerSize: Dp = 20.dp,
color: Color = Color.White,
) {
item { Spacer(modifier = Modifier.height(8.dp)) }
item {
Box(
modifier = Modifier
.fillMaxWidth()
.height(20.dp)
.padding(horizontal = 24.dp)
.cardPart(<http://CardPart.Top|CardPart.Top>, elevation, cornerSize, color)
)
}
item {
Text(
"This is a title ",
style = MaterialTheme.typography.h4,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 24.dp)
.cardPart(CardPart.Middle, elevation, cornerSize, color)
.padding(horizontal = 20.dp)
.padding(bottom = 20.dp)
)
}
items(listItems) { item ->
Text(
text = "This is test $item",
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 24.dp)
.cardPart(CardPart.Middle, elevation, cornerSize, color)
.padding(20.dp),
)
}
item {
Box(
modifier = Modifier
.fillMaxWidth()
.height(20.dp)
.padding(horizontal = 24.dp)
.cardPart(CardPart.Bottom, elevation, cornerSize, color)
)
}
}
private enum class CardPart { Top, Middle, Bottom }
private fun Modifier.cardPart(
part: CardPart,
elevation: Dp,
cornerSize: Dp,
color: Color
): Modifier =
this
.clipSides(
top = part == CardPart.Bottom || part == CardPart.Middle,
bottom = part == <http://CardPart.Top|CardPart.Top> || part == CardPart.Middle,
)
.shadow(
elevation = elevation,
shape = CardPartShape(part, cornerSize),
)
.background(color)
private fun Modifier.clipSides(
left: Boolean = false,
top: Boolean = false,
right: Boolean = false,
bottom: Boolean = false,
): Modifier = drawWithContent {
clipRect(
left = if (left) 0f else -Float.MAX_VALUE,
top = if (top) 0f else -Float.MAX_VALUE,
right = if (right) size.width else Float.MAX_VALUE,
bottom = if (bottom) size.height else Float.MAX_VALUE,
) {
this@drawWithContent.drawContent()
}
}
private class CardPartShape(
private val part: CardPart,
private val cornerSize: Dp,
) : Shape {
override fun createOutline(size: Size, layoutDirection: LayoutDirection, density: Density): Outline {
val rect = size.toRect()
val extendSize = rect.height * 10f
val extendedRect = rect
.copy(
top = if (part == CardPart.Bottom || part == CardPart.Middle) <http://rect.top|rect.top> - extendSize else <http://rect.top|rect.top>,
bottom = if (part == <http://CardPart.Top|CardPart.Top> || part == CardPart.Middle) rect.bottom + extendSize else rect.bottom,
)
val cornerSizePx = with(density) { cornerSize.roundToPx().toFloat() }
return when (part) {
<http://CardPart.Top|CardPart.Top> -> Outline.Rounded(
RoundRect(
rect = extendedRect,
topLeft = CornerRadius(cornerSizePx),
topRight = CornerRadius(cornerSizePx),
)
)
CardPart.Middle -> Outline.Rectangle(extendedRect)
CardPart.Bottom -> Outline.Rounded(
RoundRect(
rect = extendedRect,
bottomRight = CornerRadius(cornerSizePx),
bottomLeft = CornerRadius(cornerSizePx),
)
)
}
}
}
Laurynas Mykolaitis
03/21/2023, 2:37 PM