主页 / coding / 问题 / 77353325
Accepted
sayang_android
Asked: 2023-10-24 23:16:22 +0800 CST

如何在 Jetpack Compose 中制作钢琴音符？

  • 772

如何制作如下图所示的钢琴音符：

在此输入图像描述

它应该有文本并且可点击。

这是我尝试过的：

PianoNotes.kt

const val NUM_NOTES = 7
const val DIVIDER_WIDTH = 5

@Composable
fun PianoNotes(modifier: Modifier = Modifier) {
    val config = LocalConfiguration.current
    val screenWidth = config.screenWidthDp.dp
    val screenHeight = config.screenHeightDp.dp

    Row {
        repeat(NUM_NOTES) { ithNotes -> // 0 indexed
            // NUM_NOTES - 1 because we don't use divider on last notes
            val dividerOffset = (DIVIDER_WIDTH * NUM_NOTES - 1).dp
            val singleNotesWidth = (screenWidth - dividerOffset) / NUM_NOTES

            NaturalNotes(
                size = DpSize(width = singleNotesWidth, height = screenHeight),
                ithNotes = ithNotes,
            )

            // we don't need divider on the last notes
            if (ithNotes != NUM_NOTES - 1) {
                VerticalDivider(
                    modifier = modifier.fillMaxHeight(),
                    thickness = DIVIDER_WIDTH.dp,
                    color = Color.Black
                )
            }

            // sharp notes doesn't exist on the third divider
            // we don't even have divider on 6th note
            if (ithNotes != 2 && ithNotes != 6) {
                SharpNotes(
                    size = DpSize(60.dp, 2 * screenHeight / 3),
                    ithNotes = ithNotes,
                )
            }

        }
    }
}

NaturalNotes.kt

@Composable
fun NaturalNotes(modifier: Modifier = Modifier, size: DpSize, ithNotes: Int) {
    Box(
        modifier = modifier
            .background(Color.White)
            .size(size.width, size.height)
            .clickable {
                Log.e(
                    "TAG",
                    PianoConstants.getNaturalNoteFromNumber(ithNotes + 1)
                )
            },
        contentAlignment = Alignment.BottomCenter
    ) {
        Text(
            text = PianoConstants.getNaturalNoteFromNumber(ithNotes + 1),
            fontSize = 36.sp,
            fontWeight = FontWeight.ExtraBold,
            modifier = modifier.padding(bottom = 20.dp)
        )
    }
}

SharpNotes.kt

@Composable
fun SharpNotes(modifier: Modifier = Modifier, size: DpSize, ithNotes: Int) {
    Box(
        modifier = modifier
            .background(Color.Black)
            .size(size.width, size.height)
            .clickable {
                Log.e(
                    "TAG",
                    PianoConstants.getSharpNoteFromNumber(ithNotes + 1)
                )
            },
        contentAlignment = Alignment.BottomCenter
    ) {
        Text(
            text = PianoConstants.getSharpNoteFromNumber(ithNotes + 1),
            fontSize = 36.sp,
            fontWeight = FontWeight.ExtraBold,
            color = Color.White,
            modifier = modifier.padding(bottom = 20.dp)
        )
    }
}

这导致：

在此输入图像描述

尖锐的音符会占用空间并且不会与分隔线重叠。我尝试过的其他方法是将VerticalDivider和包装SharpNotes在一个盒子中并使用偏移量，但它仍然留下一个空白空间。

PianoConstants只是一个类，它为我提供了要在笔记中显示的文本

android-jetpack-compose

1 个回答

  1. Best Answer

    对于这种情况，您需要自定义布局。我整理了一份，根据您的需要进行修改。

    主要可组合项

    @Composable
