Compose Bubble

JetPack組成語音聊天泡沫

聊天/語音氣泡寬度不同的箭頭，背景，陰影屬性，以創建聊天氣泡，例如WhatsApp，Telegram或其他消息傳遞應用程序具有或箭頭，並在底部具有箭頭以創建信息氣泡。

Gradle設置

要將git項目帶入您的構建中：

• 步驟1。將jitpack存儲庫添加到構建文件中，將其添加到root build.gradle。在存儲庫結束時：

 allprojects {
  repositories {
      ...
      maven { url 'https://jitpack.io' }
  }
}

• 步驟2。添加依賴關係

 dependencies {
	  implementation 'com.github.SmartToolFactory:Compose-Bubble:Tag'
}

Modifier.bubble ，或CreateBubBleShape函數以Shape或BubbleLayout創建它，例如演示

@Composable
fun BubbleLayout (
    modifier : Modifier = Modifier ,
    bubbleState : BubbleState ,
    backgroundColor : Color = Color . White ,
    shadow : BubbleShadow ? = null,
    borderStroke : BorderStroke ? = null,
    content : @Composable () -> Unit
) {
    Column (
        modifier.bubble(
            bubbleState = bubbleState,
            color = backgroundColor,
            shadow = shadow,
            borderStroke = borderStroke
        )
    ) {
        content()
    }
}

Intro.mp4

有4個測試氣泡的演示。

• DemoFullChat是小型聊天樣本，它在發件人或用戶的第一條消息上顯示箭頭
• DemoDynamicSize是用於動態更改氣泡以實時觀察變化。您可以添加自定義氣泡以測試動態更改。
• DemoBubbles顯示一些樣品氣泡
• DemoSimpleLayout用於演示Constraints.offset(x,y)和Contrainsts.constrainWidth Layout和Placeable

完整的聊天z	動態大小	氣泡樣品

起泡

 class BubbleState internal constructor(
    var backgroundColor: Color = DefaultBubbleColor,
    var cornerRadius: BubbleCornerRadius = BubbleCornerRadius(
        topLeft = 8.dp,
        topRight = 8.dp,
        bottomLeft = 8.dp,
        bottomRight = 8.dp,
    ),
    var alignment: ArrowAlignment = ArrowAlignment.NONE,
    var arrowShape: ArrowShape = ArrowShape.TRIANGLE_RIGHT,
    var arrowOffsetX: Dp = 0.dp,
    var arrowOffsetY: Dp = 0.dp,
    var arrowWidth: Dp = 14.dp,
    var arrowHeight: Dp = 14.dp,
    var arrowRadius: Dp = 0.dp,
    var drawArrow: Boolean = true,
    var shadow: BubbleShadow? = null,
) 

要創建一個泡泡以修改要繪製的氣泡，請使用記住功能的超載之一

 fun rememberBubbleState(
backgroundColor: Color = DefaultBubbleColor,
cornerRadius: Dp = 8.dp,
alignment: ArrowAlignment = ArrowAlignment.NONE,
arrowShape: ArrowShape = ArrowShape.TRIANGLE_RIGHT,
arrowOffsetX: Dp = 0.dp,
arrowOffsetY: Dp = 0.dp,
arrowWidth: Dp = 14.dp,
arrowHeight: Dp = 14.dp,
arrowRadius: Dp = 0.dp,
drawArrow: Boolean = true,
shadow: BubbleShadow? = null,
)

特性

• 背景色：氣泡的顏色
• Cornerradius ：為氣泡矩形的每一側構建半徑
• 對齊：箭頭對齊確定應在氣泡的哪一側繪製箭頭。當選擇箭頭時，沒有繪製箭頭。
• 箭頭：箭頭的形狀，它可以是正確的，也可以是三角形或彎曲形狀
• ArrowOffSetx ：位於氣泡頂部或底部的箭頭的垂直偏移。正值向右移動箭頭，而負值向左移動。箭頭位置在內容的左側和內容右負箭頭寬度之間受到限制。
• Arrowoffsety ：垂直偏移的箭頭，該箭頭位於氣泡的左側或右側。正值移動箭頭底部，而負值則上升。箭頭位置在內容頂部和內容底部減去箭頭高度之間受到限制。
• 箭頭：箭頭的寬度
• 箭頭：箭頭的高度
• Arrowradius ：箭頭的半徑曲線曲線箭頭的尖端
• drawarrow ：我們應該畫箭頭還是只有矩形形狀氣泡
• 陰影：箭頭包含高程，dx，dy，半徑和顏色，在氣泡下繪製陰影

用法