Created
September 20, 2022 03:17
-
-
Save rharter/1dd14ec1c3352c93ad0d54e99494d166 to your computer and use it in GitHub Desktop.
A simple demonstration of rectangles with extra large corner radii. From https://ryanharter.com/blog/2022/09/rounded-corners/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import androidx.compose.foundation.Canvas | |
import androidx.compose.foundation.layout.Arrangement | |
import androidx.compose.foundation.layout.Column | |
import androidx.compose.foundation.layout.Row | |
import androidx.compose.foundation.layout.fillMaxWidth | |
import androidx.compose.foundation.layout.padding | |
import androidx.compose.foundation.layout.size | |
import androidx.compose.material.Slider | |
import androidx.compose.material.Surface | |
import androidx.compose.material.Text | |
import androidx.compose.runtime.Composable | |
import androidx.compose.runtime.getValue | |
import androidx.compose.runtime.mutableStateOf | |
import androidx.compose.runtime.remember | |
import androidx.compose.runtime.setValue | |
import androidx.compose.ui.Alignment | |
import androidx.compose.ui.Modifier | |
import androidx.compose.ui.geometry.CornerRadius | |
import androidx.compose.ui.geometry.Offset | |
import androidx.compose.ui.geometry.Size | |
import androidx.compose.ui.graphics.Color | |
import androidx.compose.ui.graphics.drawscope.Stroke | |
import androidx.compose.ui.platform.LocalDensity | |
import androidx.compose.ui.tooling.preview.Preview | |
import androidx.compose.ui.unit.dp | |
import com.ryanharter.cornerradiustest.ui.theme.CornerRadiusTestTheme | |
import kotlin.math.roundToInt | |
| |
@Composable | |
fun RoundedRect( | |
modifier: Modifier = Modifier, | |
topLeftRadius: CornerRadius = CornerRadius.Zero, | |
topRightRadius: CornerRadius = CornerRadius.Zero, | |
bottomRightRadius: CornerRadius = CornerRadius.Zero, | |
bottomLeftRadius: CornerRadius = CornerRadius.Zero, | |
) { | |
Canvas( | |
modifier = modifier | |
) { | |
// top | |
drawLine( | |
Color.Green, | |
Offset(topLeftRadius.x, 0f), | |
Offset(size.width - topRightRadius.x, 0f), | |
strokeWidth = 3f, | |
) | |
// right | |
drawLine( | |
Color.Green, | |
Offset(size.width, topRightRadius.y), | |
Offset(size.width, size.height - bottomRightRadius.y), | |
strokeWidth = 3f, | |
) | |
// bottom | |
drawLine( | |
Color.Green, | |
Offset(size.width - bottomRightRadius.x, size.height), | |
Offset(bottomLeftRadius.x, size.height), | |
strokeWidth = 3f, | |
) | |
// left | |
drawLine( | |
Color.Green, | |
Offset(0f, size.height - bottomLeftRadius.y), | |
Offset(0f, topLeftRadius.y), | |
strokeWidth = 3f, | |
) | |
| |
// top left corner | |
drawArc( | |
color = Color.Blue, | |
startAngle = -180f, | |
sweepAngle = 90f, | |
useCenter = false, | |
size = Size(topLeftRadius.x * 2f, topLeftRadius.y * 2f), | |
style = Stroke(width = 3f), | |
) | |
| |
// top right corner | |
drawArc( | |
color = Color.Blue, | |
startAngle = -90f, | |
sweepAngle = 90f, | |
useCenter = false, | |
topLeft = Offset(size.width - topRightRadius.x * 2f, 0f), | |
size = Size(topRightRadius.x * 2f, topRightRadius.y * 2f), | |
style = Stroke(width = 3f), | |
) | |
| |
// bottom right corner | |
drawArc( | |
color = Color.Blue, | |
startAngle = 0f, | |
sweepAngle = 90f, | |
useCenter = false, | |
topLeft = Offset( | |
size.width - bottomRightRadius.x * 2f, | |
size.height - bottomRightRadius.y * 2f | |
), | |
size = Size( | |
bottomRightRadius.x * 2f, | |
bottomRightRadius.y * 2f | |
), | |
style = Stroke(width = 3f), | |
) | |
| |
// bottom left corner | |
drawArc( | |
color = Color.Blue, | |
startAngle = 90f, | |
sweepAngle = 90f, | |
useCenter = false, | |
topLeft = Offset( | |
0f, | |
size.height - bottomLeftRadius.y * 2f | |
), | |
size = Size( | |
bottomLeftRadius.x * 2f, | |
bottomLeftRadius.y * 2f | |
), | |
style = Stroke(width = 3f), | |
) | |
} | |
} | |
| |
@Composable | |
fun RoundedRectExerciser( | |
modifier: Modifier = Modifier | |
) { | |
val width = 100.dp | |
val widthPx = with(LocalDensity.current) { | |
width.toPx() | |
} | |
var cornerRadius by remember { mutableStateOf(0f) } | |
| |
Surface(modifier) { | |
Column( | |
verticalArrangement = Arrangement.spacedBy(10.dp), | |
modifier = Modifier | |
.padding(24.dp) | |
) { | |
Column { | |
Row( | |
modifier = Modifier.fillMaxWidth(), | |
horizontalArrangement = Arrangement.SpaceBetween | |
) { | |
Text("Corner Radius") | |
Text("${(cornerRadius * 100f).roundToInt()} %") | |
} | |
| |
Slider( | |
value = cornerRadius, | |
onValueChange = { cornerRadius = it }, | |
valueRange = 0f..1f, | |
) | |
} | |
| |
Column( | |
verticalArrangement = Arrangement.spacedBy(10.dp), | |
modifier = Modifier.align(Alignment.CenterHorizontally), | |
) { | |
Row( | |
horizontalArrangement = Arrangement.spacedBy(10.dp), | |
) { | |
RoundedRect( | |
topLeftRadius = CornerRadius(widthPx * cornerRadius), | |
modifier = Modifier.size(width), | |
) | |
| |
RoundedRect( | |
topRightRadius = CornerRadius(widthPx * cornerRadius), | |
modifier = Modifier.size(width), | |
) | |
} | |
| |
Row( | |
horizontalArrangement = Arrangement.spacedBy(10.dp), | |
) { | |
RoundedRect( | |
bottomLeftRadius = CornerRadius(widthPx * cornerRadius), | |
modifier = Modifier.size(width), | |
) | |
| |
RoundedRect( | |
bottomRightRadius = CornerRadius(widthPx * cornerRadius), | |
modifier = Modifier.size(width), | |
) | |
} | |
| |
| |
RoundedRect( | |
topLeftRadius = CornerRadius(widthPx * cornerRadius), | |
topRightRadius = CornerRadius(widthPx * cornerRadius), | |
bottomRightRadius = CornerRadius(widthPx * cornerRadius), | |
bottomLeftRadius = CornerRadius(widthPx * cornerRadius), | |
modifier = Modifier | |
.size(width) | |
.align(Alignment.CenterHorizontally), | |
) | |
} | |
} | |
} | |
} | |
| |
| |
@Preview | |
@Composable | |
private fun Preview() { | |
CornerRadiusTestTheme { | |
RoundedRectExerciser() | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment