Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ADD/#15] TopAppBar #17

Merged
merged 12 commits into from
Jul 7, 2024
Merged

[ADD/#15] TopAppBar #17

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
2c463df
[ADD/#15] TerningTopAppBar 추가
arinming Jul 6, 2024
2f58463
[FEAT/#15] TerningTopAppBar 구현
arinming Jul 6, 2024
10074f4
[FEAT/#15] CenterAlignedTopAppBar로 변경하여 구현
arinming Jul 6, 2024
3cd0c30
[DELETE/#15] BackWithTitleTopAppBar 삭제
arinming Jul 6, 2024
0d0eb2d
[FEAT/#15] 뒤로가기 버튼 TopAppBar 구현
arinming Jul 6, 2024
224a7f3
[FEAT/#15] 로고 TopAppBar 구현
arinming Jul 6, 2024
3b15164
[FEAT/#15] MyPageTopAppBar 구현
arinming Jul 6, 2024
2b42794
[FEAT/#15] 루트에 따라 TopAppBar 설정
arinming Jul 6, 2024
4362d0f
[MOVE/#15] core designsystem 패키지로 이동
arinming Jul 7, 2024
31bf20d
Merge remote-tracking branch 'origin/develop' into add/#15-top-app-bar
arinming Jul 7, 2024
95051f8
[FEAT/#15] 가운데 정렬 수정 및 null 체크 로직 변경
arinming Jul 7, 2024
dc5d081
[FEAT/#15] 초기 경로 수정
arinming Jul 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions core/src/main/java/com/terning/core/designsystem/topappbar/BackButtonTopAppBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
package com.terning.core.designsystem.topappbar

import androidx.compose.runtime.Composable

@Composable
fun BackButtonTopAppBar(
title: String, onBackButtonClick: (() -> Unit),
) {
TerningTopAppBar(
title = title,
showBackButton = true,
onBackButtonClick = { onBackButtonClick.invoke() },
)
}
20 changes: 20 additions & 0 deletions core/src/main/java/com/terning/core/designsystem/topappbar/LogoTopAppBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
package com.terning.core.designsystem.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.core.R

@Composable
fun LogoTopAppBar() {
TerningTopAppBar(
showBackButton = false,
customActions = listOf {
Icon(
painter = painterResource(id = R.drawable.ic_logo),
contentDescription = stringResource(id = R.string.ic_logo),
)
}
)
}
41 changes: 41 additions & 0 deletions core/src/main/java/com/terning/core/designsystem/topappbar/MyPageTopAppBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
package com.terning.core.designsystem.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.R
import com.terning.core.designsystem.theme.TerningTypography

@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_right),
contentDescription = stringResource(id = R.string.ic_20_right)
)
}
}
}
)
)
}
58 changes: 58 additions & 0 deletions core/src/main/java/com/terning/core/designsystem/topappbar/TerningTopAppBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
package com.terning.core.designsystem.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.R
import com.terning.core.designsystem.theme.TerningTypography

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TerningTopAppBar(
title: String = "",
showBackButton: Boolean = false,
customActions: List<@Composable () -> Unit> = emptyList(),
onBackButtonClick: () -> Unit = {},
) {
CenterAlignedTopAppBar(
title = {
Box(Modifier.fillMaxWidth()) {
Text(
text = title,
modifier = Modifier.align(Alignment.Center),
textAlign = TextAlign.Center,
style = TerningTypography().title2
)
}
},
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()
}
},
)
}
13 changes: 13 additions & 0 deletions core/src/main/res/drawable/ic_back.xml
View file
Open in desktop
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>
13 changes: 13 additions & 0 deletions core/src/main/res/drawable/ic_logo.xml
View file
Open in desktop
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>
13 changes: 13 additions & 0 deletions core/src/main/res/drawable/ic_right.xml
View file
Open in desktop
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>
10 changes: 10 additions & 0 deletions core/src/main/res/values/strings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- ContentDescription-->
<string name="ic_back">뒤로가기 버튼</string>
<string name="ic_logo">탑 바 로고</string>
<string name="ic_20_right">오른쪽 버튼</string>

<!-- MyPage-->
<string name="my_page_top_app_bar">프로필 수정</string>
</resources>
2 changes: 1 addition & 1 deletion feature/src/main/java/com/terning/feature/main/MainNavigator.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ class MainNavigator(
}
}

private fun navigateUp() {
fun navigateUp() {
navController.navigateUp()
}

Expand Down
12 changes: 12 additions & 0 deletions feature/src/main/java/com/terning/feature/main/MainScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,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.core.designsystem.topappbar.LogoTopAppBar
import com.terning.core.designsystem.topappbar.MyPageTopAppBar
import com.terning.core.designsystem.topappbar.TerningTopAppBar
import com.terning.feature.home.navigation.homeNavGraph
import com.terning.feature.mypage.navigation.myPageNavGraph
import com.terning.feature.onboarding.signin.navigation.signInNavGraph
Expand All @@ -35,6 +38,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()
}
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 MainScreen에서 탑바를 넣어준 이유가 있을까용,,?

바텀바는 깜빡임을 방지하기 위해 보이는 부분과 안 보이는 부분을 나눴었는데
이 탑바들은 각 screen마다 관리해줘도 될 것 같아서요!!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MainScreen에서 Scaffold로 네 개의 화면을 감싸주고 있는데 해당 Scaffold의 topbar 속성에 한 번에 적용하려고 했습니당
각 screen마다 관리를 해주게 되면 Screen마다 Scaffold로 한 번 더 감싸서 topbar로 넣어주어야 하는 걸로 알고 있어요..!
그러면 메인스크린+각스크린 해서 Scaffold가 두번 감싸지게 되어서,, 일단 저렇게 구현해보았습니당.

그.. Column에 바로

`
@composable
fun HomeScreen() {
Column(modifier = Modifier.fillMaxSize()) {
LogoTopAppBar()
Text(text = "홈 스크린")
}
}

`

이렇게 때려넣으면

image

요롷게 위에가 붕뜨는 현상이.,,. ㅠㅜ

Copy link
Contributor Author

@arinming arinming Jul 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

예를 들어서 유빈이가 만든 signin 스크린은 바텀네비가 없고 메인스크린에서 관리되는 애가 아니니까 따로 Scaffold로 감싸서 topbar를 넣어주면 되는데 메인 스크린에서 바텀네비로 관리되는 애들은 scaffold로 두번 감싸기 or 메인에서 관리하기
로 해야할 것 같은데 어떻게 생각하는징!?!

더 좋은 방법을 아직 내 머리론 찾지 못했다 ㅜ ㅜ

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

카톡방에서 이야기 나눈대로 Scaffold로 한 번 더 감싸서 관리하도록 해요!!
해보구 불편한 점 발견되면 수정해보는 걸로 합시다!
탑바 관련해서 수정되면 한 번 더 알려주세용!

bottomBar = {
MainBottomBar(
isVisible = navigator.showBottomBar(),
Expand Down
Loading