RadioButton 구현 (#10)

* feat : add RadioButton * fix : resolving conflict * fix : resolving conflict
yourssu · Sep 19, 2024 · d769cab · d769cab
1 parent cf8e544
commit d769cab
Show file tree

Hide file tree

Showing 5 changed files with 233 additions and 0 deletions.
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/RadioButtonPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/RadioButtonPreview.kt
@@ -0,0 +1,109 @@
+package com.yourssu.handy.demo
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import com.yourssu.handy.compose.RadioButton
+import com.yourssu.handy.compose.RadioButtonSize
+
+@Preview(showBackground = true)
+@Composable
+fun RadioButtonPreview() {
+    Column {
+        Row {
+            Column {
+                RadioButton(
+                    checked = true,
+                    onCheckedChange = {},
+                    sizeType = RadioButtonSize.Small,
+                    text = "selected"
+                )
+                RadioButton(
+                    checked = true,
+                    onCheckedChange = {},
+                    sizeType = RadioButtonSize.Medium,
+                    text = "selected"
+                )
+                RadioButton(
+                    checked = true,
+                    onCheckedChange = {},
+                    sizeType = RadioButtonSize.Large,
+                    text = "selected"
+                )
+            }
+            Column {
+                RadioButton(
+                    checked = false,
+                    onCheckedChange = {},
+                    sizeType = RadioButtonSize.Small,
+                    text = "unselected"
+                )
+                RadioButton(
+                    checked = false,
+                    onCheckedChange = {},
+                    sizeType = RadioButtonSize.Medium,
+                    text = "unselected"
+                )
+                RadioButton(
+                    checked = false,
+                    onCheckedChange = {},
+                    sizeType = RadioButtonSize.Large,
+                    text = "unselected"
+                )
+            }
+        }
+        Row {
+            Column {
+                RadioButton(
+                    checked = true,
+                    onCheckedChange = {},
+                    sizeType = RadioButtonSize.Small,
+                    text = "selected",
+                    contentColor = Color.Red
+                )
+                RadioButton(
+                    checked = true,
+                    onCheckedChange = {},
+                    sizeType = RadioButtonSize.Medium,
+                    text = "selected",
+                    contentColor = Color.Red
+                )
+                RadioButton(
+                    checked = true,
+                    onCheckedChange = {},
+                    sizeType = RadioButtonSize.Large,
+                    text = "selected",
+                    contentColor = Color.Red
+                )
+            }
+            Column {
+                RadioButton(
+                    checked = false,
+                    onCheckedChange = {},
+                    sizeType = RadioButtonSize.Small,
+                    text = "disabled",
+                    enabled = false,
+                    contentColor = Color.Red
+                )
+                RadioButton(
+                    checked = false,
+                    onCheckedChange = {},
+                    sizeType = RadioButtonSize.Medium,
+                    text = "disabled",
+                    enabled = false,
+                    contentColor = Color.Red
+                )
+                RadioButton(
+                    checked = false,
+                    onCheckedChange = {},
+                    sizeType = RadioButtonSize.Large,
+                    text = "disabled",
+                    enabled = false,
+                    contentColor = Color.Red
+                )
+            }
+        }
+    }
+}
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/RadioButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/RadioButton.kt
@@ -0,0 +1,85 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.foundation.ColorGray300
+import com.yourssu.handy.compose.foundation.HandyTextStyle
+import com.yourssu.handy.compose.foundation.HandyTypography
+
+sealed class RadioButtonSize(
+    val typo: HandyTextStyle,
+    val iconSize: IconSize,
+) {
+    data object Small : RadioButtonSize(typo = HandyTypography.B5Rg12, iconSize = IconSize.XS)
+    data object Medium : RadioButtonSize(typo = HandyTypography.B3Rg14, iconSize = IconSize.S)
+    data object Large : RadioButtonSize(typo = HandyTypography.B1Rg16, iconSize = IconSize.M)
+}
+
+/**
+ * 단일 선택을 나타낼 수 있는 [RadioButton]입니다.
+ *
+ * @param checked RadioButton의 선택 유무
+ * @param onCheckedChange RadioButton의 선택 상태가 변경될 때 호출되는 함수
+ * @param modifier RadioButton에 대한 선택적 Modifier
+ * @param sizeType RadioButton의 크기에 따른 텍스트의 타이포, 아이콘 사이즈 설정. 기본값은 Medium
+ * @param text RadioButton 옆에 표시되는 텍스트
+ * @param enabled RadioButton의 활성화 유무
+ * @param contentColor RadioButton의 아이콘 색상
+ */
+@Composable
+fun RadioButton(
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+    sizeType: RadioButtonSize = RadioButtonSize.Medium,
+    text: String = "",
+    enabled: Boolean = true,
+    contentColor: Color = HandyTheme.colors.buttonRadioSelected
+) {
+    val icon = when {
+        checked -> R.drawable.ic_radiobutton_selected
+        !enabled -> R.drawable.ic_radiobutton_disabled
+        else -> R.drawable.ic_radiobutton_unselected
+    }
+
+    val iconColor = when {
+        checked -> contentColor
+        !enabled -> HandyTheme.colors.buttonRadioUnselected
+        else -> HandyTheme.colors.buttonRadioUnselected
+    }
+
+    val iconSize = sizeType.iconSize
+    val typo = sizeType.typo
+
+    Surface(
+        checked = checked,
+        onCheckedChange = onCheckedChange,
+        modifier = modifier,
+        enabled = enabled,
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Icon(
+                painter = painterResource(id = icon),
+                tint = iconColor,
+                iconSize = iconSize,
+            )
+            if (text.isNotEmpty()) {
+                Spacer(modifier = Modifier.width(8.dp))
+                Text(
+                    text = text,
+                    style = typo,
+                    color = if (enabled) Color.Unspecified else ColorGray300
+                )
+            }
+        }
+    }
+}
diff --git a/compose/src/main/res/drawable/ic_radiobutton_disabled.xml b/compose/src/main/res/drawable/ic_radiobutton_disabled.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,2.5L12,2.5A9.5,9.5 0,0 1,21.5 12L21.5,12A9.5,9.5 0,0 1,12 21.5L12,21.5A9.5,9.5 0,0 1,2.5 12L2.5,12A9.5,9.5 0,0 1,12 2.5z"
+      android:strokeWidth="5"
+      android:fillColor="#00000000"
+      android:strokeColor="#E3E4E8"/>
+</vector>
diff --git a/compose/src/main/res/drawable/ic_radiobutton_selected.xml b/compose/src/main/res/drawable/ic_radiobutton_selected.xml
@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,0.75L12,0.75A11.25,11.25 0,0 1,23.25 12L23.25,12A11.25,11.25 0,0 1,12 23.25L12,23.25A11.25,11.25 0,0 1,0.75 12L0.75,12A11.25,11.25 0,0 1,12 0.75z"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#6B5CFF"/>
+  <path
+      android:pathData="M12,5L12,5A7,7 0,0 1,19 12L19,12A7,7 0,0 1,12 19L12,19A7,7 0,0 1,5 12L5,12A7,7 0,0 1,12 5z"
+      android:fillColor="#6B5CFF"/>
+</vector>
diff --git a/compose/src/main/res/drawable/ic_radiobutton_unselected.xml b/compose/src/main/res/drawable/ic_radiobutton_unselected.xml
@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,0.75L12,0.75A11.25,11.25 0,0 1,23.25 12L23.25,12A11.25,11.25 0,0 1,12 23.25L12,23.25A11.25,11.25 0,0 1,0.75 12L0.75,12A11.25,11.25 0,0 1,12 0.75z"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#E3E4E8"/>
+  <path
+      android:pathData="M12,5L12,5A7,7 0,0 1,19 12L19,12A7,7 0,0 1,12 19L12,19A7,7 0,0 1,5 12L5,12A7,7 0,0 1,12 5z"
+      android:fillColor="#E3E4E8"/>
+</vector>