Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/smarttoolfactory/flexible-chat-box
Flexible chat row written with Jetpack Compose that positions message and message status based on number of message lines, message width and parent width. And resizable Subcomposelayout that remasures sibling composables to match their widths' to longest composable that matches quote and message width to max width.
https://github.com/smarttoolfactory/flexible-chat-box
android chat chat-row custom-view jetpack-compose material-ui subcomposelayout
Last synced: 3 months ago
JSON representation
Flexible chat row written with Jetpack Compose that positions message and message status based on number of message lines, message width and parent width. And resizable Subcomposelayout that remasures sibling composables to match their widths' to longest composable that matches quote and message width to max width.
- Host: GitHub
- URL: https://github.com/smarttoolfactory/flexible-chat-box
- Owner: SmartToolFactory
- License: apache-2.0
- Created: 2021-12-19T22:20:34.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-12-24T13:48:17.000Z (about 1 year ago)
- Last Synced: 2023-12-24T14:35:47.227Z (about 1 year ago)
- Topics: android, chat, chat-row, custom-view, jetpack-compose, material-ui, subcomposelayout
- Language: Kotlin
- Homepage:
- Size: 2.14 MB
- Stars: 42
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
## Flexible Chat Row and Resizable SubcomposeLayout
Flexible chat row, `ChatFlexBoxLayout`, positions its elements based on number of lines message text has,
parent width, message and message status width.
`SubcomposeColumn` created using **SubComposeLayout** which remeasures its children based on
longest children. This is useful for matching quote message and message length after position
calculation. These two composables together create dynamic message rows that position children, and positions message, message date and message status.
There are 3 implementation files to to try out `ChatFlexBoxLayout`, and `SubcomposeColumn` are
`DemoFullChat.kt`, `DemoChatAndWidth.kt`, and `DemoResizableColumn.kt`
| Full Chat | Chat Width | Resizable |
|---------------------------------------------------------|----------------------------------------------------------|---------------------------------------------------------|
| 
| 
| 
|
### ChatFlexBoxLayout
This layout measures and positions message, and another container that uses message
date or message date + message received status like messaging apps do.
There are 4 possible conditions to position message and stats
* Single line message text and status is shorter than parent width(Magenta in sample)
* Single line message text and status is longer than parent width(Green in sample)
* Multiple line message with last line width and message status is shorter message text length + right padding(Red in sample)
* Multiple line message with last line width and message status is longer message text length + right padding(Yellow in sample)
#### Usage
```kotlin
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
)
```
Since `TextLayout` is required to get text length, last line width and other properties it's internal to this composable but properties of `Text`composable can be set with same as it's done using `Text`.
`onMeasure` returns internal layout data of this row, that's how i set colors differently in **chat width sample**.
`messageStat` is composable that contains message text or status if you need to.
```kotlin
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
}
}
)
```
Another overload of `ChatFlexBoxLayout` takes two Composables as arguments which
custom **message** Composable can be used instead of String or AnnotatedString.
```kotlin
@Composable
fun ChatFlexBoxLayout(
modifier: Modifier,
message: @Composable () -> Unit,
messageStat: @Composable () -> Unit = {},
chatRowData: ChatRowData,
onMeasure: ((ChatRowData) -> Unit)? = null
) {
//...
}
```
Use with `remember { ChatRowData() }` to provide stats and invoke `measureText(chatRowData, it)`
to set text properties to this data
```kotlin
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
This layout uses SubcomposeLayout to find longest child then remeasure its children
and set every child to max width. There are 2 overloads of this Composable if
you only need to use direct 2 children you can use which returns size of main component
as `IntSize`
```kotlin
fun SubcomposeColumn(
modifier: Modifier = Modifier,
mainContent: @Composable () -> Unit = {},
dependentContent: @Composable (IntSize) -> Unit
) {
...
}
```
This overloaded function is suitable for layout with any number of children
```kotlin
@Composable
fun SubcomposeColumn(
modifier: Modifier = Modifier,
content: @Composable () -> Unit = {},
) {
SubcomposeLayout(modifier = modifier) { constraints ->
var recompositionIndex = 0
var placeables: List = 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
}
}
}
}
```