安卓实现微信聊天气泡

一搜没一个能用的,我来:

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/history_time"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:text="05月25日 22:14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <com.xmkjsoft.xhgh.self.CircularImageView
        android:src="@color/main_color"
        android:id="@+id/head_img"
        app:layout_constraintTop_toBottomOf="@id/history_time"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="40dp"
        android:layout_height="40dp"/>


        <!-- 聊天气泡中的内容,如文本、图片等 -->
        <TextView
            app:layout_constraintTop_toTopOf="@id/head_img"
            app:layout_constraintLeft_toRightOf="@id/head_img"
            app:layout_constraintRight_toRightOf="parent"
            android:background="@drawable/left_chat_bubble"
            android:layout_marginRight="20dp"
            android:id="@+id/message_text_left"
            android:layout_width="0dp"
            android:paddingLeft="20dp"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:layout_height="wrap_content"
            android:text="这是一个左这是一个左这是一个左这是一个这是一个左这是一个左这是一个一个这是一个左这是一个左"
            android:textColor="@color/white"
            android:textSize="16sp" />




    <!--右消息-->

    <com.xmkjsoft.xhgh.self.CircularImageView
        android:layout_marginTop="20dp"
        android:src="@color/main_color"
        android:id="@+id/head_img_right"
        app:layout_constraintTop_toBottomOf="@id/message_text_left"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="40dp"
        android:layout_height="40dp"/>


    <!-- 聊天气泡中的内容,如文本、图片等 -->
    <TextView
        app:layout_constraintTop_toTopOf="@id/head_img_right"
        app:layout_constraintRight_toLeftOf="@id/head_img_right"
        app:layout_constraintLeft_toLeftOf="parent"
        android:background="@drawable/right_chat_bubble"
        android:layout_marginLeft="20dp"
        android:id="@+id/message_text_right"
        android:layout_width="0dp"
        android:paddingRight="10dp"
        android:paddingLeft="10dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:layout_height="wrap_content"
        android:text="这是一个左这是一个左这是一个左这是一个这是一个左这是一个左这是一个一个这是一个左这是一个左"
        android:textColor="@color/white"
        android:textSize="16sp" />


<!--    <TextView-->
<!--        android:background="@drawable/left_chat_bubble"-->
<!--        android:layout_marginLeft="20dp"-->
<!--        android:text="你好6666666666"-->
<!--        -->
<!--        android:layout_width="wrap_content"-->
<!--        android:layout_height="wrap_content"/>-->





</androidx.constraintlayout.widget.ConstraintLayout>

左边气泡 drawable 文件:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item android:left="8dp">
                <shape>
                    <corners android:radius="4dp" />
                    <solid android:color="@color/main_color" />
                </shape>
            </item>
        </layer-list>
    </item>
    <item
        android:gravity="left|top"
        android:top="10dp">
        <rotate
            android:fromDegrees="45"
            android:pivotX="50%"
            android:pivotY="135%">
            <shape android:shape="rectangle">
                <size
                    android:width="8dp"
                    android:height="8dp" />
                <solid android:color="@color/main_color" />
            </shape>
        </rotate>
    </item>
</layer-list>

右边气泡 drawable 文件:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item android:right="8dp">
                <shape>
                    <corners android:radius="4dp" />
                    <solid android:color="#4CAF50" />
                </shape>
            </item>
        </layer-list>
    </item>
    <item
        android:gravity="right|top"
        android:top="0dp">
        <rotate
            android:fromDegrees="45"
            android:pivotX="-135%"
            android:pivotY="50%">
            <shape android:shape="rectangle">
                <size
                    android:width="8dp"
                    android:height="8dp" />
                <solid android:color="#4CAF50" />
            </shape>
        </rotate>
    </item>
</layer-list>

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 19:10:03       66 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 19:10:03       70 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 19:10:03       57 阅读
  4. Python语言-面向对象

    2024-07-09 19:10:03       68 阅读

热门阅读

  1. Linux系统中卸载GitLab

    2024-07-09 19:10:03       26 阅读
  2. P8086 『JROI-5』Music

    2024-07-09 19:10:03       24 阅读
  3. Scala学习笔记15: 文件和正则表达式

    2024-07-09 19:10:03       18 阅读
  4. SQLite Glob 子句

    2024-07-09 19:10:03       25 阅读
  5. 下降npm版本 Node版本与NPM版本对应关系

    2024-07-09 19:10:03       36 阅读
  6. VSCode使用Makefile管理工程

    2024-07-09 19:10:03       33 阅读