refactor: Bottom-Navigation auf custom Surface+Row+IconButton umstellen
Material NavigationBar/NavigationBarItem hat hardcoded interne Paddings (16dp oben/unten + 32dp Indicator), die bei height-Constraints die Icons proportional schrumpfen lassen. Custom-Lösung mit: - Surface + NavigationBarDefaults.containerColor/Elevation - windowInsetsPadding(NavigationBarDefaults.windowInsets) für System-Insets - Row mit IconButtons (standard 48dp Touch-Target, 24dp Icons) - padding(vertical = 4.dp) statt 24dp Material-Default Icons behalten volle Größe, Bar ist deutlich kompakter.
This commit is contained in:
parent
4397159d62
commit
28b7e83297
1 changed files with 39 additions and 20 deletions
|
|
@ -1,17 +1,21 @@
|
||||||
package de.krisenvorrat.app.ui
|
package de.krisenvorrat.app.ui
|
||||||
|
|
||||||
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
import androidx.compose.foundation.layout.Column
|
import androidx.compose.foundation.layout.Column
|
||||||
|
import androidx.compose.foundation.layout.Row
|
||||||
import androidx.compose.foundation.layout.consumeWindowInsets
|
import androidx.compose.foundation.layout.consumeWindowInsets
|
||||||
import androidx.compose.foundation.layout.height
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.layout.windowInsetsPadding
|
||||||
import androidx.compose.material.icons.Icons
|
import androidx.compose.material.icons.Icons
|
||||||
import androidx.compose.material.icons.filled.SwapHoriz
|
import androidx.compose.material.icons.filled.SwapHoriz
|
||||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||||
import androidx.compose.material3.Icon
|
import androidx.compose.material3.Icon
|
||||||
import androidx.compose.material3.IconButton
|
import androidx.compose.material3.IconButton
|
||||||
import androidx.compose.material3.NavigationBar
|
import androidx.compose.material3.MaterialTheme
|
||||||
import androidx.compose.material3.NavigationBarItem
|
import androidx.compose.material3.NavigationBarDefaults
|
||||||
import androidx.compose.material3.Scaffold
|
import androidx.compose.material3.Scaffold
|
||||||
|
import androidx.compose.material3.Surface
|
||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
import androidx.compose.material3.TopAppBar
|
import androidx.compose.material3.TopAppBar
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
|
|
@ -19,6 +23,7 @@ import androidx.compose.runtime.getValue
|
||||||
import androidx.compose.runtime.mutableStateOf
|
import androidx.compose.runtime.mutableStateOf
|
||||||
import androidx.compose.runtime.remember
|
import androidx.compose.runtime.remember
|
||||||
import androidx.compose.runtime.setValue
|
import androidx.compose.runtime.setValue
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
import androidx.hilt.navigation.compose.hiltViewModel
|
import androidx.hilt.navigation.compose.hiltViewModel
|
||||||
|
|
@ -74,33 +79,47 @@ internal fun MainScreen() {
|
||||||
},
|
},
|
||||||
bottomBar = {
|
bottomBar = {
|
||||||
if (showBottomBar) {
|
if (showBottomBar) {
|
||||||
NavigationBar(modifier = Modifier.height(56.dp)) {
|
Surface(
|
||||||
TopLevelDestination.entries.forEach { destination ->
|
color = NavigationBarDefaults.containerColor,
|
||||||
val isSelected = currentDestination?.hasRoute(destination.route::class) == true
|
tonalElevation = NavigationBarDefaults.Elevation
|
||||||
|
) {
|
||||||
|
Row(
|
||||||
|
modifier = Modifier
|
||||||
|
.fillMaxWidth()
|
||||||
|
.windowInsetsPadding(NavigationBarDefaults.windowInsets)
|
||||||
|
.padding(vertical = 4.dp),
|
||||||
|
horizontalArrangement = Arrangement.SpaceEvenly,
|
||||||
|
verticalAlignment = Alignment.CenterVertically
|
||||||
|
) {
|
||||||
|
TopLevelDestination.entries.forEach { destination ->
|
||||||
|
val isSelected = currentDestination?.hasRoute(destination.route::class) == true
|
||||||
|
|
||||||
NavigationBarItem(
|
IconButton(
|
||||||
selected = isSelected,
|
onClick = {
|
||||||
onClick = {
|
navController.navigate(destination.route) {
|
||||||
navController.navigate(destination.route) {
|
popUpTo(navController.graph.findStartDestination().id) {
|
||||||
popUpTo(navController.graph.findStartDestination().id) {
|
saveState = true
|
||||||
saveState = true
|
}
|
||||||
|
launchSingleTop = true
|
||||||
|
restoreState = true
|
||||||
}
|
}
|
||||||
launchSingleTop = true
|
|
||||||
restoreState = true
|
|
||||||
}
|
}
|
||||||
},
|
) {
|
||||||
icon = {
|
|
||||||
Icon(
|
Icon(
|
||||||
imageVector = if (isSelected) {
|
imageVector = if (isSelected) {
|
||||||
destination.selectedIcon
|
destination.selectedIcon
|
||||||
} else {
|
} else {
|
||||||
destination.unselectedIcon
|
destination.unselectedIcon
|
||||||
},
|
},
|
||||||
contentDescription = destination.label
|
contentDescription = destination.label,
|
||||||
|
tint = if (isSelected) {
|
||||||
|
MaterialTheme.colorScheme.primary
|
||||||
|
} else {
|
||||||
|
MaterialTheme.colorScheme.onSurfaceVariant
|
||||||
|
}
|
||||||
)
|
)
|
||||||
},
|
}
|
||||||
label = null
|
}
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue