Jetpack compose：炫酷的按钮点击效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了Jetpack compose：炫酷的按钮点击效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Jetpack compose：炫酷的按钮点击效果

Jetpack compose：炫酷的按钮点击效果,ui,android jetpack,kotlin
屏幕的每个组件在与用户交互时都有其给用户反馈的方式。例如，当用户触摸 Toggle 按钮时，它会更改其状态以响应交互。这种交互给用户一种感觉。

在此博客中，我们将实现一些自定义点击效果，使您的按钮点击更具吸引力。

默认情况下，按钮在被触摸时会显示波纹效果。您可以根据您的要求自定义波纹颜色、alpha 等，但我们不打算在本文中介绍。是的，但我们将学习一些禁用默认连锁反应的方法。

我们要做些什么？

缩放效果
点击效果
震动效果
单击动画形状
3种禁用默认点击效果的方法
让我们开始吧…

缩放效果

Jetpack compose：炫酷的按钮点击效果,ui,android jetpack,kotlin
对于这种效果，我们只需要更改按钮的比例即可获得漂亮的弹跳效果。代码如下：

enum class ButtonState { Pressed, Idle }
fun Modifier.bounceClick() = composed {
    var buttonState by remember { mutableStateOf(ButtonState.Idle) }
    val scale by animateFloatAsState(if (buttonState == ButtonState.Pressed) 0.70f else 1f)

    this
        .graphicsLayer {
            scaleX = scale
            scaleY = scale
        }
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null,
            onClick = {  }
        )
        .pointerInput(buttonState) {
            awaitPointerEventScope {
                buttonState = if (buttonState == ButtonState.Pressed) {
                    waitForUpOrCancellation()
                    ButtonState.Idle
                } else {
                    awaitFirstDown(false)
                    ButtonState.Pressed
                }
            }
        }
}

没什么特别的，只是根据按钮状态对缩放值进行动画处理。让我们将此修改器应用于按钮。

@Composable
fun PulsateEffect() {
    Button(onClick = {
        // clicked
    }, shape = RoundedCornerShape(12.dp),
        contentPadding = PaddingValues(16.dp),
        modifier = Modifier.bounceClick()) {
        Text(text = "Click me")
    }
}

下面是一个实用的App，UI效果是不是很棒
Jetpack compose：炫酷的按钮点击效果,ui,android jetpack,kotlin

按压效果

我们将稍微移动按钮以使其具有按压效果。

enum class ButtonState { Pressed, Idle }
fun Modifier.pressClickEffect() = composed {
    var buttonState by remember { mutableStateOf(ButtonState.Idle) }
    val ty by animateFloatAsState(if (buttonState == ButtonState.Pressed) 0f else -20f)

    this
        .graphicsLayer {
            translationY = ty
        }
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null,
            onClick = {  }
        )
        .pointerInput(buttonState) {
            awaitPointerEventScope {
                buttonState = if (buttonState == ButtonState.Pressed) {
                    waitForUpOrCancellation()
                    ButtonState.Idle
                } else {
                    awaitFirstDown(false)
                    ButtonState.Pressed
                }
            }
        }
}

没什么新的，和我们之前的效果一样，我们只是tranlateY在按钮状态变化时设置了动画值。

@Composable
fun PressEffect() {
   Button(onClick = {
        //Clicked
    }, shape = RoundedCornerShape(12.dp), contentPadding = PaddingValues(16.dp),
        modifier = Modifier.pressClickEffect()) {
        Text(text = "Click me")
    }
}

Jetpack compose：炫酷的按钮点击效果,ui,android jetpack,kotlin

震动效果

摇动效果对于显示无效交互非常有用，例如，注册表单上的无效数据。

对于摇动，我们只需要实现可重复的动画。

fun Modifier.shakeClickEffect() = composed {
    var buttonState by remember { mutableStateOf(ButtonState.Idle) }
    
val tx by animateFloatAsState(
        targetValue = if (buttonState == ButtonState.Pressed) 0f else -50f,
        animationSpec = repeatable(
            iterations = 2,
            animation = tween(durationMillis = 50, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        )
    )
    this
        .graphicsLayer {
            translationX = tx
        }
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null,
            onClick = { }
        )
        .pointerInput(buttonState) {
            awaitPointerEventScope {
                buttonState = if (buttonState == ButtonState.Pressed) {
                    waitForUpOrCancellation()
                    ButtonState.Idle
                } else {
                    awaitFirstDown(false)
                    ButtonState.Pressed
                }
            }
        }
}

