Compose Bubble

Jetpack compõe a bolha de bate -papo de fala

Largura da bolha de bate -papo/fala de seta diferente, plano de fundo, propriedades de sombra para criar bolhas de bate -papo como Whatsapp, Telegram ou outros aplicativos de mensagens têm ou setas com seta na parte inferior para criar informações de informações.

Configuração gradle

Para obter um projeto Git em sua construção:

• Etapa 1. Adicione o repositório Jitpack ao seu arquivo de construção, adicione -o ao seu root Build.Gradle no final dos repositórios:

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

• Etapa 2. Adicione a dependência

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

Modifier.bubble 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

Existem 4 demos para testar bolhas .

• DemoFullChat é uma amostra de bate -papo pequena que exibe seta na primeira mensagem do remetente ou usuário
• DemoDynamicSize é para alterar as bolhas dinamicamente para observar mudanças em tempo real. Você pode adicionar suas bolhas personalizadas para testar alterações dinâmicas.
• DemoBubbles exibe algumas bolhas de amostra
• DemoSimpleLayout Placeable Layout demonstrar Contrainsts.constrainWidth Constraints.offset(x,y)

Chat completo z	Tamanho dinâmico	Amostras de bolhas

Bubblestate

 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 criar um bubblestate para modificar a bolha para ser desenhada, use uma das sobrecargas de funções de lembrança

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

Propriedades

• BackgroundColor : cor da bolha
• Cornerradius : constrói um raio para cada lado do retângulo de bolhas
• Alinhamento : o alinhamento da seta determina em que lado da bolha essa seta deve ser desenhada. Quando seta seta. Nenhuma é selecionada, nenhuma seta é desenhada.
• Marca de seta : forma da seta, pode estar certa ou isosceles triângulo ou forma curva
• Arrowoffsetx : deslocamento vertical para seta que está posicionada na parte superior ou na parte inferior da bolha. Os valores positivos movem a seta para a direita enquanto os valores negativos se movem para a esquerda. A posição da seta é limitada entre a esquerda do conteúdo e o conteúdo da largura da seta direita menos.
• Arrowoffsety : deslocamento vertical para seta que está posicionada no lado esquerdo ou direito da bolha. Os valores positivos movem a seta no fundo enquanto os valores negativos aumentam. A posição de seta é limitada entre a parte superior do conteúdo e o conteúdo inferior menos a altura da seta.
• Arrowidth : largura da seta
• Fazenda : altura da seta
• Arrowrado : raio da seta curva a ponta da seta
• Drawarrow : se devemos desenhar seta ou apenas ter uma bolha de forma do retângulo
• Sombra : da seta contém elevação, dx, dy, raio e cor para desenhar sombra abaixo da bolha

Uso