Início / coding / Perguntas / 77353325
Accepted
sayang_android
Asked: 2023-10-24 23:16:22 +0800 CST

Como fazer notas de piano no Jetpack Compose?

  • 772

Como fazer notas de piano como esta imagem abaixo:

insira a descrição da imagem aqui

Deve ter texto e clicável.

Aqui está o que eu tentei:

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)
        )
    }
}

Isso resultou em:

insira a descrição da imagem aqui

As notas sustenidas ocupam espaço e não se sobrepõem à divisória. Outro método que tentei é embrulhar VerticalDividere SharpNotesem uma caixa e usar deslocamento, mas ainda deixa um espaço vazio.

PianoConstantsnada mais é do que uma classe que me dá um texto para mostrar nas notas

android-jetpack-compose

1 respostas

  1. Best Answer

    Para tais casos você precisa de um layout personalizado . Eu montei um, modifiquei para suas necessidades.

    Principal elemento que pode ser composto

    @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) },
    )
}

    Disposição

    @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)
            }
        }
    }
}

    Mudei um pouco o seu NaturalNotese SharpNoteso tamanho da fonte ainda precisa de ajustes.

    @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

relate perguntas