Android气泡对话效果

需要的工具

1. 下载对话气泡的PNG图片
2. android studio
3. RecyclerView
4. 时间和耐心

创建项目、制作Nine-Patch图片

1. Nine-Patch图片：一种被特殊处理过的png图片，指定那些区域可以被拉伸，那些区域不可变
2. 为什么使用：在我们发送消息时，对话框的文本大小是不可定的，要气泡跟文本大小匹配，必然要将图片拉伸，直接拉伸会导致图片的失真，让界面不好看
3. 如何制作：在Android Studio 2.3版本开始，制作的功能直接集成在Android Studio中
   1. 将下载好的图片导入到项目中（注意！一定要是png图片）
   2. 在项目文件中找到该文件，选中该图片右键点击，在下拉菜单中找到“Create 9-patch file…”点击创建Nine-Patch图片
   3. 点击创建好的*.9.png图片，通过鼠标对边框进行拖动，黑色部分表示绘制的可拉伸部分（按住Shift键拖动可对绘制的部分进行擦除），右边是预览窗口，可对拉伸效果进行预览
   4. 完成处理后保存该图片。（对原图片进行替换）

设置布局界面

1. 制作好左边气泡和右边气泡的Nine-Patch图片
2. 由于要用到RecyclerView，在这里我们将添加依赖库：
   在项目文件夹app/gradle当中添加依赖库：compile ‘com.android.support:recyclerview-v7:26.1.0’
   如下所示

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.android.support:recyclerview-v7:26.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}

3.编写主界面，修改activity_main.xml中的代码，如下所示

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#d8e0e8">

    <android.support.v7.widget.RecyclerView  
        android:id="@+id/msg_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

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

<EditText
    android:id="@+id/input_text"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:hint = "输入要发送的内容："
    android:maxLines="2"/>

    <Button
        android:id="@+id/send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="发送/send"
        android:textAlignment="center"
        android:textColor="@android:color/holo_red_light" />

    LinearLayout>
LinearLayout>

4.编写RecyclerView子项的布局，新建msg_item.xml,代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp">

    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:background="@drawable/left">

        <TextView
            android:id="@+id/left_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="0dp"
            android:textColor="@color/colorAccent"
            android:textSize="22sp" />


    LinearLayout>
    <LinearLayout
        android:id="@+id/right_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@drawable/right">

        <TextView
            android:id="@+id/right_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="0dp"
            android:textColor="?android:attr/colorForeground"
            android:textSize="22sp" />

    LinearLayout>
LinearLayout>

创建消息实体类和RecyclerView适配器类

1. 创建消息的实体类，新建Msg.java，代码如下所示：

package com.*********;  //你自己的包名

public class Msg {
    public static final int TYPE_RECEIVED = 0;  //表示这是一条收到的消息
    public static final int TYPE_SENT = 1;      //表示这是一条发送的消息
    private String content;                     //消息内容
    private int type;                           //消息类型
    public Msg(String content,int type){        //构造函数，初始化数据
        this.content = content;
        this.type = type;
    }
    public String getContent() {                 //返回消息内容
        return content;
    }
    public int getType(){                        //返回消息类型
        return type;
    }
}

2.创建适配器类MsgAdapter，代码如下所示：

package com.**********;                               //你自己的包名

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.List;


/* 适配器继承自RecyclerView.Adapter，将泛型指定为MsgAdapter.ViewHolder */
/* ViewHolder是在MsgAdapter中定义的一个内部类 */
public class MsgAdapter extends RecyclerView.Adapter.ViewHolder>{
    private List mMsgList;                                    //储存消息

    /*定义 LinearLayout 和 TextView 通过view.findViewById将他们跟实例绑定起来 */
    /*继承自RecyclerView.ViewHolder*/
    static class ViewHolder extends RecyclerView.ViewHolder {  
        LinearLayout leftLayout;
        LinearLayout rightLayout;
        TextView leftMsg;
        TextView rightMsg;

        public ViewHolder(View view) {
            super(view);
            leftLayout = (LinearLayout) view.findViewById(R.id.left_layout);
            rightLayout = (LinearLayout) view.findViewById(R.id.right_layout);
            leftMsg = (TextView) view.findViewById(R.id.left_msg);
            rightMsg = (TextView) view.findViewById(R.id.right_msg);
        }
    }
     /*构造函数传入数据*/
    public MsgAdapter(ListmsgList){   
        mMsgList = msgList;
    }


/*重写onCreateViewHolder()， onBindViewHolder(),getItemCount()方法*/
    @Override
    /*创建ViewHoldle实例，在这个方法中，将布局加载进来，并传入到构造函数中，实例返回*/
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.msg_item,parent,false);
        return new ViewHolder(view);
    }

/*对RecyclerView子项的数据进行赋值，在子项滚动到屏幕内执行，通过position得到当前项的msg实例，将数据传入到TextView和LinearLayout中*/
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Msg msg = mMsgList.get(position);
        if(msg.getType()==Msg.TYPE_RECEIVED){
        /*如果收到消息，显示左边的消息布局，隐藏右边的消息布局*/
            holder.leftLayout.setVisibility(View.VISIBLE);
            holder.rightLayout.setVisibility(View.GONE);
            holder.leftMsg.setText(msg.getContent());
        }else if(msg.getType()==Msg.TYPE_SENT){
        /*如果发送消息，显示右边的消息布局，隐藏左边的消息布局*/
            holder.leftLayout.setVisibility(View.GONE);
            holder.rightLayout.setVisibility(View.VISIBLE);
            holder.rightMsg.setText(msg.getContent());
        }
    }

/*返回有多少子项（数据源的长度）*/
    @Override
    public int getItemCount() {
        return  mMsgList.size();
    }
}

MainActivity

初始化数据，加入按钮事件响应，代码如下：

package com.***************;                         //你自己的包名

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private ListmsgList=new ArrayList<>();
    private EditText inputText;
    private Button send;
    private RecyclerView msgRecyclerView;
    private MsgAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initMsgs();                   //初始化消息数据
        inputText=(EditText)findViewById(R.id.input_text);
        send = (Button)findViewById(R.id.send);
        msgRecyclerView = (RecyclerView)findViewById(R.id.msg_recycler_view);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        msgRecyclerView.setLayoutManager(layoutManager);
        adapter = new MsgAdapter(msgList);
        msgRecyclerView.setAdapter(adapter);
        send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String content = inputText.getText().toString();
                if(!"".equals(content)){
                    Msg msg = new Msg(content,Msg.TYPE_SENT);
                    msgList.add(msg);
                    adapter.notifyItemInserted(msgList.size()-1);  //刷新显示
                    msgRecyclerView.scrollToPosition(msgList.size()-1);  //定位到最后一行
                    inputText.setText("");  //清空输入框的消息
                }
            }
        });
    }


/*初始化几条消息 作为演示*/
    private void initMsgs() {
        Msg msg1 = new Msg("你好，这是一个气泡效果demo。",Msg.TYPE_RECEIVED);
        msgList.add(msg1);
        Msg msg2 = new Msg("你好，请问你是？",Msg.TYPE_SENT);
        msgList.add(msg2);
        Msg msg3 = new Msg("我是子靖,遇见你很开心！",Msg.TYPE_RECEIVED);
        msgList.add(msg3);
    }
}

还望指正…