Updated on 2026-08-14
This commit is contained in:
Tangem
parent
0b7e1f6bb5
commit
85e61772a1
8 changed files with 253 additions and 71 deletions
|
|
@ -2,16 +2,10 @@ package com.tangem.core.ui.components.appbar
|
|||
|
||||
import androidx.annotation.DrawableRes
|
||||
import androidx.compose.animation.*
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.material.Icon
|
||||
import androidx.compose.material.Text
|
||||
import androidx.compose.material.ripple.rememberRipple
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.res.painterResource
|
||||
|
|
@ -29,57 +23,31 @@ fun AppBarWithBackButtonAndIcon(
|
|||
onIconClick: (() -> Unit)? = null,
|
||||
backgroundColor: Color = TangemTheme.colors.background.secondary,
|
||||
) {
|
||||
Row(
|
||||
modifier = modifier
|
||||
.background(color = backgroundColor)
|
||||
.fillMaxWidth()
|
||||
.padding(all = TangemTheme.dimens.spacing16),
|
||||
horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing16),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Icon(
|
||||
painter = painterResource(backIconRes ?: R.drawable.ic_back_24),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.size(size = TangemTheme.dimens.size24)
|
||||
.clickable(
|
||||
interactionSource = remember { MutableInteractionSource() },
|
||||
indication = rememberRipple(bounded = false),
|
||||
) { onBackClick() },
|
||||
tint = TangemTheme.colors.icon.primary1,
|
||||
)
|
||||
AnimatedContent(
|
||||
targetState = text,
|
||||
modifier = Modifier.weight(1f),
|
||||
transitionSpec = { fadeIn().togetherWith(fadeOut()) },
|
||||
label = "Toolbar title change",
|
||||
) {
|
||||
if (!it.isNullOrBlank()) {
|
||||
Text(
|
||||
text = it,
|
||||
color = TangemTheme.colors.text.primary1,
|
||||
maxLines = 1,
|
||||
style = TangemTheme.typography.subtitle1,
|
||||
)
|
||||
AppBarWithBackButtonAndIconContent(
|
||||
onBackClick = onBackClick,
|
||||
modifier = modifier,
|
||||
text = text,
|
||||
backIconRes = backIconRes,
|
||||
backgroundColor = backgroundColor,
|
||||
iconContent = {
|
||||
AnimatedContent(
|
||||
targetState = iconRes,
|
||||
transitionSpec = { (fadeIn() + scaleIn()).togetherWith(fadeOut() + scaleOut()) },
|
||||
label = "Toolbar icon change",
|
||||
) {
|
||||
if (onIconClick != null && it != null) {
|
||||
Icon(
|
||||
painter = painterResource(it),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.size(size = TangemTheme.dimens.size24)
|
||||
.clickable { onIconClick() },
|
||||
tint = TangemTheme.colors.icon.primary1,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
AnimatedContent(
|
||||
targetState = iconRes,
|
||||
transitionSpec = { (fadeIn() + scaleIn()).togetherWith(fadeOut() + scaleOut()) },
|
||||
label = "Toolbar icon change",
|
||||
) {
|
||||
if (onIconClick != null && it != null) {
|
||||
Icon(
|
||||
painter = painterResource(it),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.size(size = TangemTheme.dimens.size24)
|
||||
.clickable { onIconClick() },
|
||||
tint = TangemTheme.colors.icon.primary1,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
@Preview(widthDp = 360, heightDp = 56, showBackground = true)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
package com.tangem.core.ui.components.appbar
|
||||
|
||||
import androidx.annotation.DrawableRes
|
||||
import androidx.compose.animation.AnimatedContent
|
||||
import androidx.compose.animation.fadeIn
|
||||
import androidx.compose.animation.fadeOut
|
||||
import androidx.compose.animation.togetherWith
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.material.Icon
|
||||
import androidx.compose.material.Text
|
||||
import androidx.compose.material.ripple.rememberRipple
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import com.tangem.core.ui.R
|
||||
import com.tangem.core.ui.res.TangemTheme
|
||||
|
||||
/**
|
||||
* App bar with back button and icon content for any possible number/style of icons
|
||||
*
|
||||
* @param onBackClick callback for back button
|
||||
* @param modifier modifier
|
||||
* @param text appbar title
|
||||
* @param backIconRes icon for back button
|
||||
* @param backgroundColor background color
|
||||
* @param iconContent icon content
|
||||
*/
|
||||
@Composable
|
||||
fun AppBarWithBackButtonAndIconContent(
|
||||
onBackClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
text: String? = null,
|
||||
@DrawableRes backIconRes: Int? = null,
|
||||
backIconTint: Color = TangemTheme.colors.icon.primary1,
|
||||
backgroundColor: Color = TangemTheme.colors.background.secondary,
|
||||
iconContent: @Composable () -> Unit,
|
||||
) {
|
||||
Row(
|
||||
modifier = modifier
|
||||
.background(color = backgroundColor)
|
||||
.fillMaxWidth()
|
||||
.padding(all = TangemTheme.dimens.spacing16),
|
||||
horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing16),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Icon(
|
||||
painter = painterResource(backIconRes ?: R.drawable.ic_back_24),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.size(size = TangemTheme.dimens.size24)
|
||||
.clickable(
|
||||
interactionSource = remember { MutableInteractionSource() },
|
||||
indication = rememberRipple(bounded = false),
|
||||
) { onBackClick() },
|
||||
tint = backIconTint,
|
||||
)
|
||||
AnimatedContent(
|
||||
targetState = text,
|
||||
modifier = Modifier.weight(1f),
|
||||
transitionSpec = { fadeIn().togetherWith(fadeOut()) },
|
||||
label = "Toolbar title change",
|
||||
) {
|
||||
if (!it.isNullOrBlank()) {
|
||||
Text(
|
||||
text = it,
|
||||
color = TangemTheme.colors.text.primary1,
|
||||
maxLines = 1,
|
||||
style = TangemTheme.typography.subtitle1,
|
||||
)
|
||||
}
|
||||
}
|
||||
iconContent()
|
||||
}
|
||||
}
|
||||
|
||||
@Preview(widthDp = 360, heightDp = 56, showBackground = true)
|
||||
@Composable
|
||||
private fun PreviewAppBarWithBackButtonAndIconInLightTheme() {
|
||||
TangemTheme(isDark = false) {
|
||||
AppBarWithBackButtonAndIconContent(
|
||||
text = "Title",
|
||||
onBackClick = {},
|
||||
iconContent = {
|
||||
Row {
|
||||
Icon(
|
||||
painter = painterResource(id = R.drawable.ic_qrcode_scan_24),
|
||||
tint = TangemTheme.colors.icon.primary1,
|
||||
contentDescription = null,
|
||||
)
|
||||
Icon(
|
||||
painter = painterResource(id = R.drawable.ic_flash_on_24),
|
||||
tint = TangemTheme.colors.icon.primary1,
|
||||
contentDescription = null,
|
||||
)
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview(widthDp = 360, heightDp = 56, showBackground = true)
|
||||
@Composable
|
||||
private fun PreviewAppBarWithBackButtonAndIconInDarkTheme() {
|
||||
TangemTheme(isDark = true) {
|
||||
AppBarWithBackButtonAndIconContent(
|
||||
text = "Title",
|
||||
onBackClick = {},
|
||||
iconContent = {
|
||||
Row {
|
||||
Icon(
|
||||
painter = painterResource(id = R.drawable.ic_qrcode_scan_24),
|
||||
tint = TangemTheme.colors.icon.primary1,
|
||||
contentDescription = null,
|
||||
)
|
||||
Icon(
|
||||
painter = painterResource(id = R.drawable.ic_flash_on_24),
|
||||
tint = TangemTheme.colors.icon.primary1,
|
||||
contentDescription = null,
|
||||
)
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
9
core/ui/src/main/res/drawable/ic_flash_off_24.xml
Normal file
9
core/ui/src/main/res/drawable/ic_flash_off_24.xml
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="24"
|
||||
android:viewportHeight="24">
|
||||
<path
|
||||
android:pathData="M3.27,3L2,4.27L7,9.27V13H10V22L13.58,15.86L17.73,20L19,18.73L3.27,3ZM17,10H13L17,2H7V4.18L15.46,12.64L17,10Z"
|
||||
android:fillColor="#1E1E1E"/>
|
||||
</vector>
|
||||
9
core/ui/src/main/res/drawable/ic_flash_on_24.xml
Normal file
9
core/ui/src/main/res/drawable/ic_flash_on_24.xml
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="24"
|
||||
android:viewportHeight="24">
|
||||
<path
|
||||
android:pathData="M7,2V13H10V22L17,10H13L17,2H7Z"
|
||||
android:fillColor="#1E1E1E"/>
|
||||
</vector>
|
||||
Loading…
Add table
Add a link
Reference in a new issue