Merge pull request #26 from ddyeon/feature/topbar

도라방스Topbar 제작기
mash-up-kr · Jun 20, 2024 · c5db89e · c5db89e
2 parents 2b4c7d3 + 4082de0
commit c5db89e
Show file tree

Hide file tree

Showing 5 changed files with 243 additions and 1 deletion.
diff --git a/...stem/src/main/java/com/mashup/dorabangs/core/designsystem/component/DorabangsTopAppBar.kt b/...stem/src/main/java/com/mashup/dorabangs/core/designsystem/component/DorabangsTopAppBar.kt
diff --git a/...c/main/java/com/mashup/dorabangs/core/designsystem/component/topbar/DorabangsTopAppBar.kt b/...c/main/java/com/mashup/dorabangs/core/designsystem/component/topbar/DorabangsTopAppBar.kt
@@ -0,0 +1,114 @@
+package com.mashup.dorabangs.core.designsystem.component.topbar
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.mashup.dorabangs.core.designsystem.R
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun DoraTopAppBar(
+    modifier: Modifier = Modifier,
+    title: String,
+    titleAlignment: Alignment = Alignment.Center,
+    isEnableBackNavigation: Boolean = false,
+    @DrawableRes actionIcon: Int? = null,
+    onClickBackIcon: () -> Unit = {},
+    onClickActonIcon: () -> Unit = {},
+) {
+    TopAppBar(
+        modifier = modifier,
+        colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.White),
+        title = {
+            Box(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = titleAlignment,
+            ) {
+                val startPadding =
+                    if (titleAlignment == Alignment.CenterStart && isEnableBackNavigation) 16.dp else 0.dp
+                Text(
+                    modifier = Modifier.padding(start = startPadding),
+                    text = title,
+                )
+            }
+        },
+        actions = {
+            if (actionIcon != null) {
+                Icon(
+                    modifier = Modifier
+                        .padding(end = 20.dp)
+                        .clickable { onClickActonIcon() },
+                    painter = painterResource(id = actionIcon),
+                    contentDescription = "action",
+                )
+            }
+        },
+        navigationIcon = {
+            if (isEnableBackNavigation) {
+                Icon(
+                    modifier = Modifier
+                        .padding(start = 20.dp)
+                        .clickable { onClickBackIcon() },
+                    painter = painterResource(id = R.drawable.ic_back),
+                    contentDescription = "navigation",
+                )
+            }
+        },
+    )
+}
+
+@Preview
+@Composable
+fun PreviewHomeTopAppBar() {
+    DoraTopBar.HomeTopBar(
+        modifier = Modifier.fillMaxWidth(),
+        title = "Dorabangs",
+        actionIcon = R.drawable.ic_plus,
+    ) {}
+}
+
+@Preview
+@Composable
+fun PreviewBackNavigationTopBar() {
+    DoraTopBar.BackNavigationTopBar(
+        modifier = Modifier.fillMaxWidth(),
+        title = "Dorabangs",
+        titleAlignment = Alignment.CenterStart,
+    ) {}
+}
+
+@Preview
+@Composable
+fun PreviewBackWithActionIconTopBar() {
+    DoraTopBar.BackWithActionIconTopBar(
+        modifier = Modifier.fillMaxWidth(),
+        title = "Dorabangs",
+        actionIcon = R.drawable.ic_plus,
+        onClickBackIcon = {},
+        onClickActonIcon = {},
+    )
+}
+
+@Preview
+@Composable
+fun PreviewTitleTopAppBar() {
+    DoraTopBar.TitleTopAppBar(
+        modifier = Modifier.fillMaxWidth(),
+        title = "Dorabangs",
+    )
+}
diff --git a/...em/src/main/java/com/mashup/dorabangs/core/designsystem/component/topbar/TopAppBarType.kt b/...em/src/main/java/com/mashup/dorabangs/core/designsystem/component/topbar/TopAppBarType.kt
@@ -0,0 +1,103 @@
+package com.mashup.dorabangs.core.designsystem.component.topbar
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+
+object DoraTopBar : TopAppBarType {
+    @Composable
+    override fun HomeTopBar(
+        modifier: Modifier,
+        title: String,
+        actionIcon: Int,
+        onClickActonIcon: () -> Unit,
+    ) {
+        DoraTopAppBar(
+            modifier = modifier,
+            title = title,
+            titleAlignment = Alignment.CenterStart,
+            actionIcon = actionIcon,
+            onClickActonIcon = onClickActonIcon,
+        )
+    }
+
+    @Composable
+    override fun BackNavigationTopBar(
+        modifier: Modifier,
+        title: String,
+        titleAlignment: Alignment,
+        onClickBackIcon: () -> Unit,
+    ) {
+        DoraTopAppBar(
+            modifier = modifier,
+            title = title,
+            titleAlignment = titleAlignment,
+            isEnableBackNavigation = true,
+            onClickBackIcon = onClickBackIcon,
+        )
+    }
+
+    @Composable
+    override fun BackWithActionIconTopBar(
+        modifier: Modifier,
+        title: String,
+        actionIcon: Int,
+        onClickBackIcon: () -> Unit,
+        onClickActonIcon: () -> Unit,
+    ) {
+        DoraTopAppBar(
+            modifier = modifier,
+            title = title,
+            titleAlignment = Alignment.CenterStart,
+            isEnableBackNavigation = true,
+            actionIcon = actionIcon,
+            onClickBackIcon = onClickBackIcon,
+            onClickActonIcon = onClickActonIcon,
+        )
+    }
+
+    @Composable
+    override fun TitleTopAppBar(
+        modifier: Modifier,
+        title: String,
+    ) {
+        DoraTopAppBar(
+            modifier = modifier,
+            title = title,
+            titleAlignment = Alignment.Center,
+        )
+    }
+}
+
+sealed interface TopAppBarType {
+    @Composable
+    fun HomeTopBar(
+        modifier: Modifier,
+        title: String,
+        actionIcon: Int,
+        onClickActonIcon: () -> Unit,
+    )
+
+    @Composable
+    fun BackNavigationTopBar(
+        modifier: Modifier,
+        title: String,
+        titleAlignment: Alignment,
+        onClickBackIcon: () -> Unit,
+    )
+
+    @Composable
+    fun BackWithActionIconTopBar(
+        modifier: Modifier,
+        title: String,
+        actionIcon: Int,
+        onClickBackIcon: () -> Unit,
+        onClickActonIcon: () -> Unit,
+    )
+
+    @Composable
+    fun TitleTopAppBar(
+        modifier: Modifier,
+        title: String,
+    )
+}
diff --git a/core/designsystem/src/main/res/drawable/ic_back.xml b/core/designsystem/src/main/res/drawable/ic_back.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="26dp"
+    android:height="26dp"
+    android:viewportWidth="26"
+    android:viewportHeight="26">
+  <path
+      android:pathData="M5,0.75L21,0.75A4.25,4.25 0,0 1,25.25 5L25.25,21A4.25,4.25 0,0 1,21 25.25L5,25.25A4.25,4.25 0,0 1,0.75 21L0.75,5A4.25,4.25 0,0 1,5 0.75z"
+      android:strokeWidth="0.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#ADB5BD"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M10.97,13.5L16.877,6.847C17.041,6.662 17.041,6.361 16.877,6.176L16.4,5.639C16.236,5.454 15.969,5.454 15.804,5.639L9.123,13.165C8.959,13.35 8.959,13.65 9.123,13.835L15.804,21.361C15.969,21.546 16.236,21.546 16.4,21.361L16.877,20.824C17.041,20.639 17.041,20.338 16.877,20.153L10.97,13.5Z"
+      android:fillColor="#121212"
+      android:strokeColor="#121212"/>
+</vector>
diff --git a/core/designsystem/src/main/res/drawable/ic_plus.xml b/core/designsystem/src/main/res/drawable/ic_plus.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M8,0.5C8.414,0.5 8.75,0.836 8.75,1.25V7.25H14.75C15.164,7.25 15.5,7.586 15.5,8C15.5,8.414 15.164,8.75 14.75,8.75H8.75V14.75C8.75,15.164 8.414,15.5 8,15.5C7.586,15.5 7.25,15.164 7.25,14.75V8.75H1.25C0.836,8.75 0.5,8.414 0.5,8C0.5,7.586 0.836,7.25 1.25,7.25H7.25V1.25C7.25,0.836 7.586,0.5 8,0.5Z"
+      android:fillColor="#373737"
+      android:fillType="evenOdd"/>
+</vector>