From e1d82b79c6a796caaae76956e471e29871d12b59 Mon Sep 17 00:00:00 2001 From: shw0471 Date: Tue, 28 Dec 2021 15:19:21 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20::=20set=20large=20but?= =?UTF-8?q?ton=20width=20to=20flexible?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/java/com/semicolon/design/button/BasicButton.kt | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/design/src/main/java/com/semicolon/design/button/BasicButton.kt b/design/src/main/java/com/semicolon/design/button/BasicButton.kt index 46f330e..3b5b1cd 100644 --- a/design/src/main/java/com/semicolon/design/button/BasicButton.kt +++ b/design/src/main/java/com/semicolon/design/button/BasicButton.kt @@ -62,7 +62,8 @@ fun BasicLargeButton( onClick: () -> Unit ) { var fixedModifier = modifier - .width(328.dp) + .fillMaxWidth() + .padding(horizontal = 16.dp) .clip(RoundedCornerShape(12.dp)) if (outlineColor != null && isEnabled) fixedModifier = fixedModifier.border(1.dp, outlineColor, RoundedCornerShape(12.dp)) From 7882c98c9cae6e41596020eb353331e569352a00 Mon Sep 17 00:00:00 2001 From: shw0471 Date: Tue, 28 Dec 2021 18:44:57 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20::=20update=20toggle?= =?UTF-8?q?=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../semicolon/design/button/ToggleButton.kt | 108 ++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 design/src/main/java/com/semicolon/design/button/ToggleButton.kt diff --git a/design/src/main/java/com/semicolon/design/button/ToggleButton.kt b/design/src/main/java/com/semicolon/design/button/ToggleButton.kt new file mode 100644 index 0000000..ccc1a6b --- /dev/null +++ b/design/src/main/java/com/semicolon/design/button/ToggleButton.kt @@ -0,0 +1,108 @@ +package com.semicolon.design.button + +import androidx.compose.animation.core.animateDpAsState +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.Text +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.layout.onSizeChanged +import androidx.compose.ui.platform.LocalDensity +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import com.semicolon.design.color.primary.gray.gray100 +import com.semicolon.design.color.primary.gray.gray700 +import com.semicolon.design.color.primary.white.white + +@Composable +fun ToggleButton( + modifier: Modifier = Modifier, + items: Array, + position: Int = 0, + onSelectedItemChange: (position: Int) -> Unit = {} +) { + val toggleItems = if (items.size > 4) items.sliceArray(0..3) else items + BasicToggleButton( + modifier = modifier, + items = toggleItems, + position = position, + onSelectedItemChange = onSelectedItemChange + ) +} + +@Composable +fun BasicToggleButton( + modifier: Modifier = Modifier, + items: Array, + position: Int = 0, + onSelectedItemChange: (position: Int) -> Unit +) { + var eachContentWidth by remember { mutableStateOf(0) } + val eachContentDpWidth = LocalDensity.current.run { eachContentWidth.toDp() } + var positionState by remember { mutableStateOf(position) } + val emptySpaceWidth: Dp by animateDpAsState(((eachContentDpWidth.value * positionState) + (8 * positionState)).dp) + Box( + modifier = modifier + .padding(horizontal = 24.dp) + .height(44.dp) + .fillMaxWidth() + .clip(RoundedCornerShape(22.dp)) + .background(gray100) + .padding(4.dp) + .onSizeChanged { + if(items.isNotEmpty()) + eachContentWidth = (it.width - (8 * items.size)) / items.size + } + ) { + Row { + Spacer(modifier = Modifier.width(emptySpaceWidth)) + Spacer( + modifier = Modifier + .width(eachContentDpWidth) + .height(36.dp) + .clip(RoundedCornerShape(18.dp)) + .background(white) + ) + } + Row { + for (i in items.indices) { + ToggleItem( + modifier = Modifier + .height(36.dp) + .width(eachContentDpWidth), + text = items[i], + onClick = { + positionState = i + onSelectedItemChange(i) + } + ) + if (i != items.lastIndex) Spacer(modifier = Modifier.size(8.dp)) + if (i == 3) break + } + } + } +} + +@Composable +private fun ToggleItem( + modifier: Modifier, + text: String, + onClick: () -> Unit +) { + Box( + modifier = modifier + .clickable( + interactionSource = MutableInteractionSource(), + indication = null + ) { onClick() }, + contentAlignment = Alignment.Center + ) { + Text(text = text, fontSize = 14.sp, color = gray700) + } +} \ No newline at end of file From 10362396e1a52a1c2ff97dd872d5d418f0ce3d53 Mon Sep 17 00:00:00 2001 From: shw0471 Date: Tue, 28 Dec 2021 18:45:12 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20::=20update=20TestActi?= =?UTF-8?q?vity?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../java/com/semicolon/semicolondesign/TestActivity.kt | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/src/main/java/com/semicolon/semicolondesign/TestActivity.kt b/app/src/main/java/com/semicolon/semicolondesign/TestActivity.kt index 0283cb1..10adc47 100644 --- a/app/src/main/java/com/semicolon/semicolondesign/TestActivity.kt +++ b/app/src/main/java/com/semicolon/semicolondesign/TestActivity.kt @@ -221,10 +221,11 @@ class TestActivity : AppCompatActivity() { } } - ToggleSwitch( - onToggleOn = {makeToast("토글 스위치 켜짐")}, - onToggleOff = {makeToast("토글 스위치 꺼짐")} - ) + ToggleSwitch() + ToggleButton(items = arrayOf("버튼", "버튼")) + ToggleButton(items = arrayOf("버튼", "버튼", "버튼")) + ToggleButton(items = arrayOf("버튼", "버튼", "버튼", "버튼")) + ToggleButton(items = arrayOf()) } } }