-
-
Save gentildpinto/64c54abca6a98e2413f8bbf7c800001f to your computer and use it in GitHub Desktop.
Small Design Tool in Jetpack Compose
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.background | |
import androidx.compose.foundation.clickable | |
import androidx.compose.foundation.layout.Arrangement | |
import androidx.compose.foundation.layout.Box | |
import androidx.compose.foundation.layout.Column | |
import androidx.compose.foundation.layout.Row | |
import androidx.compose.foundation.layout.fillMaxSize | |
import androidx.compose.foundation.layout.fillMaxWidth | |
import androidx.compose.foundation.layout.height | |
import androidx.compose.foundation.layout.padding | |
import androidx.compose.foundation.layout.size | |
import androidx.compose.foundation.rememberScrollState | |
import androidx.compose.foundation.shape.RoundedCornerShape | |
import androidx.compose.foundation.verticalScroll | |
import androidx.compose.material.MaterialTheme | |
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.draw.clip | |
import androidx.compose.ui.graphics.Color | |
import androidx.compose.ui.graphics.graphicsLayer | |
import androidx.compose.ui.tooling.preview.Preview | |
import androidx.compose.ui.unit.dp | |
@Preview | |
@Composable | |
fun SmallDesignTool() { | |
Surface( | |
modifier = Modifier.fillMaxSize(), | |
color = MaterialTheme.colors.background | |
) { | |
var rotateX by remember { mutableStateOf(0f) } | |
var rotateY by remember { mutableStateOf(0f) } | |
var rotateZ by remember { mutableStateOf(0f) } | |
var scaleX by remember { mutableStateOf(1f) } | |
var scaleY by remember { mutableStateOf(1f) } | |
var alpha by remember { mutableStateOf(1f) } | |
var offsetX by remember { mutableStateOf(1f) } | |
var offsetY by remember { mutableStateOf(1f) } | |
var clipPercent by remember { mutableStateOf(0) } | |
Column( | |
modifier = Modifier | |
.fillMaxSize() | |
.padding(8.dp), | |
horizontalAlignment = Alignment.CenterHorizontally | |
) { | |
Box( | |
modifier = Modifier | |
.fillMaxWidth() | |
.height(250.dp) | |
) { | |
Box( | |
modifier = Modifier | |
.align(Alignment.Center) | |
.size(156.dp) | |
.clip(RoundedCornerShape(8.dp)) | |
.background(MaterialTheme.colors.primary) | |
) | |
Box( | |
modifier = Modifier | |
.align(Alignment.Center) | |
.size(156.dp) | |
.graphicsLayer { | |
this.rotationX = rotateX | |
this.rotationY = rotateY | |
this.rotationZ = rotateZ | |
this.scaleX = scaleX | |
this.scaleY = scaleY | |
this.alpha = alpha | |
this.translationX = offsetX | |
this.translationY = offsetY | |
} | |
.clip(RoundedCornerShape(percent = clipPercent)) | |
.background(MaterialTheme.colors.secondary) | |
) | |
} | |
Column( | |
Modifier | |
.clip(RoundedCornerShape(8.dp)) | |
.background(Color.LightGray) | |
.verticalScroll(rememberScrollState()) | |
) { | |
RowScale(value = rotateX, label = "X Axis Rotate", range = -190f..190f) { | |
rotateX = it | |
} | |
RowScale(value = rotateY, label = "Y Axis Rotate", range = -190f..190f) { | |
rotateY = it | |
} | |
RowScale(value = rotateZ, label = "Z Axis Rotate", range = -190f..190f) { | |
rotateZ = it | |
} | |
RowScale(value = scaleX, label = "X Scale", range = 0f..2f) { | |
scaleX = it | |
} | |
RowScale(value = scaleY, label = "Y Scale", range = 0f..2f) { | |
scaleY = it | |
} | |
RowScale(value = offsetX, label = "X Offset", range = -190f..190f) { | |
offsetX = it | |
} | |
RowScale(value = offsetY, label = "Y Offset", range = -190f..190f) { | |
offsetY = it | |
} | |
RowScale(value = alpha, label = "Alpha", range = 0f..1f) { | |
alpha = it | |
} | |
RowScale(value = clipPercent.toFloat(), label = "Corner", range = 0f..50f) { | |
clipPercent = it.toInt() | |
} | |
} | |
} | |
} | |
} | |
@Composable | |
fun RowScale( | |
value: Float, | |
label: String, | |
range: ClosedFloatingPointRange<Float>, | |
onValueChange: (Float) -> Unit | |
) { | |
var scale by remember { | |
mutableStateOf(value) | |
} | |
Column(Modifier.padding(16.dp)) { | |
Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) { | |
Text(text = label, modifier = Modifier.clickable { | |
scale = 1f | |
onValueChange.invoke(scale) | |
}) | |
Text(text = scale.toString(), modifier = Modifier.clickable { | |
scale = 1f | |
onValueChange.invoke(scale) | |
}) | |
} | |
Slider( | |
value = scale, | |
onValueChange = { sliderValue_ -> | |
scale = sliderValue_ | |
onValueChange.invoke(sliderValue_) | |
}, | |
valueRange = range | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment