[ADD/#15] TopAppBar #17
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| package com.terning.feature.component.topappbar | ||
|
|
||
| import androidx.compose.runtime.Composable | ||
| import com.terning.feature.main.MainNavigator | ||
|
|
||
| @Composable | ||
| fun BackButtonTopAppBar( | ||
| title: String, navigator: MainNavigator, | ||
| ) { | ||
| TerningTopAppBar( | ||
| title = title, | ||
| showBackButton = true, | ||
| onBackButtonClick = { navigator.navigateUp() }, | ||
| ) | ||
| } |
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,20 @@ | ||
| package com.terning.feature.component.topappbar | ||
|
|
||
| import androidx.compose.material3.Icon | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.res.painterResource | ||
| import androidx.compose.ui.res.stringResource | ||
| import com.terning.feature.R | ||
|
|
||
| @Composable | ||
| fun LogoTopAppBar() { | ||
| TerningTopAppBar( | ||
| showBackButton = false, | ||
| customActions = listOf { | ||
| Icon( | ||
| painter = painterResource(id = R.drawable.ic_logo), | ||
| contentDescription = stringResource(id = R.string.ic_logo), | ||
| ) | ||
| } | ||
| ) | ||
| } |
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,41 @@ | ||
| package com.terning.feature.component.topappbar | ||
|
|
||
| import androidx.compose.foundation.layout.Row | ||
| import androidx.compose.material3.Icon | ||
| import androidx.compose.material3.IconButton | ||
| import androidx.compose.material3.Text | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.Alignment | ||
| import androidx.compose.ui.res.painterResource | ||
| import androidx.compose.ui.res.stringResource | ||
| import androidx.compose.ui.text.style.TextAlign | ||
| import com.terning.core.designsystem.theme.TerningTypography | ||
| import com.terning.feature.R | ||
|
|
||
| @Composable | ||
| fun MyPageTopAppBar() { | ||
| TerningTopAppBar( | ||
| showBackButton = false, | ||
| customActions = listOf( | ||
| {}, | ||
| { | ||
| Row( | ||
| verticalAlignment = Alignment.CenterVertically | ||
| ) { | ||
| Text( | ||
| text = stringResource(id = R.string.my_page_top_app_bar), | ||
| style = TerningTypography().button3, | ||
| textAlign = TextAlign.Center | ||
| ) | ||
| IconButton(onClick = { | ||
| }) { | ||
| Icon( | ||
| painter = painterResource(id = R.drawable.ic_20_right), | ||
| contentDescription = stringResource(id = R.string.ic_20_right) | ||
| ) | ||
| } | ||
| } | ||
| } | ||
| ) | ||
| ) | ||
| } | ||
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,58 @@ | ||||||||||
| package com.terning.feature.component.topappbar | ||||||||||
|
|
||||||||||
| import androidx.compose.foundation.layout.Box | ||||||||||
| import androidx.compose.foundation.layout.fillMaxWidth | ||||||||||
| import androidx.compose.material3.CenterAlignedTopAppBar | ||||||||||
| import androidx.compose.material3.ExperimentalMaterial3Api | ||||||||||
| import androidx.compose.material3.Icon | ||||||||||
| import androidx.compose.material3.IconButton | ||||||||||
| import androidx.compose.material3.Text | ||||||||||
| import androidx.compose.runtime.Composable | ||||||||||
| import androidx.compose.ui.Alignment | ||||||||||
| import androidx.compose.ui.Modifier | ||||||||||
| import androidx.compose.ui.res.painterResource | ||||||||||
| import androidx.compose.ui.res.stringResource | ||||||||||
| import androidx.compose.ui.text.style.TextAlign | ||||||||||
| import com.terning.core.designsystem.theme.TerningTypography | ||||||||||
| import com.terning.feature.R | ||||||||||
|
|
||||||||||
| @OptIn(ExperimentalMaterial3Api::class) | ||||||||||
| @Composable | ||||||||||
| fun TerningTopAppBar( | ||||||||||
| title: String = "", | ||||||||||
| showBackButton: Boolean = false, | ||||||||||
| customActions: List<@Composable (() -> Unit)>? = null, | ||||||||||
| onBackButtonClick: (() -> Unit)? = null, | ||||||||||
| ) { | ||||||||||
|
There was a problem hiding this comment.
Suggested change
이런 식으로 작성하면 null 체크를 따로 안 해줘도 될 것 같아요! There was a problem hiding this comment. 확실하진 않지만 customActions도 비슷하게 바꿔줄 수 있을 것 같아요! There was a problem hiding this comment. 체고야,, customActions까지 바로 적용해씁니다 |
||||||||||
| CenterAlignedTopAppBar( | ||||||||||
| title = { | ||||||||||
| Box(Modifier.fillMaxWidth()) { | ||||||||||
| Text( | ||||||||||
| text = title, | ||||||||||
| modifier = Modifier.align(Alignment.Center), | ||||||||||
| textAlign = TextAlign.Center, | ||||||||||
| style = TerningTypography().title2 | ||||||||||
|
There was a problem hiding this comment. 무지성으로 TerningTypography 자동완성해서 임포트했는데 되더라구요,,,헐! ㅠ |
||||||||||
| ) | ||||||||||
| } | ||||||||||
| }, | ||||||||||
| navigationIcon = { | ||||||||||
| if (showBackButton) { | ||||||||||
| IconButton(onClick = { | ||||||||||
| onBackButtonClick?.invoke() | ||||||||||
| }) { | ||||||||||
| Icon( | ||||||||||
| painter = painterResource(id = R.drawable.ic_back), | ||||||||||
| contentDescription = stringResource(id = R.string.ic_back) | ||||||||||
| ) | ||||||||||
| } | ||||||||||
| } else { | ||||||||||
| customActions?.getOrNull(0)?.invoke() | ||||||||||
| } | ||||||||||
| }, | ||||||||||
| actions = { | ||||||||||
| customActions?.drop(1)?.forEach { customAction -> | ||||||||||
| customAction() | ||||||||||
| } | ||||||||||
| }, | ||||||||||
|
There was a problem hiding this comment. 오! 이 속성들이 궁금해서 찾아봤는데 There was a problem hiding this comment. 맞아용! Tmi를 덧붙이면,,, 기본 TopAppBar로 구현했을 때 navigationIcon, actions 중에 하나만 있는 경우 타이틀이 가운데 정렬되지 않고 아이콘 사이즈 만큼 왼쪽, 또는 오른쪽으로 치우치는 이슈가 있더라구요 ㅜㅜ 그래서 TopAppBar대신 타이틀을 중앙으로 정렬해주는 CenterAlignedTopAppBar 적용해주었삽니다. |
||||||||||
| ) | ||||||||||
| } | ||||||||||
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 |
|---|---|---|
|
|
@@ -46,7 +46,7 @@ class MainNavigator( | |
| } | ||
| } | ||
|
|
||
| fun navigateUp() { | ||
| navController.navigateUp() | ||
| } | ||
|
|
||
|
|
||
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 |
|---|---|---|
|
|
@@ -7,13 +7,10 @@ import androidx.compose.foundation.layout.Arrangement | |
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.padding | ||
| import androidx.compose.material3.Icon | ||
| import androidx.compose.material3.NavigationBar | ||
| import androidx.compose.material3.NavigationBarItem | ||
| import androidx.compose.material3.Scaffold | ||
| import androidx.compose.material3.Text | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.res.painterResource | ||
|
|
@@ -25,6 +22,9 @@ import com.terning.core.designsystem.theme.Grey300 | |
| import com.terning.core.designsystem.theme.TerningMain | ||
| import com.terning.core.designsystem.theme.White | ||
| import com.terning.feature.calendar.navigation.calendarNavGraph | ||
| import com.terning.feature.component.topappbar.LogoTopAppBar | ||
| import com.terning.feature.component.topappbar.MyPageTopAppBar | ||
| import com.terning.feature.component.topappbar.TerningTopAppBar | ||
| import com.terning.feature.home.navigation.homeNavGraph | ||
| import com.terning.feature.mypage.navigation.myPageNavGraph | ||
| import com.terning.feature.search.navigation.searchNavGraph | ||
|
|
@@ -36,6 +36,15 @@ fun MainScreen( | |
| navigator: MainNavigator = rememberMainNavigator(), | ||
| ) { | ||
| Scaffold( | ||
| topBar = { | ||
| when (navigator.currentTab) { | ||
| MainTab.HOME -> LogoTopAppBar() | ||
| MainTab.CALENDAR -> TerningTopAppBar() | ||
| MainTab.SEARCH -> LogoTopAppBar() | ||
| MainTab.MY_PAGE -> MyPageTopAppBar() | ||
| null -> LogoTopAppBar() | ||
| } | ||
| }, | ||
|
There was a problem hiding this comment. 혹시 MainScreen에서 탑바를 넣어준 이유가 있을까용,,? 바텀바는 깜빡임을 방지하기 위해 보이는 부분과 안 보이는 부분을 나눴었는데 There was a problem hiding this comment. MainScreen에서 Scaffold로 네 개의 화면을 감싸주고 있는데 해당 Scaffold의 topbar 속성에 한 번에 적용하려고 했습니당 그.. Column에 바로 ` ` 이렇게 때려넣으면 
요롷게 위에가 붕뜨는 현상이.,,. ㅠㅜ There was a problem hiding this comment. 예를 들어서 유빈이가 만든 signin 스크린은 바텀네비가 없고 메인스크린에서 관리되는 애가 아니니까 따로 Scaffold로 감싸서 topbar를 넣어주면 되는데 메인 스크린에서 바텀네비로 관리되는 애들은 scaffold로 두번 감싸기 or 메인에서 관리하기 더 좋은 방법을 아직 내 머리론 찾지 못했다 ㅜ ㅜ There was a problem hiding this comment. 카톡방에서 이야기 나눈대로 Scaffold로 한 번 더 감싸서 관리하도록 해요!! |
||
| bottomBar = { | ||
| MainBottomBar( | ||
| isVisible = navigator.showBottomBar(), | ||
|
|
||
|
There was a problem hiding this comment. 네이밍 다른 친구들이랑 통일되게 하면 더 좋을 것 같아요...! There was a problem hiding this comment. 예리하당! 고쳤습니당 근데 저 right 버튼이 캘린더에는 24사이즈로 있는 것 같아서 석준오빠랑 얘기함 해봐야할 것 같긴 하네용,, |
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,13 @@ | ||
| <vector xmlns:android="http://schemas.android.com/apk/res/android" | ||
| android:width="20dp" | ||
| android:height="20dp" | ||
| android:viewportWidth="20" | ||
| android:viewportHeight="20"> | ||
| <group> | ||
| <clip-path | ||
| android:pathData="M20,0l-20,0l-0,20l20,0z"/> | ||
| <path | ||
| android:pathData="M13.399,10.092C13.393,9.879 13.318,9.697 13.148,9.534L8.251,4.744C8.119,4.605 7.944,4.536 7.743,4.536C7.335,4.536 7.015,4.85 7.015,5.258C7.015,5.459 7.096,5.641 7.234,5.786L11.648,10.092L7.234,14.399C7.096,14.537 7.015,14.719 7.015,14.92C7.015,15.334 7.335,15.648 7.743,15.648C7.944,15.648 8.119,15.579 8.251,15.441L13.148,10.651C13.318,10.488 13.399,10.306 13.399,10.092Z" | ||
| android:fillColor="#666666"/> | ||
| </group> | ||
| </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,13 @@ | ||
| <vector xmlns:android="http://schemas.android.com/apk/res/android" | ||
| android:width="32dp" | ||
| android:height="32dp" | ||
| android:viewportWidth="32" | ||
| android:viewportHeight="32"> | ||
| <group> | ||
| <clip-path | ||
| android:pathData="M0,0h32v32h-32z"/> | ||
| <path | ||
| android:pathData="M10.561,16.748C10.571,16.406 10.692,16.115 10.963,15.854L18.798,8.19C19.009,7.969 19.29,7.858 19.612,7.858C20.264,7.858 20.777,8.36 20.777,9.013C20.777,9.335 20.646,9.626 20.425,9.857L13.364,16.748L20.425,23.638C20.646,23.859 20.777,24.151 20.777,24.472C20.777,25.135 20.264,25.637 19.612,25.637C19.29,25.637 19.009,25.527 18.798,25.306L10.963,17.642C10.692,17.381 10.561,17.089 10.561,16.748Z" | ||
| android:fillColor="#373737"/> | ||
| </group> | ||
| </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,13 @@ | ||
| <vector xmlns:android="http://schemas.android.com/apk/res/android" | ||
| android:width="149dp" | ||
| android:height="36dp" | ||
| android:viewportWidth="149" | ||
| android:viewportHeight="36"> | ||
| <path | ||
| android:pathData="M147.52,1H2.07L74.8,17.82L147.52,1ZM147.9,1.31L75.66,18.02L147.9,34.73V1.31ZM73.93,18.02L1.95,1.37V34.67L73.93,18.02ZM2.26,35L74.8,18.22L147.33,35H2.26ZM0.95,34.92V35V36H1.95H147.9H148.9V35V1V0H147.9H1.95H0.95V1V1.12L0.9,1.13L0.95,1.14V34.9L0.9,34.91L0.95,34.92Z" | ||
| android:fillColor="#666666" | ||
| android:fillType="evenOdd"/> | ||
| <path | ||
| android:pathData="M59.97,13.51H60.8V21.25H64.82V22H59.97V13.51ZM73.03,17.76C73.03,18.63 72.87,19.4 72.56,20.06C72.25,20.71 71.81,21.22 71.25,21.58C70.69,21.94 70.06,22.12 69.34,22.12C68.63,22.12 67.99,21.94 67.43,21.58C66.87,21.22 66.44,20.71 66.12,20.05C65.81,19.39 65.65,18.63 65.65,17.76C65.65,16.88 65.81,16.12 66.12,15.46C66.44,14.8 66.87,14.29 67.43,13.94C67.99,13.58 68.63,13.4 69.34,13.4C70.06,13.4 70.69,13.58 71.25,13.94C71.81,14.29 72.25,14.8 72.56,15.46C72.87,16.12 73.03,16.88 73.03,17.76ZM66.47,17.76C66.47,18.49 66.59,19.13 66.84,19.67C67.08,20.21 67.43,20.62 67.86,20.91C68.3,21.19 68.79,21.33 69.34,21.33C69.89,21.33 70.39,21.19 70.82,20.91C71.26,20.62 71.6,20.21 71.85,19.67C72.09,19.13 72.21,18.49 72.21,17.76C72.21,17.02 72.09,16.39 71.84,15.85C71.6,15.31 71.26,14.89 70.82,14.61C70.39,14.32 69.89,14.18 69.34,14.18C68.79,14.18 68.3,14.32 67.86,14.61C67.43,14.89 67.09,15.3 66.84,15.84C66.59,16.38 66.47,17.02 66.47,17.76ZM80.55,16.17C80.45,15.78 80.28,15.44 80.05,15.15C79.81,14.85 79.52,14.61 79.17,14.44C78.82,14.27 78.43,14.18 77.99,14.18C77.45,14.18 76.96,14.32 76.52,14.61C76.09,14.89 75.75,15.3 75.51,15.84C75.26,16.38 75.14,17.02 75.14,17.76C75.14,18.49 75.26,19.13 75.51,19.67C75.76,20.21 76.1,20.62 76.54,20.91C76.98,21.19 77.48,21.33 78.05,21.33C78.55,21.33 79,21.22 79.39,21C79.78,20.78 80.09,20.46 80.31,20.05C80.53,19.64 80.65,19.16 80.65,18.61H78.23V17.86H81.47V18.59C81.47,19.3 81.32,19.92 81.03,20.45C80.74,20.99 80.33,21.4 79.81,21.69C79.3,21.97 78.71,22.12 78.05,22.12C77.31,22.12 76.66,21.94 76.1,21.58C75.54,21.23 75.1,20.72 74.79,20.06C74.48,19.4 74.33,18.63 74.33,17.76C74.33,16.88 74.48,16.11 74.79,15.46C75.1,14.8 75.53,14.29 76.08,13.94C76.64,13.58 77.27,13.4 77.99,13.4C78.59,13.4 79.13,13.52 79.61,13.77C80.1,14.01 80.49,14.35 80.8,14.77C81.12,15.19 81.32,15.65 81.41,16.17H80.55ZM90.19,17.76C90.19,18.63 90.03,19.4 89.72,20.06C89.4,20.71 88.97,21.22 88.41,21.58C87.85,21.94 87.21,22.12 86.5,22.12C85.78,22.12 85.15,21.94 84.59,21.58C84.03,21.22 83.6,20.71 83.28,20.05C82.97,19.39 82.81,18.63 82.81,17.76C82.81,16.88 82.97,16.12 83.28,15.46C83.6,14.8 84.03,14.29 84.59,13.94C85.15,13.58 85.78,13.4 86.5,13.4C87.21,13.4 87.85,13.58 88.41,13.94C88.97,14.29 89.4,14.8 89.72,15.46C90.03,16.12 90.19,16.88 90.19,17.76ZM83.62,17.76C83.62,18.49 83.75,19.13 83.99,19.67C84.24,20.21 84.58,20.62 85.02,20.91C85.45,21.19 85.95,21.33 86.5,21.33C87.05,21.33 87.55,21.19 87.98,20.91C88.42,20.62 88.76,20.21 89,19.67C89.25,19.13 89.37,18.49 89.37,17.76C89.37,17.02 89.25,16.39 89,15.85C88.75,15.31 88.41,14.89 87.98,14.61C87.55,14.32 87.05,14.18 86.5,14.18C85.95,14.18 85.46,14.32 85.02,14.61C84.59,14.89 84.25,15.3 84,15.84C83.75,16.38 83.62,17.02 83.62,17.76Z" | ||
| android:fillColor="#171717"/> | ||
| </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
Oops, something went wrong.
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.
여기 빈
{ }가 생기는 이유는 TerningTopAppBar에서 customActions의 인덱스1부터 실행되게 했기 떄문일까요..?혹시 customActions에 대해 설명해주실 수 있을까요,,ㅜㅜ
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.
마이페이지는 위와 같이 '프로필 수정' 이라는 텍스트 + 오른쪽 아이콘 으로 이루어져있고
로고 탑 바는 navigation이 따로 없는 이미지..?! 형식의 아이콘임을 확인할 수 있는데
navigationIcon 자리에는 BackButton이 기본으로 들어가는 게 직관적일 것 같아서, 로고를 navigationIcon에 넣기보다는 actions으로 빼야겠다는 생각을 했습니당.
그래서 LogoTopAppBar의 액션에는 list 첫번째에 바로 로고 이미지를 넣고, 액션 리스트의 첫번째 컴포저블은 탑 바의 왼쪽 (네비게이션아이콘 자리) 에 들어갈 수 있게 해두었습니다!
액션 리스트의 두번째 컴포저블부터는 타이틀의 왼쪽에 순서대로 배치되는 형식입니다. 마이페이지에는 왼쪽에 로고가 없어서 첫번째 컴포저블을 {}로 둔 것입니당.!
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.
자세한 설명 감사합니다! 탑바 적용할 때 참고해서 개발하도록 할게요!