Skip to content

Commit c04e1af

Browse files
suqi8suqi8
committed
feat: Add FloatingNavigationBar and update UITest and ThirdPage
- Add `FloatingNavigationBar` composable for creating customizable floating navigation bars with various display modes. - Add `FloatingNavigationBarShowMode` enum for controlling item display: icon only, text only, or both. - Add `useFloatingBottomBar`, `floatingBottomBarPosition` and `floatingBottomBarShowMode` state and related control in UITest and ThirdPage. - Update `ThirdPage` and `UITest` to add Floating BottomBar control. - Add `horizontalAlignment` and `showMode` params in `FloatingNavigationBar`. - Add `defaultWindowInsetsPadding`, `cornerRadius`, `outSidePadding`, `showBorder` param for `FloatingNavigationBar`. - Add `SmoothRoundedCornerShape` and `Platform` utils class. - Update `NavigationBar` and `FloatingNavigationBar` paddings and arrangements. - Update `NavigationBar` to add new color scheme. - Update example `Preview` to add more params.
1 parent a19408b commit c04e1af

File tree

4 files changed

+270
-26
lines changed

4 files changed

+270
-26
lines changed

‎example/src/androidMain/kotlin/Preview.android.kt‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,12 @@ fun ThirdPagePreview() {
5959
{},
6060
false,
6161
{},
62+
0,
63+
{},
64+
0,
65+
{},
66+
false,
67+
{},
6268
7,
6369
{},
6470
0,

‎example/src/commonMain/kotlin/ThirdPage.kt‎

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,14 @@ fun ThirdPage(
3535
onShowTopAppBarChange: (Boolean) -> Unit,
3636
showBottomBar: Boolean,
3737
onShowBottomBarChange: (Boolean) -> Unit,
38-
useFloatingToolbar: Boolean,
39-
onUseFloatingToolbarChange: (Boolean) -> Unit,
38+
useFloatingBottomBar: Boolean,
39+
onUseFloatingBottomBarChange: (Boolean) -> Unit,
40+
floatingBottomBarShowMode: Int,
41+
onFloatingBottomBarShowModeChange: (Int) -> Unit,
42+
floatingBottomBarPosition: Int,
43+
onFloatingBottomBarPositionChange: (Int) -> Unit,
44+
showFloatingToolbar: Boolean,
45+
onShowFloatingToolbarChange: (Boolean) -> Unit,
4046
floatingToolbarPosition: Int,
4147
onFloatingToolbarPositionChange: (Int) -> Unit,
4248
floatingToolbarOrientation: Int,
@@ -74,16 +80,45 @@ fun ThirdPage(
7480
)
7581
SuperSwitch(
7682
title = "Show Bottom Bar",
77-
checked = if (useFloatingToolbar) false else showBottomBar,
83+
checked = showBottomBar,
7884
onCheckedChange = onShowBottomBarChange
7985
)
86+
AnimatedVisibility(
87+
visible = showBottomBar
88+
) {
89+
Column {
90+
SuperSwitch(
91+
title = "Use Floating Bottom Bar",
92+
checked = useFloatingBottomBar,
93+
onCheckedChange = onUseFloatingBottomBarChange
94+
)
95+
AnimatedVisibility(
96+
visible = useFloatingBottomBar
97+
) {
98+
Column {
99+
SuperDropdown(
100+
title = "BottomBar Toolbar Show Mode",
101+
items = listOf("IconOnly", "IconAndText", "TextOnly"),
102+
selectedIndex = floatingBottomBarShowMode,
103+
onSelectedIndexChange = onFloatingBottomBarShowModeChange
104+
)
105+
SuperDropdown(
106+
title = "Floating BottomBar Position",
107+
items = listOf("Center", "Start", "End"),
108+
selectedIndex = floatingBottomBarPosition,
109+
onSelectedIndexChange = onFloatingBottomBarPositionChange
110+
)
111+
}
112+
}
113+
}
114+
}
80115
SuperSwitch(
81-
title = "Use Floating Toolbar",
82-
checked = useFloatingToolbar,
83-
onCheckedChange = onUseFloatingToolbarChange
116+
title = "Show Floating Toolbar Bar",
117+
checked = showFloatingToolbar,
118+
onCheckedChange = onShowFloatingToolbarChange
84119
)
85120
AnimatedVisibility(
86-
visible = useFloatingToolbar
121+
visible = showFloatingToolbar
87122
) {
88123
Column {
89124
SuperDropdown(

‎example/src/commonMain/kotlin/UITest.kt‎

Lines changed: 64 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ import androidx.compose.runtime.mutableStateOf
3131
import androidx.compose.runtime.remember
3232
import androidx.compose.runtime.rememberCoroutineScope
3333
import androidx.compose.runtime.setValue
34+
import androidx.compose.ui.Alignment
35+
import androidx.compose.ui.Alignment.Companion.CenterHorizontally
3436
import androidx.compose.ui.Modifier
3537
import androidx.compose.ui.graphics.Color
3638
import androidx.compose.ui.graphics.vector.ImageVector
@@ -46,6 +48,8 @@ import dev.chrisbanes.haze.hazeSource
4648
import kotlinx.coroutines.launch
4749
import top.yukonga.miuix.kmp.basic.FabPosition
4850
import top.yukonga.miuix.kmp.basic.FloatingActionButton
51+
import top.yukonga.miuix.kmp.basic.FloatingNavigationBar
52+
import top.yukonga.miuix.kmp.basic.FloatingNavigationBarShowMode
4953
import top.yukonga.miuix.kmp.basic.FloatingToolbar
5054
import top.yukonga.miuix.kmp.basic.FloatingToolbarItem
5155
import top.yukonga.miuix.kmp.basic.FloatingToolbarOrientation
@@ -78,7 +82,10 @@ data class UIState(
7882
val showFPSMonitor: Boolean = false,
7983
val showTopAppBar: Boolean = true,
8084
val showBottomBar: Boolean = true,
81-
val useFloatingToolbar: Boolean = false,
85+
val useFloatingBottomBar: Boolean = false,
86+
val floatingBottomBarShowMode: Int = 0,
87+
val floatingBottomBarPosition: Int = 0,
88+
val showFloatingToolbar: Boolean = false,
8289
val floatingToolbarPosition: Int = 7,
8390
val showFloatingActionButton: Boolean = true,
8491
val floatingActionButtonPosition: Int = 2,
@@ -154,27 +161,59 @@ fun UITest(
154161
},
155162
bottomBar = {
156163
AnimatedVisibility(
157-
visible = uiState.showBottomBar && !uiState.useFloatingToolbar,
164+
visible = uiState.showBottomBar,
158165
enter = fadeIn() + expandVertically(),
159166
exit = fadeOut() + shrinkVertically()
160167
) {
161-
NavigationBar(
162-
modifier = Modifier
163-
.hazeEffect(hazeState) {
164-
style = hazeStyle
165-
blurRadius = 25.dp
166-
noiseFactor = 0f
168+
AnimatedVisibility(!uiState.useFloatingBottomBar) {
169+
NavigationBar(
170+
modifier = Modifier
171+
.hazeEffect(hazeState) {
172+
style = hazeStyle
173+
blurRadius = 25.dp
174+
noiseFactor = 0f
175+
},
176+
items = navigationItem,
177+
selected = selectedPage,
178+
onClick = { index ->
179+
if (index in 0..navigationItem.lastIndex) {
180+
coroutineScope.launch {
181+
pagerState.animateScrollToPage(index)
182+
}
183+
}
184+
}
185+
)
186+
}
187+
AnimatedVisibility(uiState.useFloatingBottomBar) {
188+
FloatingNavigationBar(
189+
modifier = Modifier
190+
.hazeEffect(hazeState) {
191+
style = hazeStyle
192+
blurRadius = 25.dp
193+
noiseFactor = 0f
194+
},
195+
items = navigationItem,
196+
selected = selectedPage,
197+
showMode = when (uiState.floatingBottomBarShowMode) {
198+
0 -> FloatingNavigationBarShowMode.IconOnly
199+
1 -> FloatingNavigationBarShowMode.IconAndText
200+
else -> FloatingNavigationBarShowMode.TextOnly
167201
},
168-
items = navigationItem,
169-
selected = selectedPage,
170-
onClick = { index ->
171-
if (index in 0..navigationItem.lastIndex) {
172-
coroutineScope.launch {
173-
pagerState.animateScrollToPage(index)
202+
horizontalAlignment = when (uiState.floatingBottomBarPosition) {
203+
0 -> CenterHorizontally
204+
1 -> Alignment.Start
205+
2 -> Alignment.End
206+
else -> CenterHorizontally
207+
},
208+
onClick = { index ->
209+
if (index in 0..navigationItem.lastIndex) {
210+
coroutineScope.launch {
211+
pagerState.animateScrollToPage(index)
212+
}
174213
}
175214
}
176-
}
177-
)
215+
)
216+
}
178217
}
179218
},
180219
floatingActionButton = {
@@ -200,7 +239,7 @@ fun UITest(
200239
},
201240
floatingToolbar = {
202241
AnimatedVisibility(
203-
visible = uiState.useFloatingToolbar,
242+
visible = uiState.showFloatingToolbar,
204243
enter = fadeIn() + slideInVertically(initialOffsetY = { it }) + expandVertically(),
205244
exit = fadeOut() + slideOutVertically(targetOffsetY = { it }) + shrinkVertically()
206245
) {
@@ -417,8 +456,14 @@ fun AppHorizontalPager(
417456
onShowTopAppBarChange = { onUiStateChange(uiState.copy(showTopAppBar = it)) },
418457
showBottomBar = uiState.showBottomBar,
419458
onShowBottomBarChange = { onUiStateChange(uiState.copy(showBottomBar = it)) },
420-
useFloatingToolbar = uiState.useFloatingToolbar,
421-
onUseFloatingToolbarChange = { onUiStateChange(uiState.copy(useFloatingToolbar = it)) },
459+
showFloatingToolbar = uiState.showFloatingToolbar,
460+
onShowFloatingToolbarChange = { onUiStateChange(uiState.copy(showFloatingToolbar = it)) },
461+
useFloatingBottomBar = uiState.useFloatingBottomBar,
462+
onUseFloatingBottomBarChange = { onUiStateChange(uiState.copy(useFloatingBottomBar = it)) },
463+
floatingBottomBarShowMode = uiState.floatingBottomBarShowMode,
464+
onFloatingBottomBarShowModeChange = { onUiStateChange(uiState.copy(floatingBottomBarShowMode = it)) },
465+
floatingBottomBarPosition = uiState.floatingBottomBarPosition,
466+
onFloatingBottomBarPositionChange = { onUiStateChange(uiState.copy(floatingBottomBarPosition = it)) },
422467
floatingToolbarPosition = uiState.floatingToolbarPosition,
423468
onFloatingToolbarPositionChange = { onUiStateChange(uiState.copy(floatingToolbarPosition = it)) },
424469
floatingToolbarOrientation = uiState.floatingToolbarOrientation,

0 commit comments

Comments
 (0)