【Android】实现聊天背景框效果

三三是该溜子

发布于 2025-07-20 08:44:10

10400

代码可运行

文章被收录于专栏：该溜子的专栏该溜子的专栏

运行总次数：0

代码可运行

三三想成为安卓糕手

一：聊天小功能设计

我们现在要做一款，聊天冒泡小功能要达成的效果

①点击按钮聊天框中自动添加设置好的内容

②聊天框的尺寸大小跟随文本内容的大小而动态缩放

③avatar随聊天框的移动而移动

1：xml代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".image.ChatActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_message"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:layout_weight="1"
            android:background="@drawable/bg_chat_message"
            android:paddingLeft="30dp"
            android:paddingTop="30dp"
            android:paddingRight="30dp"
            android:paddingBottom="30dp"
            android:textColor="@color/my_blue" />

        <ImageView
            android:id="@+id/iv_avatar"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginTop="50dp"
            android:src="@drawable/icon_face" />

    </LinearLayout>

    <Button
        android:id="@+id/btn_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点击添加内容" />


</LinearLayout>

2：Java代码

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chat);

        Button btnSend = findViewById(R.id.btn_send);
        TextView tvMessage = findViewById(R.id.tv_message);

        btnSend.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String str = "I Love You , You Love Me , 蜜雪冰城甜蜜蜜~~\n";
                tvMessage.append(str);
            }
        });

    }

（1）append方法分析

这里是设置了一个按钮的监听器，每次点击按钮，我们就让TextView中的稳重追加设置好的字符串内容

3：效果

二：代码分析

1：margin和padding对比

（1）代码分析

			android:layout_marginTop="30dp"

			android:paddingTop="30dp"
            android:paddingBottom="30dp"
            android:paddingLeft="30dp"
            android:paddingRight="30dp"

margin是指外边距：主要是指视图与视图之间的距离，是外部空间

padding是指内边距：比如Top，就是视图内部上边距与文本的距离

（2）效果对比

2：Weight

（1）问题引入

（2）代码分析

权重，

举个例子，现在聊天框和笑脸是公用，我们如果给ImageView的Weight也设置成1；

那就相当于，总的权重为2，TextVIew所占空间为1/2=二分之一行，ImageView同理

下面这样设置，TextView为0，权重为1，意思就是把除了 Image的60dp宽度以外的所有位置占满；（米奇妙妙屋~~）

<TextView
		android:layout_weight="1"
		android:layout_width="0dp"/>

<ImageView
            android:id="@+id/iv_avatar"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginTop="50dp"
            android:src="@drawable/icon_face" />