Compose Bubble

Jetpack compose la bulle de chat vocal

Chat / Speech Bubble Largeth Différent flèches, arrière-plan, propriétés de l'ombre pour créer des bulles de chat comme WhatsApp, Telegram ou d'autres applications de messagerie ou des flèches avec des flèches en bas pour créer des informations.

Gradle Configuration

Pour mettre un projet GIT dans votre construction:

• Étape 1. Ajoutez le référentiel Jitpack à votre fichier de build Ajoutez-le dans votre root build.gradle à la fin des référentiels:

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

• Étape 2. Ajouter la dépendance

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

Modifier.bubble , ou création de la fonction debbler pour créer cela comme Shape ou BubbleLayout que dans une démo telle que

@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

Il y a 4 démos pour tester les bulles .

• DemoFullChat est un petit échantillon de chat qui affiche la flèche sur le premier message de l'expéditeur ou de l'utilisateur
• DemoDynamicSize est destiné à changer les bulles dynamiquement pour observer les changements en temps réel. Vous pouvez ajouter vos bulles personnalisées pour tester les modifications dynamiques.
• DemoBubbles affiche quelques échantillons de bulles
• DemoSimpleLayout est pour démontrer Layout Constraints.offset(x,y) et Contrainsts.constrainWidth Placeable

Chat complet z	Taille dynamique	Échantillons de bulles

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

Pour créer un bubblestate pour modifier la bulle pour être dessinée, utilisez l'une des surcharges des fonctions Remember

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

Propriétés

• BackgroundColor : couleur de bulle
• Cornerradius : construit un rayon pour chaque côté du rectangle de bulles
• Alignement : L'alignement de la flèche détermine de quel côté de la bulle, cette flèche doit être dessinée. Lorsque Arrowalignment.mone n'est sélectionné, aucune flèche n'est dessinée.
• Flèche de flèche : forme de la flèche, elle peut être bonne ou triangle isocèle ou forme courbe
• Arrowoffsetx : décalage vertical pour la flèche qui est positionné en haut ou en bas de la bulle. Les valeurs positives se déplacent à droite de la flèche tandis que les valeurs négatives se déplacent à gauche. La position de la flèche est limitée entre la gauche du contenu et le contenu à droite moins la largeur de flèche.
• Arrowoffsety : décalage vertical pour la flèche qui est positionné sur le côté gauche ou droit de la bulle. Les valeurs positives déplacent le fond de la flèche tandis que les valeurs négatives montent. La position de la flèche est limitée entre le haut du contenu et le contenu inférieur moins la hauteur de flèche.
• Arrowwidth : Largeur de la flèche
• Arrowheight : hauteur de la flèche
• Arrowradius : le rayon de la flèche courbe la pointe de la flèche
• Drawarrow : Que nous devions dessiner une flèche ou que nous ayons seulement une bulle de forme rectangulaire
• Shadow : de la flèche contient une élévation, dx, dy, rayon et couleur pour dessiner l'ombre sous la bulle

Usage