[Main] 메인 화면 BottomBar 구조 추가 #26
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <?xml version="1.0" encoding="utf-8"?> | ||
| <resources> | ||
|
|
||
| <style name="Theme.DroidKnights2023" parent="android:Theme.Material.Light.NoActionBar" /> | ||
|
|
||
| <style name="Theme.DroidKnights2023.NoStatusBar"> | ||
| <item name="android:statusBarColor">@android:color/transparent</item> | ||
| <item name="android:windowLightStatusBar">true</item> | ||
| </style> | ||
|
|
||
| </resources> |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| package com.droidknights.app2023.feature.main | ||
|
|
||
| import androidx.compose.foundation.background | ||
| import androidx.compose.foundation.border | ||
| import androidx.compose.foundation.interaction.MutableInteractionSource | ||
| import androidx.compose.foundation.layout.Arrangement | ||
| import androidx.compose.foundation.layout.Box | ||
| import androidx.compose.foundation.layout.Row | ||
| import androidx.compose.foundation.layout.RowScope | ||
| import androidx.compose.foundation.layout.fillMaxHeight | ||
| import androidx.compose.foundation.layout.fillMaxSize | ||
| import androidx.compose.foundation.layout.fillMaxWidth | ||
| import androidx.compose.foundation.layout.height | ||
| import androidx.compose.foundation.layout.navigationBarsPadding | ||
| import androidx.compose.foundation.layout.padding | ||
| import androidx.compose.foundation.layout.size | ||
| import androidx.compose.foundation.selection.selectable | ||
| import androidx.compose.foundation.shape.RoundedCornerShape | ||
| import androidx.compose.material3.Icon | ||
| import androidx.compose.material3.Scaffold | ||
| 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.graphics.Color | ||
| import androidx.compose.ui.res.painterResource | ||
| import androidx.compose.ui.unit.dp | ||
|
|
||
| @Composable | ||
| internal fun MainScreen() { | ||
| var currentTab by remember { mutableStateOf(MainTab.HOME) } | ||
| Scaffold( | ||
| content = { padding -> | ||
| Box( | ||
| modifier = Modifier | ||
| .fillMaxSize() | ||
| .background(Color(0xFFF9F9F9)) | ||
| .padding(padding) | ||
| ) { | ||
| // TODO: 컨텐츠 추가 | ||
| } | ||
| }, | ||
| bottomBar = { | ||
| MainBottomBar( | ||
| tabs = MainTab.values().toList(), | ||
| currentTab = currentTab, | ||
| onTabSelected = { currentTab = it } | ||
| ) | ||
| }, | ||
| ) | ||
| } | ||
|
|
||
| @Composable | ||
| private fun MainBottomBar( | ||
| tabs: List<MainTab>, | ||
| currentTab: MainTab, | ||
| onTabSelected: (MainTab) -> Unit, | ||
| ) { | ||
| Row( | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .height(56.dp) | ||
| .navigationBarsPadding() | ||
| .padding(start = 8.dp, end = 8.dp, bottom = 28.dp) | ||
| .border( | ||
| width = 1.dp, | ||
| color = Color(0xFFDCDCDC), // lightgray | ||
| shape = RoundedCornerShape(size = 28.dp) | ||
| ) | ||
| .background(color = Color(0xFFFFFFFF), shape = RoundedCornerShape(28.dp)) | ||
|
There was a problem hiding this comment. Color 정보 테마 지정하면서 지정하는게 좋겠네요. There was a problem hiding this comment. 아직 디자인 정의가 안되어있는 상태입니다. |
||
| .padding(horizontal = 28.dp), | ||
| horizontalArrangement = Arrangement.spacedBy(8.dp), | ||
| ) { | ||
| tabs.forEach { tab -> | ||
| MainBottomBarItem( | ||
| selected = tab == currentTab, | ||
| onClick = { onTabSelected(tab) }, | ||
| resId = tab.iconResId, | ||
| ) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @Composable | ||
| private fun RowScope.MainBottomBarItem( | ||
| selected: Boolean, | ||
| onClick: () -> Unit, | ||
| resId: Int, | ||
| ) { | ||
| Box( | ||
| modifier = Modifier | ||
| .weight(1f) | ||
| .fillMaxHeight() | ||
| .selectable( | ||
| selected = selected, | ||
| indication = null, | ||
| role = null, | ||
| interactionSource = remember { MutableInteractionSource() }, | ||
| onClick = onClick, | ||
| ), | ||
| contentAlignment = Alignment.Center, | ||
| ) { | ||
| Icon( | ||
| painter = painterResource(id = resId), | ||
| contentDescription = null, | ||
| tint = if (selected) Color(0xFF49F300) else Color(0xFFDCDCDC), | ||
| modifier = Modifier.size(34.dp), | ||
|
There was a problem hiding this comment. icon 사이즈를 늘리는것과 box의 사이즈 늘리는게 좀 달라서 There was a problem hiding this comment.
|
||
| ) | ||
| } | ||
| } | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| package com.droidknights.app2023.feature.main | ||
|
|
||
| internal enum class MainTab( | ||
| val iconResId: Int, | ||
| ) { | ||
| SETTING(R.drawable.ic_setting), | ||
| HOME(R.drawable.ic_home), | ||
| TEMP(R.drawable.ic_temp), | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <vector xmlns:android="http://schemas.android.com/apk/res/android" | ||
| android:width="34dp" | ||
| android:height="34dp" | ||
| android:viewportWidth="34" | ||
| android:viewportHeight="34"> | ||
| <path | ||
| android:pathData="M25.824,12.821C25.741,12.743 25.657,12.666 25.574,12.591L28.346,9.952C28.429,9.873 28.495,9.779 28.54,9.676C28.584,9.573 28.608,9.462 28.608,9.35C28.608,9.239 28.584,9.128 28.54,9.025C28.495,8.922 28.429,8.828 28.346,8.749C28.263,8.67 28.164,8.607 28.056,8.565C27.948,8.522 27.832,8.5 27.714,8.5C27.597,8.5 27.481,8.522 27.372,8.565C27.264,8.607 27.166,8.67 27.083,8.749L24.181,11.512C22.08,10.104 19.573,9.35 17.004,9.354C14.435,9.357 11.93,10.118 9.834,11.532L6.917,8.749C6.75,8.59 6.523,8.5 6.286,8.5C6.049,8.5 5.822,8.59 5.654,8.749C5.486,8.909 5.392,9.125 5.392,9.35C5.392,9.576 5.486,9.792 5.654,9.952L8.451,12.614C7.201,13.741 6.207,15.099 5.527,16.604C4.848,18.11 4.498,19.732 4.5,21.37V23.8C4.5,24.251 4.688,24.683 5.023,25.002C5.358,25.321 5.812,25.5 6.286,25.5H27.714C28.188,25.5 28.642,25.321 28.977,25.002C29.312,24.683 29.5,24.251 29.5,23.8V21.25C29.504,19.683 29.182,18.131 28.551,16.684C27.92,15.238 26.993,13.924 25.824,12.821ZM12.982,21.25C12.717,21.25 12.458,21.175 12.238,21.035C12.018,20.895 11.846,20.696 11.745,20.463C11.643,20.23 11.617,19.974 11.669,19.726C11.72,19.479 11.848,19.252 12.035,19.074C12.222,18.895 12.461,18.774 12.721,18.725C12.981,18.676 13.25,18.701 13.495,18.797C13.739,18.894 13.948,19.057 14.096,19.267C14.243,19.476 14.321,19.723 14.321,19.975C14.321,20.313 14.18,20.638 13.929,20.877C13.678,21.116 13.337,21.25 12.982,21.25ZM21.018,21.25C20.753,21.25 20.494,21.175 20.274,21.035C20.053,20.895 19.882,20.696 19.781,20.463C19.679,20.23 19.653,19.974 19.704,19.726C19.756,19.479 19.883,19.252 20.071,19.074C20.258,18.895 20.497,18.774 20.757,18.725C21.016,18.676 21.286,18.701 21.53,18.797C21.775,18.894 21.984,19.057 22.131,19.267C22.279,19.476 22.357,19.723 22.357,19.975C22.357,20.313 22.216,20.638 21.965,20.877C21.714,21.116 21.373,21.25 21.018,21.25Z" | ||
| android:fillColor="#DCDCDC" /> | ||
| </vector> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <vector xmlns:android="http://schemas.android.com/apk/res/android" | ||
| android:width="34dp" | ||
| android:height="34dp" | ||
| android:viewportWidth="34" | ||
| android:viewportHeight="34"> | ||
| <path | ||
| android:pathData="M5,11.346C5,11.092 5.099,10.849 5.274,10.67C5.449,10.49 5.687,10.389 5.935,10.389H10.28C10.481,9.699 10.895,9.094 11.46,8.663C12.025,8.233 12.711,8 13.415,8C14.12,8 14.806,8.233 15.371,8.663C15.936,9.094 16.35,9.699 16.551,10.389H26.506C26.754,10.389 26.992,10.49 27.167,10.67C27.343,10.849 27.441,11.092 27.441,11.346C27.441,11.599 27.343,11.843 27.167,12.022C26.992,12.201 26.754,12.302 26.506,12.302H16.551C16.35,12.993 15.936,13.598 15.371,14.028C14.806,14.459 14.12,14.691 13.415,14.691C12.711,14.691 12.025,14.459 11.46,14.028C10.895,13.598 10.481,12.993 10.28,12.302H5.935C5.687,12.302 5.449,12.201 5.274,12.022C5.099,11.843 5,11.599 5,11.346ZM26.506,21.865H24.032C23.83,21.174 23.416,20.569 22.851,20.138C22.286,19.708 21.6,19.475 20.896,19.475C20.191,19.475 19.505,19.708 18.94,20.138C18.375,20.569 17.961,21.174 17.76,21.865H5.935C5.687,21.865 5.449,21.965 5.274,22.145C5.099,22.324 5,22.567 5,22.821C5,23.074 5.099,23.318 5.274,23.497C5.449,23.676 5.687,23.777 5.935,23.777H17.76C17.961,24.468 18.375,25.073 18.94,25.503C19.505,25.934 20.191,26.167 20.896,26.167C21.6,26.167 22.286,25.934 22.851,25.503C23.416,25.073 23.83,24.468 24.032,23.777H26.506C26.754,23.777 26.992,23.676 27.167,23.497C27.343,23.318 27.441,23.074 27.441,22.821C27.441,22.567 27.343,22.324 27.167,22.145C26.992,21.965 26.754,21.865 26.506,21.865Z" | ||
| android:fillColor="#DCDCDC" /> | ||
| </vector> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <vector xmlns:android="http://schemas.android.com/apk/res/android" | ||
| android:width="34dp" | ||
| android:height="34dp" | ||
| android:viewportWidth="34" | ||
| android:viewportHeight="34"> | ||
| <path | ||
| android:pathData="M27.804,16.547L17.721,6.28C17.635,6.193 17.525,6.122 17.401,6.074C17.276,6.025 17.139,6 17,6C16.861,6 16.724,6.025 16.599,6.074C16.475,6.122 16.365,6.193 16.279,6.28L6.196,16.547C6.069,16.676 6,16.836 6,17C6,17.164 6.069,17.324 6.196,17.453L16.279,27.72C16.365,27.807 16.475,27.878 16.599,27.926C16.724,27.975 16.861,28 17,28C17.139,28 17.276,27.975 17.401,27.926C17.525,27.878 17.635,27.807 17.721,27.72L27.804,17.453C27.931,17.324 28,17.164 28,17C28,16.836 27.931,16.676 27.804,16.547ZM17.917,19.528V8.853L25.642,16.719L17.917,19.528ZM16.083,19.528L8.358,16.719L16.083,8.853V19.528ZM16.083,21.139V25.147L9.961,18.913L16.083,21.139Z" | ||
| android:fillColor="#DCDCDC" /> | ||
| </vector> |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
modifier를 외부에서 주입하고있긴한데 내부에서 padding 지정과 외부에서도 padding과 같은 지정을 할 수 있어서
사실 좋은 방법은 아니에요.
그리고 modifier의 순서는 매우 중요하지만 여기서는 fil/height가 먼저와도 상관은 없어요. padding이 어차피 색상 먹기 전에만 지정하면 아웃사이드의 padding이고, 색상 먹고 난 다음엔 inside의 padding이라서
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
xml에서
layout_widthlayout_height을 최상단에 쓰듯이 이 속성들도 가장 앞에 위치하는게 눈에 잘 들어오네요1d024ab
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
현재는 Modifier가 외부에서 주입이 필요하지 않으니 제거해두겠습니다.
098c5cb