聊天界面实现

Tiny Rocket

已于 2024-03-28 18:32:06 修改

阅读量27

点赞数

文章标签： android java

于 2024-03-28 18:22:23 首次发布

原文链接：https://blog.51cto.com/u_14224/6909830

版权

本文介绍了如何在Android应用中使用RecyclerView实现聊天界面的设计，包括XML布局、消息对象、适配器的创建和主Activity的交互逻辑。展示了如何创建QQ气泡式的聊天对话框，以及如何处理发送和接收消息的不同布局显示。

摘要由CSDN通过智能技术生成

聊天界面使用 RecyclerView

1.1 在 grale.xml 中添加包的引用

compile 'com.android.support:appcompat-v7:25.3.1' compile 'com.android.support.constraint:constraint-layout:1.0.2' compile 'com.android.support:recyclerview-v7:25.3.1'

1.2 编写主界面

activity_main.xml 设置布局：一个 RecyclerView 放聊天对话框，一个输入框和一个发送按钮

<?xml version="1.0" encoding="utf-8"?>
<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_recycle_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />

</LinearLayout>

2. 聊天对话框的布局

QQ 气泡一样的布局方式，收到的消息左对齐，发出的消息右对齐，气泡图片作为背景图。前面已经定义了 RecyclerView，所以对其子项进行布局：新建布局文件 msg_item.xml。

<?xml version="1.0" encoding="utf-8"?>
<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="10dp">

</LinearLayout>

</LinearLayout>

3. 消息对象

消息分为发送的消息和收到的消息，所以要有消息类型，还需要有消息的内容。

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 static int getTypeReceived() {
return TYPE_RECEIVED;
}

public static int getTypeSent() {
return TYPE_SENT;
}

public String getContent() {
return content;
}

public void setContent(String content) {
this.content = content;
}

public int getType() {
return type;
}

public void setType(int type) {
this.type = type;
}
}

4. RecyclerView适配器

ublic class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.ViewHolder> {

private List<Msg> mMsgList;

static class ViewHolder extends RecyclerView.ViewHolder {

LinearLayout leftLayout;

LinearLayout rightLayout;

TextView leftMsg;

TextView rightMsg;

// view表示父类的布局，用其获取子项
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(List<Msg> msgList) {
mMsgList = msgList;
}

/**
* 创建 ViewHolder 加载 RecycleView 子项的布局
*
* @param parent
* @param viewType
* @return
*/
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.msg_item, parent, false);
return new ViewHolder(view);
}

/**
* 为 RecycleView 子项赋值
* 赋值通过 position 判断子项位置
* 当子项进入界面时执行
*
* @param holder
* @param position
*/
@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.rightLayout.setVisibility(View.VISIBLE);
holder.leftLayout.setVisibility(View.GONE);
holder.rightMsg.setText(msg.getContent());
}
}

@Override
public int getItemCount() {
return mMsgList.size();
}
}

5. MainActivity

public class MainActivity extends AppCompatActivity {
private List<Msg> msgList = new ArrayList<Msg>();

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_recycle_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);
// 当有新消息时，刷新ListView中的显示
adapter.notifyItemInserted(msgList.size() - 1);
// 将ListView定位到最后一行
msgRecyclerView.scrollToPosition(msgList.size() - 1);
// 清空输入框中的内容
inputText.setText("");
}
}
});
}

/**
* 初始化聊天消息
*/
private void initMsgs() {
Msg msg1 = new Msg("Hello guy.", Msg.TYPE_RECEIVED);
msgList.add(msg1);
Msg msg2 = new Msg("Hello. Who is that?", Msg.TYPE_SENT);
msgList.add(msg2);
Msg msg3 = new Msg("This is Tom. Nice talking to you. ", Msg.TYPE_RECEIVED);
msgList.add(msg3);
}
}