Flexible Chat Box

柔軟なチャットの行とsubcomposeLayoutの再配置可能

Flexible Chat Row、 ChatFlexBoxLayoutは、メッセージテキストの数、親の幅、メッセージ、およびメッセージステータスの幅に基づいて要素を配置します。 SubcomposeColumn 、最長の子供に基づいて子供を再測定するSubComposeLayoutを使用して作成されました。これは、位置計算後の引用メッセージとメッセージの長さを一致させるのに役立ちます。これらの2つのコンポゼルは一緒になって、子供を配置する動的なメッセージ行を作成し、メッセージ、メッセージ日付、メッセージのステータスを配置します。

ChatFlexBoxLayoutを試すための3つの実装ファイルがあり、 SubcomposeColumnはDemoFullChat.kt 、 DemoChatAndWidth.kt 、およびDemoResizableColumn.ktです。

フルチャット	チャット幅	再配置可能

chatflexboxLayout

このレイアウトは、メッセージを測定および位置付け、メッセージの日付またはメッセージ日付 +メッセージを受け取ったメッセージを使用している別のコンテナを、メッセージングアプリが行うようにステータスを受信します。

メッセージと統計を配置する4つの条件があります

• シングルラインのメッセージテキストとステータスは親の幅よりも短い（サンプルのマゼンタ）
• シングルラインのメッセージテキストとステータスは親の幅より長い（サンプルの緑）
• 最後の行の幅とメッセージステータスを持つ複数の行のメッセージは、メッセージテキストの長さ +右パディング（サンプルで赤）です
• 最後の行の幅とメッセージステータスを持つ複数の行のメッセージは、メッセージテキストの長さ +右パディングです（サンプルの黄色）

使用法

 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
)

TextLayoutテキストの長さ、最後の行の幅、およびその他のプロパティを取得するために必要なため、この構成可能ですが、 TextのプロパティはTextを使用して行われたものと同じで設定できます。

onMeasure 、この行の内部レイアウトデータを返します。これが、チャット幅サンプルで色を異なる方法で設定する方法です。 messageStat 、必要に応じてメッセージテキストまたはステータスを含む合成可能です。

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

ChatFlexBoxLayoutのもう1つのオーバーロードは、2つのComposablesを、文字列または注釈付きストリングの代わりに使用できるカスタムメッセージComposableを使用できる引数として使用します。

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

remember { ChatRowData() }て使用して統計を提供し、 measureText(chatRowData, it)を呼び出してこのデータにテキストプロパティを設定します

            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

このレイアウトは、SubComposeLayoutを使用して最長の子供を見つけてから、子供を削除し、すべての子供を最大幅に設定します。メインコンポーネントのサイズをIntSizeとして返すことができる直接の2人の子供のみを使用する必要がある場合、この構成可能な2つの過負荷があります

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

この過負荷機能は、任意の数の子供とのレイアウトに適しています

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

        }
    }
}