Compose Bubble

Jetpack componer burbuja de chat de habla

Ancho de burbujas de chat/discurso Diferentes propiedades de flecha, fondo, sombra para crear burbujas de chat como WhatsApp, Telegram u otras aplicaciones de mensajería tienen o flechas con flecha en la parte inferior para crear burbujas de información.

Configuración de graduación

Para obtener un proyecto GIT en su construcción:

• Paso 1. Agregue el repositorio de jitpack a su archivo de compilación, agrégalo en su construcción raíz. Gradle al final de los repositorios:

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

• Paso 2. Agregue la dependencia

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

Modifier.bubble , o createbubbleshape función para crear esto como Shape o BubbleLayout como en demostración como

@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

Hay 4 demostraciones para probar burbujas .

• DemoFullChat es una pequeña muestra de chat que muestra flecha en el primer mensaje desde el remitente o usuario
• DemoDynamicSize es para cambiar las burbujas dinámicamente para observar los cambios en tiempo real. Puede agregar sus burbujas personalizadas para probar cambios dinámicos.
• DemoBubbles muestra algunas burbujas de muestra
• DemoSimpleLayout es para demostrar restricciones Placeable Constraints.offset(x,y) y Contrainsts.constrainWidth Layout

Chat completo z	Tamaño dinámico	Muestras de burbujas

Bubblestado

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

Para crear un bubblestate para modificar la burbuja que se dibujará, use una de las sobrecargas de funciones de recuerdo

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

Propiedades

• Backgroundcolor : Color of Bubble
• Cornerradius : construye un radio para cada lado del rectángulo de burbujas
• Alineación : la alineación de la flecha determina en qué lado de la burbuja se debe dibujar esta flecha. Cuando se selecciona Arrowalignment.none no se dibuja no.
• Arrowshape : forma de la flecha, puede ser correcto o triángulo isósceles o forma curva
• ArrowOffSetX : desplazamiento vertical para flecha que se coloca en la parte superior o en la parte inferior de la burbuja. Los valores positivos se mueven la flecha a la derecha mientras los valores negativos se mueven a la izquierda. La posición de la flecha es limitada entre la izquierda del contenido y el contenido derecho menos el ancho de la flecha.
• ArrowOffSety : desplazamiento vertical para la flecha que se coloca en el lado izquierdo o derecho de la burbuja. Los valores positivos mueven la flecha inferior mientras los valores negativos se mueven hacia arriba. La posición de la flecha es limitada entre la parte superior del contenido y el contenido inferior menos la altura de la flecha.
• Anwewidth de flecha : ancho de la flecha
• ArrowHeight : Altura de la flecha
• Arrowradius : Radio de la flecha curva la punta de la flecha
• Dibuja : si debemos dibujar flecha o solo tener burbuja de forma rectangular
• Shadow : de la flecha contiene elevación, dx, dy, radio y color para dibujar sombra debajo de la burbuja

Uso