Skip to content

Commit afdfdae

Browse files
Nico1eKimNico1eKim
authored
Merge pull request #28 from Nico1eKim/ui/#27-top_app_bar
[UI] top app bar 컴포넌트 구현완료
2 parents eedc71a + df2b167 commit afdfdae

File tree

10 files changed

+539
-34
lines changed

10 files changed

+539
-34
lines changed

‎.idea/deploymentTargetSelector.xml‎

Lines changed: 1 addition & 23 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,6 @@ import androidx.compose.foundation.layout.padding
1010
import androidx.compose.foundation.shape.RoundedCornerShape
1111
import androidx.compose.material3.Text
1212
import androidx.compose.runtime.Composable
13-
import androidx.compose.runtime.getValue
14-
import androidx.compose.runtime.mutableStateOf
15-
import androidx.compose.runtime.remember
16-
import androidx.compose.runtime.setValue
1713
import androidx.compose.ui.Alignment
1814
import androidx.compose.ui.Modifier
1915
import androidx.compose.ui.res.stringResource
@@ -27,19 +23,17 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
2723
fun HeaderButton(
2824
modifier: Modifier = Modifier,
2925
text: String,
26+
enabled: Boolean = false,
3027
onClick: () -> Unit = {},
3128
) {
32-
var isClicked by remember { mutableStateOf(false) }
33-
3429
Box(
3530
modifier = modifier
3631
.background(
37-
color = if (isClicked) colors.Purple else colors.Grey02,
32+
color = if (enabled) colors.Purple else colors.Grey02,
3833
shape = RoundedCornerShape(20.dp)
3934
)
40-
.clickable {
41-
isClicked = !isClicked
42-
onClick()
35+
.let {
36+
if (enabled) it.clickable(onClick = onClick) else it
4337
}
4438
.padding(vertical = 4.dp, horizontal = 12.dp),
4539
contentAlignment = Alignment.Center,
@@ -60,8 +54,17 @@ private fun HeaderButtonPreview() {
6054
horizontalAlignment = Alignment.CenterHorizontally,
6155
verticalArrangement = Arrangement.Center
6256
) {
57+
// 비활성 상태
58+
HeaderButton(
59+
text = stringResource(R.string.finish),
60+
enabled = false
61+
)
62+
63+
// 활성 상태
6364
HeaderButton(
6465
text = stringResource(R.string.finish),
66+
enabled = true,
67+
onClick = { }
6568
)
6669
}
6770
}

‎app/src/main/java/com/texthip/thip/ui/common/topappbar/BookTopAppBar.kt‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
package com.texthip.thip.ui.common.topappbar
2+
3+
import androidx.compose.material3.ExperimentalMaterial3Api
4+
import androidx.compose.material3.Icon
5+
import androidx.compose.material3.IconButton
6+
import androidx.compose.material3.TopAppBar
7+
import androidx.compose.material3.TopAppBarDefaults
8+
import androidx.compose.runtime.Composable
9+
import androidx.compose.ui.graphics.Color
10+
import androidx.compose.ui.res.painterResource
11+
import androidx.compose.ui.tooling.preview.Preview
12+
import com.texthip.thip.R
13+
import com.texthip.thip.ui.common.view.CountingBar
14+
import com.texthip.thip.ui.theme.ThipTheme
15+
16+
@OptIn(ExperimentalMaterial3Api::class)
17+
@Composable
18+
fun BookTopAppBar(
19+
count: Int = 0,
20+
onLeftClick: () -> Unit,
21+
onRightClick: () -> Unit,
22+
) {
23+
TopAppBar(
24+
navigationIcon = {
25+
IconButton(onClick = onLeftClick) {
26+
Icon(
27+
painter = painterResource(R.drawable.ic_arrow_back),
28+
contentDescription = "Back Button",
29+
tint = Color.Unspecified
30+
)
31+
}
32+
},
33+
title = {
34+
CountingBar(
35+
count = count,
36+
)
37+
},
38+
actions = {
39+
IconButton(onClick = onRightClick) {
40+
Icon(
41+
painter = painterResource(R.drawable.ic_more),
42+
contentDescription = "More Options",
43+
tint = Color.Unspecified
44+
)
45+
}
46+
},
47+
colors = TopAppBarDefaults.topAppBarColors(
48+
containerColor = Color.Transparent,
49+
),
50+
)
51+
}
52+
53+
@Preview(showBackground = false)
54+
@Composable
55+
private fun BookTopAppBarPreview() {
56+
ThipTheme {
57+
BookTopAppBar(
58+
onLeftClick = { },
59+
onRightClick = { },
60+
count = 210
61+
)
62+
}
63+
}

‎app/src/main/java/com/texthip/thip/ui/common/topappbar/DefaultTopAppBar.kt‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
package com.texthip.thip.ui.common.topappbar
2+
3+
import androidx.compose.foundation.layout.Column
4+
import androidx.compose.material3.CenterAlignedTopAppBar
5+
import androidx.compose.material3.ExperimentalMaterial3Api
6+
import androidx.compose.material3.Icon
7+
import androidx.compose.material3.IconButton
8+
import androidx.compose.material3.Text
9+
import androidx.compose.material3.TopAppBarDefaults
10+
import androidx.compose.runtime.Composable
11+
import androidx.compose.ui.graphics.Color
12+
import androidx.compose.ui.res.painterResource
13+
import androidx.compose.ui.res.stringResource
14+
import androidx.compose.ui.tooling.preview.Preview
15+
import com.texthip.thip.R
16+
import com.texthip.thip.ui.theme.ThipTheme.colors
17+
import com.texthip.thip.ui.theme.ThipTheme.typography
18+
19+
@OptIn(ExperimentalMaterial3Api::class)
20+
@Composable
21+
fun DefaultTopAppBar(
22+
title: String = stringResource(R.string.page_name),
23+
isTitleVisible: Boolean = true,
24+
isRightIconVisible: Boolean = false,
25+
onLeftClick: () -> Unit,
26+
onRightClick: () -> Unit = {},
27+
) {
28+
CenterAlignedTopAppBar(
29+
navigationIcon = {
30+
IconButton(onClick = onLeftClick) {
31+
Icon(
32+
painter = painterResource(R.drawable.ic_arrow_back),
33+
contentDescription = "Back Button",
34+
tint = Color.Unspecified
35+
)
36+
}
37+
},
38+
title = {
39+
if (isTitleVisible) {
40+
Text(
41+
text = title,
42+
color = colors.White,
43+
style = typography.bigtitle_b700_s22_h24
44+
)
45+
}
46+
},
47+
actions = {
48+
if (isRightIconVisible) {
49+
IconButton(onClick = onRightClick) {
50+
Icon(
51+
painter = painterResource(R.drawable.ic_more),
52+
contentDescription = "More Options",
53+
tint = Color.Unspecified
54+
)
55+
}
56+
}
57+
},
58+
colors = TopAppBarDefaults.topAppBarColors(
59+
containerColor = Color.Transparent,
60+
),
61+
)
62+
}
63+
64+
@Preview
65+
@Composable
66+
private fun DefaultTopAppBarPreview() {
67+
Column {
68+
DefaultTopAppBar(
69+
onLeftClick = {},
70+
)
71+
DefaultTopAppBar(
72+
isRightIconVisible = true,
73+
onLeftClick = {},
74+
onRightClick = {},
75+
)
76+
DefaultTopAppBar(
77+
isRightIconVisible = true,
78+
isTitleVisible = false,
79+
onLeftClick = {},
80+
onRightClick = {},
81+
)
82+
DefaultTopAppBar(
83+
isRightIconVisible = false,
84+
isTitleVisible = false,
85+
onLeftClick = {},
86+
)
87+
}
88+
}

‎app/src/main/java/com/texthip/thip/ui/common/topappbar/FeedListTopAppBar.kt‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
package com.texthip.thip.ui.common.topappbar
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Row
5+
import androidx.compose.foundation.layout.width
6+
import androidx.compose.material3.CenterAlignedTopAppBar
7+
import androidx.compose.material3.ExperimentalMaterial3Api
8+
import androidx.compose.material3.Icon
9+
import androidx.compose.material3.IconButton
10+
import androidx.compose.material3.Text
11+
import androidx.compose.material3.TopAppBarDefaults
12+
import androidx.compose.runtime.Composable
13+
import androidx.compose.ui.Modifier
14+
import androidx.compose.ui.graphics.Color
15+
import androidx.compose.ui.res.painterResource
16+
import androidx.compose.ui.res.stringResource
17+
import androidx.compose.ui.text.style.TextOverflow
18+
import androidx.compose.ui.tooling.preview.Preview
19+
import androidx.compose.ui.unit.dp
20+
import com.texthip.thip.R
21+
import com.texthip.thip.ui.theme.ThipTheme.colors
22+
import com.texthip.thip.ui.theme.ThipTheme.typography
23+
24+
@OptIn(ExperimentalMaterial3Api::class)
25+
@Composable
26+
fun FeedListTopAppBar(
27+
nickname: String = "ThipUser 01ThipUser 01",
28+
isRightIconVisible: Boolean = false,
29+
onLeftClick: () -> Unit,
30+
onRightClick: () -> Unit = {},
31+
) {
32+
CenterAlignedTopAppBar(
33+
navigationIcon = {
34+
IconButton(onClick = onLeftClick) {
35+
Icon(
36+
painter = painterResource(R.drawable.ic_arrow_back),
37+
contentDescription = "Back Button",
38+
tint = Color.Unspecified
39+
)
40+
}
41+
},
42+
title = {
43+
Row(
44+
horizontalArrangement = Arrangement.spacedBy(8.dp)
45+
) {
46+
Text(
47+
text = nickname,
48+
color = colors.White,
49+
style = typography.bigtitle_b700_s22_h24,
50+
modifier = Modifier.width(100.dp),
51+
maxLines = 1,
52+
overflow = TextOverflow.Ellipsis,
53+
)
54+
Text(
55+
text = stringResource(R.string.subscriber),
56+
color = colors.White,
57+
style = typography.bigtitle_b700_s22_h24,
58+
modifier = Modifier.width(100.dp),
59+
maxLines = 1
60+
)
61+
}
62+
},
63+
actions = {
64+
if (isRightIconVisible) {
65+
IconButton(onClick = {
66+
onRightClick()
67+
}) {
68+
Icon(
69+
painter = painterResource(R.drawable.ic_more),
70+
contentDescription = "More Options",
71+
tint = Color.Unspecified
72+
)
73+
}
74+
}
75+
},
76+
colors = TopAppBarDefaults.topAppBarColors(
77+
containerColor = Color.Transparent,
78+
),
79+
)
80+
}
81+
82+
@Preview
83+
@Composable
84+
private fun FeedListTopAppBarPreview() {
85+
FeedListTopAppBar(
86+
isRightIconVisible = true,
87+
onLeftClick = {},
88+
onRightClick = {}
89+
)
90+
}

0 commit comments

Comments
 (0)