Flexible Chat Box

Linha de bate -papo flexível e subcomposelayout

Linha de bate -papo flexível, ChatFlexBoxLayout , posiciona seus elementos com base no número de linhas que o texto da mensagem, largura, largura da mensagem e mensagem da mensagem. SubcomposeColumn criada usando subcomposelayout , que rejeita seus filhos com base em crianças mais longas. Isso é útil para combinar a mensagem de cotação e o comprimento da mensagem após o cálculo da posição. Esses dois composáveis juntos criam linhas de mensagens dinâmicas que posicionam as crianças e posicionam a mensagem, a data e o status da mensagem.

Existem 3 arquivos de implementação para experimentar ChatFlexBoxLayout , e SubcomposeColumn são DemoFullChat.kt , DemoChatAndWidth.kt e DemoResizableColumn.kt

Chat completo	Largura de bate -papo	Redimensionável

ChatflexBoxlayout

Esse layout mede e posiciona a mensagem e outro contêiner que usa a data ou a data da mensagem + o status recebido da mensagem, como aplicativos de mensagens.

Existem 4 condições possíveis para posicionar mensagens e estatísticas

• O texto e o status da mensagem de linha única é mais curta que a largura dos pais (magenta na amostra)
• O texto e o status da mensagem de linha única são mais longos que a largura dos pais (verde na amostra)
• Mensagem de linha múltipla com a largura da última linha e o status da mensagem é mais curto do comprimento do texto da mensagem + preenchimento direito (vermelho na amostra)
• Mensagem de linha múltipla com a largura da última linha e o status da mensagem é o comprimento mais longo do texto da mensagem + preenchimento direito (amarelo na amostra)

Uso

 ChatFlexBoxLayout (
    modifier : Modifier = Modifier ,
    text : String ,
    color : Color = Color . Unspecified ,
    fontSize : TextUnit = 16 .sp,
    fontStyle : FontStyle ? = null ,
    fontWeight : FontWeight ? = null ,
    fontFamily : FontFamily ? = null ,
    letterSpacing : TextUnit = TextUnit . Unspecified ,
    textDecoration : TextDecoration ? = null ,
    textAlign : TextAlign ? = null ,
    lineHeight : TextUnit = TextUnit . Unspecified ,
    overflow : TextOverflow = TextOverflow . Clip ,
    softWrap : Boolean = true ,
    maxLines : Int = Int . MAX_VALUE ,
    messageStat : @Composable () -> Unit ,
    onMeasure : (( ChatRowData ) -> Unit ) ? = null
)

Como TextLayout é necessário para obter o comprimento do texto, a largura da última linha e outras propriedades é interna a essa composição, mas as propriedades do Text compostas podem ser definidas com o mesmo que é feito usando Text .

onMeasure retorna dados de layout internos desta linha, é assim que defino as cores de maneira diferente na amostra de largura de bate -papo . messageStat é composto que contém texto ou status da mensagem, se necessário.

    ChatFlexBoxLayout (
        modifier = Modifier
            .background(color, shape = RoundedCornerShape ( 8 .dp))
            .padding(start = 2 .dp, top = 2 .dp, end = 4 .dp, bottom = 2 .dp),
        text = text,
        messageStat = {
            MessageTimeText (
                modifier = Modifier .wrapContentSize(),
                messageTime = messageTime,
                messageStatus = messageStatus
            )
        },
        onMeasure = { chatRowData ->
            color = when (chatRowData.measuredType) {
                0 -> Color . Yellow
                1 -> Color . Red
                2 -> Color . Green
                else -> Color . Magenta
            }
        }
    )

Outra sobrecarga de ChatFlexBoxLayout leva dois composíveis como argumentos que a mensagem personalizada composível pode ser usada em vez de string ou anotações.

@Composable
fun ChatFlexBoxLayout (
    modifier : Modifier ,
    message : @Composable () -> Unit ,
    messageStat : @Composable () -> Unit = {},
    chatRowData : ChatRowData ,
    onMeasure : (( ChatRowData ) -> Unit ) ? = null
) {
  // ...
}

Use com remember { ChatRowData() } para fornecer estatísticas e invocar measureText(chatRowData, it) para definir propriedades de texto para esses dados

            val chatRowData = remember { ChatRowData () }

            ChatFlexBoxLayout (
                modifier = Modifier .padding(
                    start = 2 .dp,
                    top = 2 .dp,
                    end = 8 .dp,
                    bottom = 2 .dp
                ),
                message = {
                    Text (
                        modifier = Modifier .padding(horizontal = 6 .dp, vertical = 4 .dp),
                        text = text,
                        fontSize = 16 .sp,
                        onTextLayout = {
                            // ️ THIS IS REQUIRED TO MEASURE Text size and get line count
                            measureText(chatRowData, it)
                        }
                    )
                },
                messageStat = {
                    MessageTimeText (
                        modifier = Modifier .wrapContentSize(),
                        messageTime = messageTime,
                        messageStatus = messageStatus
                    )
                },
                chatRowData = chatRowData
            )
        }

Subcomposecolumn

Esse layout usa o subcomposelayout para encontrar um filho mais longo e depois lembrar seus filhos e definir todas as crianças para maximizar a largura. Existem 2 sobrecargas deste composto se você precisar usar apenas 2 filhos diretos, você pode usar qual retorno tamanho do componente principal como IntSize

 fun SubcomposeColumn (
    modifier : Modifier = Modifier ,
    mainContent : @Composable () -> Unit = {},
    dependentContent : @Composable ( IntSize ) -> Unit
) {
.. .
}

Esta função sobrecarregada é adequada para layout com qualquer número de crianças

@Composable
fun SubcomposeColumn (
    modifier : Modifier = Modifier ,
    content : @Composable () -> Unit = {},
) {

    SubcomposeLayout (modifier = modifier) { constraints ->

        var recompositionIndex = 0

        var placeables : List < Placeable > = subcompose(recompositionIndex ++ , content).map {
            it.measure(constraints)
        }

        val maxSize =
            placeables.fold( IntSize . Zero ) { currentMax : IntSize , placeable : Placeable ->
                IntSize (
                    width = maxOf(currentMax.width, placeable.width),
                    height = currentMax.height + placeable.height
                )
            }

        // Remeasure every element using width of longest item as minWidth of Constraint
        if ( ! placeables.isNullOrEmpty() && placeables.size > 1 ) {
            placeables = subcompose(recompositionIndex, content).map { measurable : Measurable ->
                measurable.measure( Constraints (maxSize.width, constraints.maxWidth))
            }
        }

        layout(maxSize.width, maxSize.height) {
            var yPos = 0
            placeables.forEach { placeable : Placeable ->
                placeable.placeRelative( 0 , yPos)
                yPos + = placeable.height
            }

        }
    }
}