Compose 实现一个Toolbar

最新推荐文章于 2024-12-10 14:54:15 发布

原创最新推荐文章于 2024-12-10 14:54:15 发布 · 422 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#kotlin #android #开发语言

本文介绍如何使用Jetpack Compose实现自定义Toolbar组件，并展示了通过ConstraintLayout布局实现不同元素间的约束关系，包括图标、文本等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Compose 实现一个Toolbar

效果

在这里插入图片描述

代码


@Preview(showBackground = true)
@Composable
fun ToolBarWidget(
    @PreviewParameter(ToolBarParamsMock::class) params: ToolBarParams
) {
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .height(45.dp)
    ) {

        val (leftIcon, title, rightText, rightIcon) = createRefs()

        Image(
            painter = painterResource(id = R.drawable.icon_arrow_left),
            contentDescription = "backIcon",
            modifier = Modifier
                .constrainAs(leftIcon) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }
                .padding(16.dp, 0.dp, 0.dp, 0.dp)
                .clickable {
                    params.backClick?.invoke()
                },
            alignment = Alignment.Center
        )

        Text(
            params.titleText,
            textAlign = TextAlign.Center,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier
                .constrainAs(title) {
                    linkTo(
                        start = parent.start, startMargin = 48.dp,
                        end = parent.end, endMargin = 45.dp,
                        top = parent.top, topMargin = 0.dp,
                        bottom = parent.bottom, bottomMargin = 0.dp
                    )
                    width = Dimension.fillToConstraints
                }
                .wrapContentWidth()
        )

        params.rightText?.let {
            Text(
                it,
                textAlign = TextAlign.Center,
                modifier = Modifier.constrainAs(rightText) {
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    end.linkTo(parent.end, margin = 16.dp)
                }
            )
        }

        params.rightIcon?.let {
            Image(
                painter = painterResource(id = it),
                contentDescription = "rightIcon",
                modifier = Modifier
                    .constrainAs(rightIcon) {
                        top.linkTo(parent.top)
                        bottom.linkTo(parent.bottom)
                        end.linkTo(parent.end, margin = 16.dp)
                    }
                    .padding(16.dp, 0.dp, 0.dp, 0.dp),
            )
        }
    }
}

data class ToolBarParams(
    val titleText: String,
    val rightText: String? = null,
    val rightIcon: Int? = null,
    val rightIconClick: (() -> Unit)? = null,
    val backClick: (() -> Unit)? = null
)

class ToolBarParamsMock : PreviewParameterProvider<ToolBarParams> {
    override val values: Sequence<ToolBarParams>
        get() = listOf<ToolBarParams>(
            ToolBarParams("标题", "右标题"),
            ToolBarParams(
                "标题".repeat(40),
                null,
                R.drawable.camera_icon_rec_btn_normal
            ),
            ToolBarParams("标题")
        ).asSequence()
}

对于ConstraintLayout 在Compose的使用

这是用也是非常便捷。但是有一点需要注意的就是约束的宽高的需要在Modifier里面实现

            modifier = Modifier
                .constrainAs(title) {
                    linkTo(
                        start = parent.start, startMargin = 48.dp,
                        end = parent.end, endMargin = 45.dp,
                        top = parent.top, topMargin = 0.dp,
                        bottom = parent.bottom, bottomMargin = 0.dp
                    )
                    width = Dimension.fillToConstraints
                }