Compose Bubble

Jetpack komponieren Sprach -Chat -Blase

Chat/Sprachblasenbreite Unterschiedlicher Pfeil, Hintergrund und Schatteneigenschaften zum Erstellen von Chat -Blasen wie WhatsApp, Telegramm oder anderen Messaging -Apps haben oder Pfeile mit Pfeil unten, um Infoblasen zu erstellen.

Gradle Setup

Um ein Git -Projekt in Ihren Build zu bringen:

• Schritt 1. Fügen Sie das JITPACK -Repository in Ihre Build -Datei hinzu, fügen Sie es in Ihrem Stammbau hinzu. Gradle am Ende von Repositories:

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

• Schritt 2. Fügen Sie die Abhängigkeit hinzu

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

Modifier.bubble oder CreateBubBleshape -Funktion, um dies als Shape oder BubbleLayout wie in der Demo zu erstellen, z. B.

@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

Es gibt 4 Demos, um Blasen zu testen.

• DemoFullChat ist ein kleines Chat -Beispiel, das Pfeil auf der ersten Nachricht vom Absender oder Benutzer anzeigt
• DemoDynamicSize dient dazu, blasen dynamisch zu ändern, um Veränderungen in Echtzeit zu beobachten. Sie können Ihre benutzerdefinierten Blasen hinzufügen, um dynamische Änderungen zu testen.
• DemoBubbles zeigt einige Beispielblasen an
• DemoSimpleLayout dient zum Nachweis Constraints.offset(x,y) und Contrainsts.constrainWidth auf Layout und Placeable

Voller Chat z	Dynamische Größe	Blasenproben

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

So erstellen

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

Eigenschaften

• Hintergrundkolor : Farbe der Blase
• Cornerradius : Konstruiert einen Radius für jede Seite des Blasenrechtecks
• Ausrichtung : Die Pfeilausrichtung bestimmt, in welcher Seite der Blase dieser Pfeil gezogen werden sollte. Wenn eine PfeilAnignment.none ausgewählt wird, wird kein Pfeil gezogen.
• Arrowshape : Form des Pfeils, es kann richtig sein oder dreieck oder gekrümmte Form
• ArrowoffsetX : Vertikaler Versatz für Pfeil, der oben oder unten in der Blase positioniert ist. Positive Werte bewegen den Pfeil nach rechts, während sich negative Werte nach links bewegen. Die Pfeilposition ist zwischen links von Inhalt und Inhalt rechts abzüglich Pfeilbreite begrenzt.
• Pfeiloffsety : Vertikaler Versatz für Pfeil, der auf der linken oder rechten Seite der Blase positioniert ist. Positive Werte bewegen den Pfeil unten, während sich negative Werte nach oben bewegen. Die Pfeilposition ist zwischen den Oberseite des Inhalts und dem Inhalt unter unten minus Pfeilhöhe begrenzt.
• Pfeilbreite : Breite des Pfeils
• Pfeilheight : Höhe des Pfeils
• Arrowradius : Radius des Pfeils krümt sich die Spitze des Pfeils
• Drawarrow : Ob wir Pfeil zeichnen oder nur eine Rechteck -Formblase haben sollten
• Schatten : des Pfeils enthält Erhöhung, DX, DY, Radius und Farbe, um Schatten unter der Blase zu zeichnen

Verwendung