From 757e0734ca688b115bce6e9bebfaa8f257e9a39c Mon Sep 17 00:00:00 2001 From: Jaesung Lee Date: Fri, 7 Jul 2023 01:38:15 +0900 Subject: [PATCH] =?UTF-8?q?[feat]=20#111=20TopLevelDestination=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20Navigation=20Bar=20Icon=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../navigation/TopLevelDestination.kt | 12 +-- .../ui/common/KeyLinkNavigationBar.kt | 81 +++++++++++++++---- .../main/res/drawable/ic_signal_fill_32.xml | 10 +++ presentation/src/main/res/values/strings.xml | 4 +- 4 files changed, 83 insertions(+), 24 deletions(-) create mode 100644 presentation/src/main/res/drawable/ic_signal_fill_32.xml diff --git a/presentation/src/main/java/com/mashup/presentation/navigation/TopLevelDestination.kt b/presentation/src/main/java/com/mashup/presentation/navigation/TopLevelDestination.kt index e2867ecac..c775e6532 100644 --- a/presentation/src/main/java/com/mashup/presentation/navigation/TopLevelDestination.kt +++ b/presentation/src/main/java/com/mashup/presentation/navigation/TopLevelDestination.kt @@ -8,26 +8,26 @@ import com.mashup.presentation.R * @created 2023/07/04 */ enum class TopLevelDestination( - val selectedIconId: Int?, - val unselectedIconId: Int?, + val selectedIconId: Int, + val unselectedIconId: Int, val iconTextId: Int, val textLabelId: Int ) { HOME( selectedIconId = R.drawable.ic_home_fill_32, - unselectedIconId = R.drawable.ic_home_fill_32, // 수정 필요 + unselectedIconId = R.drawable.ic_home_fill_32, iconTextId = R.string.navigation_home, textLabelId = R.string.navigation_home, ), SIGNAL( - selectedIconId = null, - unselectedIconId = null, + selectedIconId = R.drawable.ic_signal_fill_32, + unselectedIconId = R.drawable.ic_signal_fill_32, iconTextId = R.string.navigation_signal, textLabelId = R.string.navigation_signal, ), CHAT( selectedIconId = R.drawable.ic_chat_fill_32, - unselectedIconId = R.drawable.ic_chat_fill_32, // 수정 필요 + unselectedIconId = R.drawable.ic_chat_fill_32, iconTextId = R.string.navigation_chat, textLabelId = R.string.navigation_chat, ), diff --git a/presentation/src/main/java/com/mashup/presentation/ui/common/KeyLinkNavigationBar.kt b/presentation/src/main/java/com/mashup/presentation/ui/common/KeyLinkNavigationBar.kt index 46f97466d..8c44ab517 100644 --- a/presentation/src/main/java/com/mashup/presentation/ui/common/KeyLinkNavigationBar.kt +++ b/presentation/src/main/java/com/mashup/presentation/ui/common/KeyLinkNavigationBar.kt @@ -4,23 +4,62 @@ import androidx.compose.foundation.layout.* import androidx.compose.foundation.selection.selectableGroup import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.* -import androidx.compose.runtime.getValue -import androidx.compose.runtime.setValue -import androidx.compose.runtime.Composable -import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.* import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.navigation.NavDestination +import androidx.navigation.NavDestination.Companion.hierarchy import com.mashup.presentation.ui.theme.* import com.mashup.presentation.R +import com.mashup.presentation.navigation.TopLevelDestination /** * Ssam_D_Android * @author jaesung * @created 2023/07/04 */ +@Composable +fun KeyLinkBottomBar( + destinations: List, + onNavigateToDestination: (TopLevelDestination) -> Unit, + currentDestination: NavDestination?, + modifier: Modifier = Modifier +) { + KeyLinkNavigationBar(modifier = modifier) { + destinations.forEach { destination -> + + val selected = currentDestination?.hierarchy?.any { + it.route?.contains(destination.name, true) ?: false + } ?: false + + KeyLinkNavigationBarItem( + selected = selected, + onClick = { onNavigateToDestination(destination) }, + icon = { + Icon( + painter = painterResource(id = destination.unselectedIconId), + contentDescription = stringResource(id = destination.iconTextId) + ) + }, + selectedIcon = { + Icon( + painter = painterResource(id = destination.selectedIconId), + contentDescription = stringResource(id = destination.iconTextId) + ) + }, + label = { + Text(text = stringResource(id = destination.textLabelId)) + }, + modifier = modifier, + ) + } + } +} + @Composable fun KeyLinkNavigationBar( modifier: Modifier = Modifier, @@ -47,12 +86,12 @@ fun KeyLinkNavigationBar( fun RowScope.KeyLinkNavigationBarItem( selected: Boolean, onClick: () -> Unit, - modifier: Modifier = Modifier, - alwaysShowLabel: Boolean = true, - enabled: Boolean = true, + label: @Composable () -> Unit, icon: @Composable () -> Unit, selectedIcon: @Composable () -> Unit, - label: @Composable (() -> Unit)? = null + modifier: Modifier = Modifier, + alwaysShowLabel: Boolean = true, + enabled: Boolean = true ) { BottomNavigationItem( selected = selected, @@ -71,16 +110,16 @@ fun RowScope.KeyLinkNavigationBarItem( @Composable fun KeyLinkNavigationBarPreview() { var selectedItem by rememberSaveable { mutableStateOf(0) } - val items = listOf("홈", "시그널 보내기", "채팅") + val items = listOf("홈", "보내기", "연결됨") val icons = listOf( painterResource(id = R.drawable.ic_home_fill_32), - painterResource(id = R.drawable.ic_home_fill_32), + painterResource(id = R.drawable.ic_signal_fill_32), painterResource(id = R.drawable.ic_chat_fill_32) ) val selectedIcons = listOf( painterResource(id = R.drawable.ic_home_fill_32), - painterResource(id = R.drawable.ic_home_fill_32), + painterResource(id = R.drawable.ic_signal_fill_32), painterResource(id = R.drawable.ic_chat_fill_32) ) SsamDTheme { @@ -91,10 +130,17 @@ fun KeyLinkNavigationBarPreview() { selected = selectedItem == index, onClick = { selectedItem = index }, icon = { - Icon( - painter = icons[index], - contentDescription = "" - ) + BadgedBox(badge = { + Badge { + Text(text = "8") + } + }) { + Icon( + painter = icons[index], + contentDescription = "" + ) + } + }, selectedIcon = { Icon( @@ -103,7 +149,10 @@ fun KeyLinkNavigationBarPreview() { ) }, label = { - Text(text = item) + Text( + text = item, + style = Caption2 + ) } ) } diff --git a/presentation/src/main/res/drawable/ic_signal_fill_32.xml b/presentation/src/main/res/drawable/ic_signal_fill_32.xml new file mode 100644 index 000000000..9d9b15379 --- /dev/null +++ b/presentation/src/main/res/drawable/ic_signal_fill_32.xml @@ -0,0 +1,10 @@ + + + diff --git a/presentation/src/main/res/values/strings.xml b/presentation/src/main/res/values/strings.xml index 9630796b6..bb93dd6c5 100644 --- a/presentation/src/main/res/values/strings.xml +++ b/presentation/src/main/res/values/strings.xml @@ -3,8 +3,8 @@ 홈 - 시그널 보내기 - 채팅 + 보내기 + 연결됨 최대 10자 입력 닫기 둘러보기