Compose Bubble

Compose Bubble

AI ソースコード

v1.1.0

ダウンロード

ジェットパックはスピーチチャットバブルを作成します

チャット/スピーチバブル幅さまざまな矢印、背景、シャドウプロパティWhatsApp、Telegram、その他のメッセージングアプリなどのチャットバブルを作成して、ボトムに矢印が付いた矢印があり、情報バブルを作成します。

Gradleセットアップ

gitプロジェクトをビルドに入れるには：

ステップ1。jitpackリポジトリをビルドファイルに追加します。ルートビルドに追加します。

 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	動的サイズ	バブルサンプル

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

描画するバブルを変更するバブブレスト酸塩を作成するには、記憶力の過負荷の1つを使用します

 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 ：バブル長方形の両側の半径を構築します
アライメント：矢印のアライメントにより、この矢印を描くべきバブルのどちら側が描かれるべきかが決まります。矢印が選択されている場合、矢印は描かれていません。
arrowshape ：矢印の形状、それは正しいものであるか、イソシェルの三角形または湾曲した形状である可能性があります
arrowoffsetx ：上部またはバブルの下部に配置される矢印の垂直オフセット。正の値は矢印を右に移動し、負の値は左に移動します。矢印の位置は、コンテンツの左とコンテンツの右側の矢印の幅から制限されています。
Arrowoffsety ：バブルの左または右側に配置された矢印の垂直オフセット。正の値は矢印を動かし、負の値は上昇します。矢印の位置は、コンテンツの上部とコンテンツの下部から矢の高さを差し引いて制限されています。
矢印幅：矢印の幅
arrowheight ：矢の高さ
Arrowradius ：矢印の半径は矢印の先端を曲がります
Drawarrow ：矢印を描くべきか、長方形の形状の泡のみを持っているかどうか
影：矢印の標高、dx、dy、radius、色が含まれています。