什么相當於android中的橫幅（jetpack compose）

Question

我正在嘗試在 android 中實現一個看起來像這樣的橫幅

我在Material Design找到了這個，但它沒有針對 android 的實現。

在 android 中實現這一點的最佳方法是什么，尤其是使用 Jetpack Compose？

先感謝您。

Answer 1

版本 1.0.3 中沒有可組合的Banner 。

為橫幅創建自定義組合非常容易。

示例代碼

自定義橫幅

@Composable
fun Banner(
    text: String,
    button1Text: String? = null,
    button2Text: String? = null,
    button1ClickListener: (() -> Unit)? = null,
    button2ClickListener: (() -> Unit)? = null,
) {
    Column {
        Text(
            text = text,
            modifier = Modifier.padding(16.dp),
        )
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(
                    start = 8.dp,
                    end = 8.dp,
                    bottom = 8.dp,
                ),
            horizontalArrangement = Arrangement.End,
        ) {
            button1Text?.let {
                TextButton(
                    onClick = if (button1ClickListener != null) {
                        button1ClickListener
                    } else {
                        {}
                    }
                ) {
                    Text(
                        text = button1Text,
                    )
                }
            }
            button2Text?.let {
                TextButton(
                    onClick = if (button2ClickListener != null) {
                        button2ClickListener
                    } else {
                        {}
                    }
                ) {
                    Text(
                        text = button2Text,
                    )
                }
            }
        }
        Divider()
    }
}

用法

@Composable
fun BannerUsage() {
    Banner(
        text = "There was a problem processing a transaction on your credit card.",
        button1Text = "FIX IT",
        button2Text = "LEARN MORE",
    )
}

截屏

Answer 2

要使橫幅滑入/滑出，可以使用AnimatedVisibility API。

下面是一個實現示例：

class AnimationTestActivity : AppCompatActivity() {

    @ExperimentalAnimationApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val isVisible = mutableStateOf(false)

        setContent {
            Column {
                AnimatedBanner(isVisible)
                Column(modifier = Modifier.fillMaxWidth()) {
                    Button(
                        modifier = Modifier
                            .padding(8.dp)
                            .align(CenterHorizontally),
                        onClick = { isVisible.value = !isVisible.value }) {
                        Text(text = "Toggle")
                    }
                }
            }
        }
    }
}

@ExperimentalAnimationApi
@Composable
fun AnimatedBanner(isVisible: MutableState<Boolean>) {
    AnimatedVisibility(
        visible = isVisible.value,
        enter = expandVertically(),
        exit = shrinkVertically()
    ) {
        Column(
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(
                modifier = Modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp, bottom = 12.dp),
                text = "Question text"
            )

            Row(
                modifier = Modifier
                    .padding(bottom = 8.dp)
                    .align(Alignment.End)
            ) {
                TextButton(
                    modifier = Modifier.padding(end = 8.dp),
                    onClick = { isVisible.value = false }
                ) {
                    Text(text = "Option 1")
                }
                TextButton(
                    modifier = Modifier.padding(end = 8.dp),
                    onClick = { isVisible.value = false }
                ) {
                    Text(text = "Option 2")
                }
            }
            Divider()
        }
    }
}

橫幅看起來像這樣：