Skip to content

Commit 6e4b1e7

Browse files
Gael-AndroidGael-Android
authored
Navigation 구현 (#17)
* add : navigation 구현 * chore : 선택,비선택 아이콘을 없애고 단일 아이콘에 색상 변경만으로 선택여부 지정 * chore : 클릭시 인디케이션 제거 * chore : 리뷰 반영 * delete : 불필요 home.xml 제거 * chore : deploymentTargetSelector.xml gitignore 시킴 * chore : Divider 추가 * chore : 리뷰 반영 * 피드백 반영
1 parent b884ab5 commit 6e4b1e7

File tree

3 files changed

+162
-0
lines changed

3 files changed

+162
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
/.idea/workspace.xml
99
/.idea/navEditor.xml
1010
/.idea/assetWizardSettings.xml
11+
/.idea/deploymentTargetSelector.xml
1112
.DS_Store
1213
/build
1314
/captures

‎app/src/main/kotlin/com/yourssu/handy/demo/NavigationPreview.kt

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
package com.yourssu.handy.demo
2+
3+
import androidx.compose.foundation.layout.Column
4+
import androidx.compose.foundation.layout.Spacer
5+
import androidx.compose.runtime.Composable
6+
import androidx.compose.ui.Modifier
7+
import androidx.compose.ui.tooling.preview.Preview
8+
import com.yourssu.handy.compose.BottomNavItem
9+
import com.yourssu.handy.compose.Navigation
10+
import com.yourssu.handy.compose.icons.HandyIcons
11+
import com.yourssu.handy.compose.icons.filled.Home
12+
13+
@Preview(showBackground = true)
14+
@Composable
15+
fun NavigationPreview() {
16+
val items = listOf(
17+
BottomNavItem(
18+
icon = HandyIcons.Filled.Home,
19+
label = "Label"
20+
),
21+
BottomNavItem(
22+
icon = HandyIcons.Filled.Home,
23+
label = "Label"
24+
),
25+
BottomNavItem(
26+
icon = HandyIcons.Filled.Home,
27+
label = "Label"
28+
),
29+
BottomNavItem(
30+
icon = HandyIcons.Filled.Home,
31+
label = "Label"
32+
),
33+
BottomNavItem(
34+
icon = HandyIcons.Filled.Home,
35+
label = "Label"
36+
),
37+
)
38+
39+
Column {
40+
Spacer(modifier = Modifier.weight(1f))
41+
Navigation(
42+
items = items,
43+
selectedIndex = 0,
44+
onItemSelected = {}
45+
)
46+
}
47+
}

‎compose/src/main/kotlin/com/yourssu/handy/compose/Navigation.kt

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
package com.yourssu.handy.compose
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.clickable
5+
import androidx.compose.foundation.interaction.MutableInteractionSource
6+
import androidx.compose.foundation.layout.Arrangement
7+
import androidx.compose.foundation.layout.Column
8+
import androidx.compose.foundation.layout.Row
9+
import androidx.compose.foundation.layout.fillMaxSize
10+
import androidx.compose.foundation.layout.fillMaxWidth
11+
import androidx.compose.foundation.layout.height
12+
import androidx.compose.runtime.Composable
13+
import androidx.compose.runtime.remember
14+
import androidx.compose.ui.Alignment
15+
import androidx.compose.ui.Modifier
16+
import androidx.compose.ui.graphics.vector.ImageVector
17+
import androidx.compose.ui.unit.dp
18+
import com.yourssu.handy.compose.foundation.HandyTypography
19+
20+
/**
21+
* BottomNavItem : 하단 네비게이션 바의 아이템을 정의하는 데이터 클래스 입니다.
22+
*
23+
* @param icon 아이템의 아이콘
24+
* @param label 아이템의 라벨
25+
*/
26+
data class BottomNavItem(
27+
val icon: ImageVector,
28+
val label: String? = null
29+
)
30+
31+
/**
32+
* BottomNavItem : 하단 네비게이션 바의 아이템 Composable 함수 입니다.
33+
*
34+
* @param item 하단 네비게이션 바의 아이템
35+
* @param isSelected 선택되었는지 여부
36+
* @param onClick 클릭 시 실행되는 함수
37+
* @param modifier Modifier
38+
*/
39+
@Composable
40+
private fun BottomNavItem(
41+
item: BottomNavItem,
42+
isSelected: Boolean,
43+
onClick: () -> Unit,
44+
modifier: Modifier = Modifier
45+
) {
46+
val color =
47+
if (isSelected) HandyTheme.colors.textBasicPrimary else HandyTheme.colors.textBasicDisabled
48+
49+
Column(
50+
modifier = modifier
51+
.clickable(
52+
interactionSource = remember { MutableInteractionSource() },
53+
indication = null,
54+
onClick = onClick
55+
),
56+
horizontalAlignment = Alignment.CenterHorizontally,
57+
verticalArrangement = Arrangement.Center
58+
) {
59+
Icon(
60+
item.icon,
61+
iconSize = IconSize.M,
62+
tint = color
63+
)
64+
65+
if (item.label != null) {
66+
Text(
67+
text = item.label,
68+
style = HandyTypography.C1Rg11,
69+
color = color
70+
)
71+
}
72+
}
73+
}
74+
75+
/**
76+
* Navigation : 하단 네비게이션 바 Composable 함수 입니다.
77+
*
78+
* @param items 하단 네비게이션 바의 아이템 리스트. item의 개수는 3개 이상 5개 이하여야 합니다.
79+
* @param selectedIndex 선택된 아이템의 인덱스
80+
* @param onItemSelected 아이템 선택 시 실행되는 함수
81+
*
82+
*/
83+
@Composable
84+
fun Navigation(
85+
items: List<BottomNavItem>,
86+
selectedIndex: Int,
87+
onItemSelected: (Int) -> Unit,
88+
modifier: Modifier = Modifier
89+
) {
90+
require(items.size in 3..5) { "Items size must be between 3 and 5" }
91+
92+
Surface(
93+
modifier = modifier
94+
.fillMaxWidth()
95+
.height(56.dp)
96+
.background(HandyTheme.colors.bgBasicDefault),
97+
) {
98+
Divider(dividerThickness = DividerThickness.ONE)
99+
Row(
100+
modifier = Modifier.fillMaxSize(),
101+
horizontalArrangement = Arrangement.SpaceBetween,
102+
verticalAlignment = Alignment.CenterVertically
103+
) {
104+
items.forEachIndexed { index, item ->
105+
BottomNavItem(
106+
item = item,
107+
isSelected = index == selectedIndex,
108+
modifier = Modifier.weight(1f),
109+
onClick = { onItemSelected(index) }
110+
)
111+
}
112+
}
113+
}
114+
}

0 commit comments

Comments
 (0)