fun PianoNotes() {
    val config = LocalConfiguration.current
    val screenWidth = config.screenWidthDp.dp
    val screenHeight = config.screenHeightDp.dp
    val dividerOffset = (DIVIDER_WIDTH * (NUM_NOTES - 1)).dp
    val naturalNoteWidth = (screenWidth - dividerOffset) / NUM_NOTES
    val sharpNoteWidth = naturalNoteWidth * 0.7f
    val naturalNoteSize = DpSize(width = naturalNoteWidth, height = screenHeight)
    val sharpNoteSize = DpSize(width = sharpNoteWidth, height = screenHeight * 2 / 3)
    PianoLayout(
        naturalNote = { NaturalNote(it, naturalNoteSize) },
        sharpNote = { SharpNote(it, sharpNoteSize) },
    )
}

    布局

    @Composable
fun PianoLayout(
    naturalNote: @Composable (index: Int) -> Unit,
    sharpNote: @Composable (index: Int) -> Unit,
    modifier: Modifier = Modifier,
) {
    val naturalNotes = @Composable {
        repeat(NUM_NOTES) { naturalNote(it) }
    }
    val sharpNotes = @Composable {
        repeat(NUM_NOTES) { if (it != 2 && it != 6) sharpNote(it) }
    }
    Layout(
        contents = listOf(naturalNotes, sharpNotes),
        modifier = modifier.background(Color.Black),
    ) { (naturalNotesMeasurables, sharpNotesMeasurables), constraints ->
        val naturalNotesPlaceables = naturalNotesMeasurables.map { measurable ->
            measurable.measure(constraints)
        }
        val sharpNotesPlaceables = sharpNotesMeasurables.map { measurable ->
            measurable.measure(constraints)
        }
        val naturalNoteWidth = naturalNotesPlaceables.first().width
        val sharpNoteWidth = sharpNotesPlaceables.first().width
        val layoutWidth = (naturalNoteWidth * NUM_NOTES) + (DIVIDER_WIDTH * (NUM_NOTES - 1))
        val layoutHeight = naturalNotesPlaceables.first().height
        layout(layoutWidth, layoutHeight) {
            fun naturalNoteX(index: Int): Int {
                return index * (naturalNoteWidth + DIVIDER_WIDTH)
            }

            fun sharpNoteX(index: Int): Int {
                val offset = if (index > 1) 2 else 1
                return (index + offset) * (layoutWidth / NUM_NOTES) - sharpNoteWidth / 2
            }

            naturalNotesPlaceables.forEachIndexed { index, placeable ->
                placeable.place(naturalNoteX(index), 0, 1f)
            }
            sharpNotesPlaceables.forEachIndexed { index, placeable ->
                placeable.place(sharpNoteX(index), 0, 2f)
            }
        }
    }
}

    我改变了你的NaturalNotes一点SharpNotes，字体大小仍然需要调整。

    @Composable
fun NaturalNote(ithNotes: Int, size: DpSize, modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
            .background(Color.White)
            .size(size.width, size.height)
            .clickable {
                Log.e("TAG", PianoConstants.getNaturalNoteFromNumber(ithNotes))
            },
        contentAlignment = Alignment.BottomCenter
    ) {
        Text(
            text = PianoConstants.getNaturalNoteFromNumber(ithNotes),
            fontSize = 36.sp,
            fontWeight = FontWeight.ExtraBold,
            modifier = modifier.padding(bottom = 20.dp)
        )
    }
}

    @Composable
fun SharpNote(ithNotes: Int, size: DpSize, modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
            .background(Color.Black)
            .size(size.width, size.height)
            .clickable {
                Log.e("TAG", PianoConstants.getSharpNoteFromNumber(ithNotes))
            },
        contentAlignment = Alignment.BottomCenter
    ) {
        Text(
            text = PianoConstants.getSharpNoteFromNumber(ithNotes),
            fontSize = 36.sp,
            fontWeight = FontWeight.ExtraBold,
            color = Color.White,
            modifier = modifier.padding(bottom = 20.dp)
        )
    }
}
    • 1

相关问题