在这里，我们添加了可重复的动画来将按钮移动 2 次以实现摇动效果。

@Composable
fun ShakeEffect(){

    Button(onClick = {
        //Clicked
    }, shape = RoundedCornerShape(12.dp), contentPadding = PaddingValues(16.dp),
        modifier = Modifier.shakeClickEffect()) {
        Text(text = "Click me")
    }
}

震动效果
Jetpack compose：炫酷的按钮点击效果,ui,android jetpack,kotlin

单击动画形状

为此，我们将为视图角半径设置动画。

val interactionSource = remember { MutableInteractionSource() }
val isPressed = interactionSource.collectIsPressedAsState()
val cornerRadius by animateDpAsState(targetValue = if (isPressed.value) 10.dp else 50.dp)

这里我们使用animateDpAsStateAPI 来动画半径dp值

现在，将此半径应用于可组合

Box(
    modifier = Modifier
        .background(color = pink, RoundedCornerShape(cornerRadius))
        .size(100.dp)
        .clip(RoundedCornerShape(cornerRadius))
        .clickable(
            interactionSource = interactionSource,
            indication = rememberRipple()
        ) {
            //Clicked
        }
        .padding(horizontal = 20.dp),
    contentAlignment = Alignment.Center
) {
    Text(
        text = "Click!",
        color = Color.White
    )
}

动画效果
Jetpack compose：炫酷的按钮点击效果,ui,android jetpack,kotlin

3种禁用默认点击效果的方法

1.使用自定义InteractionSource

InteractionSource表示与组件发出的事件相对应的交互流。这些交互可用于更改组件在不同状态下的显示方式，例如当组件被按下或拖动时。

class NoRippleInteractionSource : MutableInteractionSource {

    override val interactions: Flow<Interaction> = emptyFlow()

    override suspend fun emit(interaction: Interaction) {}

    override fun tryEmit(interaction: Interaction) = true
}

所以这里我们有一个返回空流，这意味着按钮不会对不同的点击状态做出反应，例如按钮按下或拖动。

如何使用这个自定义的InteractionSource？按钮有interactionSource属性。

@Composable
fun NoRippleEffect1() {
   
    Button(
        onClick = {
            //Clicked
        },
        interactionSource = remember { NoRippleInteractionSource() },
        shape = RoundedCornerShape(12.dp),
        contentPadding = PaddingValues(16.dp),
    ) {
        Text(text = "Button without Ripple Effect")
    }
}

检查此输出。你将有一个没有任何效果的按钮。
Jetpack compose：炫酷的按钮点击效果,ui,android jetpack,kotlin

2.通过“指示”去除视觉效果

指示表示发生某些交互时出现的视觉效果。

例如：按下组件时显示波纹效果，或聚焦组件时高亮显示。

该按钮没有指示属性，因此将创建一个具有Box可组合性的自定义按钮。

@Composable
fun NoRippleEffect2() {
    Box(
        modifier = Modifier
            .height(height = 38.dp)
            .background(
                color = pink,
                shape = RoundedCornerShape(percent = 12)
            )
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = null
            ) {
                //Clicked
            }
            .padding(horizontal = 20.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Click me",
            color = Color.White
        )
    }
}

3.通过使用自定义波纹主题

private object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = // Ripple color

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleAlpha(0.0f, 0.0f, 0.0f, 0.0f)
}

RippleAlpha 为不同的交互定义了波纹/状态层的 alpha。我们为所有状态添加了 0.0f，这意味着没有连锁反应。将自定义主题应用到按钮使用CompositionLocalProvider

@Composable
fun NoRippleEffect3() {
    CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
        Button(
            onClick = {
                //Clicked
            }, shape = RoundedCornerShape(12.dp),
            contentPadding = PaddingValues(16.dp)
        ) {
            Text(text = "Click me")
        }
    }
}

文章所涉源码地址：

https://github.com/cp-radhika-s/CoolButtonClickEffects

结论

到目前为止，我们已经学习了一些自定义按钮点击效果。按钮是任何应用程序的重要组成部分，值得付出更多努力使您的按钮更具吸引力和交互性。您可以使用 Jetpack compose 的 Animation API 实现许多此类效果。文章来源地址https://www.toymoban.com/news/detail-733601.html

到了这里，关于Jetpack compose：炫酷的按钮点击效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！