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，半径和颜色，在气泡下绘制阴影

用法