Compose Bubble

Jetpack menyusun gelembung obrolan ucapan

Lebar Bubble Obrolan/Bicara Panah, Latar Belakang, Properti Bayangan untuk Membuat Gelembung Obrolan Seperti WhatsApp, Telegram atau Aplikasi Pesan Lainnya Memiliki atau Panah Dengan Panah Di Bawah Untuk Membuat Gelembung Info.

Pengaturan Gradle

Untuk mendapatkan proyek git ke dalam build Anda:

• Langkah 1. Tambahkan Repositori Jitpack ke file build Anda Tambahkan di root build Anda.gradle di akhir repositori:

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

• Langkah 2. Tambahkan ketergantungan

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

Modifier.bubble , atau createBubbleShape fungsi untuk membuat ini sebagai Shape atau BubbleLayout seperti dalam demo seperti

@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

Ada 4 demo untuk menguji gelembung .

• DemoFullChat adalah sampel obrolan kecil yang menampilkan panah pada pesan pertama dari pengirim atau pengguna
• DemoDynamicSize adalah untuk mengubah gelembung secara dinamis untuk mengamati perubahan dalam waktu nyata. Anda dapat menambahkan gelembung khusus Anda untuk menguji perubahan dinamis.
• DemoBubbles menampilkan beberapa gelembung sampel
• DemoSimpleLayout adalah untuk menunjukkan Constraints.offset(x,y) dan Contrainsts.constrainWidth pada Layout dan Placeable

Obrolan lengkap z	Ukuran dinamis	Sampel gelembung

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

untuk membuat bubblestate untuk memodifikasi gelembung yang akan ditarik gunakan salah satu kelebihan fungsi ingat

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

Properti

• latar belakang warna : warna gelembung
• Cornerradius : Membangun jari -jari untuk setiap sisi bubble rectangle
• Alignment : Petra Alignment menentukan di sisi gelembung mana panah ini harus ditarik. Ketika arrowalignment. Tidak ada yang dipilih tidak ada panah yang ditarik.
• Arrowshape : Bentuk panah, bisa benar atau sejenisnya segitiga atau bentuk melengkung
• Arrowoffsetx : Offset vertikal untuk panah yang diposisikan di atas atau di bagian bawah gelembung. Nilai positif bergerak panah ke kanan sementara nilai negatif bergerak ke kiri. Posisi panah terbatas antara kiri konten dan konten, minus panah.
• Arrowoffsety : Offset vertikal untuk panah yang diposisikan di sisi kiri atau kanan gelembung. Nilai positif memindahkan panah bawah sementara nilai negatif naik. Posisi panah terbatas antara bagian atas konten dan konten minus panah.
• Arrowwidth : Lebar panah
• Panah : Tinggi panah
• Arrowradius : jari -jari panah melengkung ujung panah
• Drawarrow : Apakah kita harus menggambar panah atau hanya memiliki gelembung bentuk persegi panjang
• Bayangan : dari panah berisi ketinggian, dx, dy, jari -jari dan warna untuk menggambar bayangan di bawah gelembung

Penggunaan