NavigationBar: Added icons animation.

This commit is contained in:
acclorite 2024-07-16 15:25:02 +03:00
parent 7f785c8f1b
commit de81a4121e
2 changed files with 42 additions and 23 deletions

View file

@ -1,12 +1,13 @@
package ua.acclorite.book_story.presentation.components.bottom_navigation_bar package ua.acclorite.book_story.presentation.components.bottom_navigation_bar
import androidx.compose.animation.Crossfade
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBarItem import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
@ -30,12 +31,6 @@ fun RowScope.BottomNavigationBarItem(
isSelected: Boolean, isSelected: Boolean,
onClick: () -> Unit onClick: () -> Unit
) { ) {
val icon = remember(isSelected) {
if (isSelected) item.selectedIcon
else item.unselectedIcon
}
NavigationBarItem( NavigationBarItem(
label = { label = {
CustomTooltip( CustomTooltip(
@ -56,11 +51,25 @@ fun RowScope.BottomNavigationBarItem(
text = stringResource(id = item.tooltip), text = stringResource(id = item.tooltip),
padding = 32.dp padding = 32.dp
) { ) {
Icon( Crossfade(
painter = painterResource(id = icon), targetState = isSelected,
contentDescription = null, animationSpec = tween(300),
modifier = Modifier.size(24.dp) label = ""
) ) {
if (it) {
Icon(
painter = painterResource(id = item.selectedIcon),
contentDescription = null,
modifier = Modifier.size(24.dp)
)
} else {
Icon(
painter = painterResource(id = item.unselectedIcon),
contentDescription = null,
modifier = Modifier.size(24.dp)
)
}
}
} }
}, },
modifier = modifier modifier = modifier

View file

@ -1,11 +1,12 @@
package ua.acclorite.book_story.presentation.components.custom_navigation_rail package ua.acclorite.book_story.presentation.components.custom_navigation_rail
import androidx.compose.animation.Crossfade
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationRailItem import androidx.compose.material3.NavigationRailItem
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
@ -29,11 +30,6 @@ fun CustomNavigationRailItem(
isSelected: Boolean, isSelected: Boolean,
onClick: () -> Unit onClick: () -> Unit
) { ) {
val icon = remember(isSelected) {
if (isSelected) item.selectedIcon
else item.unselectedIcon
}
NavigationRailItem( NavigationRailItem(
label = { label = {
CustomTooltip( CustomTooltip(
@ -54,11 +50,25 @@ fun CustomNavigationRailItem(
text = stringResource(id = item.tooltip), text = stringResource(id = item.tooltip),
padding = 16.dp padding = 16.dp
) { ) {
Icon( Crossfade(
painter = painterResource(id = icon), targetState = isSelected,
contentDescription = null, animationSpec = tween(300),
modifier = Modifier.size(24.dp) label = ""
) ) {
if (it) {
Icon(
painter = painterResource(id = item.selectedIcon),
contentDescription = null,
modifier = Modifier.size(24.dp)
)
} else {
Icon(
painter = painterResource(id = item.unselectedIcon),
contentDescription = null,
modifier = Modifier.size(24.dp)
)
}
}
} }
}, },
modifier = modifier modifier = modifier