NavigationBar: Added icons animation.
This commit is contained in:
parent
7f785c8f1b
commit
de81a4121e
2 changed files with 42 additions and 23 deletions
|
|
@ -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
|
||||||
) {
|
) {
|
||||||
|
Crossfade(
|
||||||
|
targetState = isSelected,
|
||||||
|
animationSpec = tween(300),
|
||||||
|
label = ""
|
||||||
|
) {
|
||||||
|
if (it) {
|
||||||
Icon(
|
Icon(
|
||||||
painter = painterResource(id = icon),
|
painter = painterResource(id = item.selectedIcon),
|
||||||
contentDescription = null,
|
contentDescription = null,
|
||||||
modifier = Modifier.size(24.dp)
|
modifier = Modifier.size(24.dp)
|
||||||
)
|
)
|
||||||
|
} else {
|
||||||
|
Icon(
|
||||||
|
painter = painterResource(id = item.unselectedIcon),
|
||||||
|
contentDescription = null,
|
||||||
|
modifier = Modifier.size(24.dp)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
modifier = modifier
|
modifier = modifier
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
) {
|
) {
|
||||||
|
Crossfade(
|
||||||
|
targetState = isSelected,
|
||||||
|
animationSpec = tween(300),
|
||||||
|
label = ""
|
||||||
|
) {
|
||||||
|
if (it) {
|
||||||
Icon(
|
Icon(
|
||||||
painter = painterResource(id = icon),
|
painter = painterResource(id = item.selectedIcon),
|
||||||
contentDescription = null,
|
contentDescription = null,
|
||||||
modifier = Modifier.size(24.dp)
|
modifier = Modifier.size(24.dp)
|
||||||
)
|
)
|
||||||
|
} else {
|
||||||
|
Icon(
|
||||||
|
painter = painterResource(id = item.unselectedIcon),
|
||||||
|
contentDescription = null,
|
||||||
|
modifier = Modifier.size(24.dp)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
modifier = modifier
|
modifier = modifier
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue