编写QQ聊天界面实例

效果展现：

实现步骤：

1.添加RecyclerView包
2.将编辑主页面的布局
3.创建RecyclerView的布局，实体类，适配器
4.在主页面完成数据的初始化，绑定适配器，设置监听等

代码实现：

1.准备两张9.png图片，用于接收信息和发送消息的背景，可以借鉴我上一篇的博客：9.png图片制作方法链接

2.添加RecyclerView的依赖包：

compile 'com.android.support:recyclerview-v7:26.1.0'

3.编写主页面，修改MainActivity的布局：

<?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:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.example.uibestpractice.MainActivity"><android.support.v7.widget.RecyclerView
        android:id="@+id/msg_recycler_view"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></android.support.v7.widget.RecyclerView><LinearLayout
        android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><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="发送"/></LinearLayout></LinearLayout>

4.创建RecyclerView的布局msg_item.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:padding="10dp"><LinearLayout
        android:id="@+id/left_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"android:background="@drawable/message_left"><TextView
            android:id="@+id/left_msg"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_margin="10dp"android:textColor="#fff" /></LinearLayout><LinearLayout
        android:id="@+id/right_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:background="@drawable/message_right"><TextView
            android:id="@+id/right_msg"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_margin="10dp"android:textColor="#000" /></LinearLayout></LinearLayout>

在Recyclerview布局中接收和发送的布局都有，后面通过Visibility属性来控制一个消失

5.创建RecyclerView的实体类Msg：

public class Msg {//设置接收还是发送的标志位public static final int TYPE_RECEIVED = 0;public static final int TYPE_SEND = 1;//content表示消息内容private String content;//type表示消息类型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 getTypeSend() {return TYPE_SEND;}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;}
}

5.创建RecyclerView的适配器：

public class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.ViewHolder> {private List<Msg> msgList;public MsgAdapter(List<Msg> msgList) {this.msgList = msgList;}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.msg_item, parent, false);ViewHolder holder = new ViewHolder(view);return holder;}@Overridepublic void onBindViewHolder(ViewHolder holder, int position) {Msg msg = msgList.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_SEND) {holder.rightLayout.setVisibility(View.VISIBLE);holder.leftLayout.setVisibility(View.GONE);holder.rightMsg.setText(msg.getContent());}}@Overridepublic int getItemCount() {return msgList.size();}static class ViewHolder extends RecyclerView.ViewHolder {LinearLayout leftLayout;LinearLayout rightLayout;TextView leftMsg;TextView rightMsg;public ViewHolder(View itemView) {super(itemView);leftLayout = itemView.findViewById(R.id.left_layout);rightLayout = itemView.findViewById(R.id.right_layout);leftMsg = itemView.findViewById(R.id.left_msg);rightMsg = itemView.findViewById(R.id.right_msg);}}
}

6.在主页面完成数据的初始化，绑定适配器，设置监听等

public class MainActivity extends AppCompatActivity {private EditText inputMsg;private Button sendBtn;private RecyclerView recyclerView;private MsgAdapter adapter;private List<Msg> msgList = new ArrayList<>();private static final String TAG = "MainActivity";@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//将导航栏隐藏ActionBar actionBar = getSupportActionBar();if (actionBar != null) {actionBar.hide();}bangID();//初始化列表，添加一些数据initMsgList();LinearLayoutManager manager = new LinearLayoutManager(MainActivity.this);recyclerView.setLayoutManager(manager);adapter = new MsgAdapter(msgList);recyclerView.setAdapter(adapter);//通过对按钮进行监听，来放松消息sendBtn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {String content = inputMsg.getText().toString();//当输入框不为空时，发送数据if (!"".equals(content)) {Msg msg = new Msg(content, Msg.TYPE_SEND);msgList.add(msg);Log.e(TAG, "onClick: "+msgList.size() );//通过notifyItemInserted（）方法更新列表adapter.notifyItemInserted(msgList.size() - 1);//通过scrollToPosition（）方法将显示的数据定位到最后一行，使得你能够看到发送的最后一条消息recyclerView.scrollToPosition(msgList.size() - 1);//清空输入框inputMsg.setText("");}}});}private void initMsgList() {Msg msg = new Msg("在吗？", Msg.TYPE_RECEIVED);msgList.add(msg);Msg msg1 = new Msg("在的,怎么，想我了", Msg.TYPE_SEND);msgList.add(msg1);Msg msg2 = new Msg("想得美", Msg.TYPE_RECEIVED);msgList.add(msg2);}private void bangID() {inputMsg = findViewById(R.id.input_text);sendBtn = findViewById(R.id.send);recyclerView = findViewById(R.id.msg_recycler_view);}
}

编写QQ聊天界面实例相关推荐

C语言实现类似QQ聊天界面抖动功能
该博文为原创文章,未经博主同意不得转载,如同意转载请注明博文出处本文章博客地址:https://cplusplus.blog.csdn.net/article/details/104991863 实 ...
点击跳转到QQ聊天界面
<a href="tencent://message/?uin=QQ号码&Site=&Menu=yes"> ...
gui编程实践(2)--qq聊天界面 JTextArea多行文本框组件
//qq聊天界面 package com.test; import java.awt.*; import javax.swing.*; public class Demo8_10 extends JF ...
【3】QQ 聊天界面
1.说明稍微修改了下QQ示例里面的聊天界面界面,然后把代码扣过来完成了QQ聊天界面部分,效果还可以. 不过自己添加了消息响应:窗口抖动,截屏,字体栏的显示和隐藏 2.代码部分 // QQTalk.h ...
qt小项目代码实现简易的QQ聊天界面
qt小项目代码实现简易的QQ聊天界面代码效果图总结代码 myDialog.h #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QW ...
QQ聊天界面的布局和设计(IOS篇)-第二季
QQChat Layout - 第二季本来第二季是快写好了, 也花了点功夫, 结果gitbook出了点问题, 给没掉了.有些细节可能会一带而过, 如有疑问, 相互交流进步~. 在第一季中我们完成了Q ...
防qq聊天界面纯HTML5,html5 实现qq聊天的气泡效果
教程:http://m.blog.csdn.net/blog/yhc13429826359/38778337 写的很好.自己实现的时候,由于img float:left,会脱离文档流,导致结构混乱. ...
UI界面编写(仿QQ聊天界面)
UI界面编写实战这里我们模拟QQ聊天的主界面,编写一个简单的聊天界面. 项目描述首先搭建我们的主界面,在最上边放一个标题栏,然后是一个ListView,用于展示发送的消息,最下边是选择要发送的表情 ...
Android 仿qq聊天界面之一
一.登录界面本来是只想仿一个qq的聊天界面的,顺便做了一个登录界面,熟悉下SharedPreferences(解释一下:SharedPreferences由于非常适合记录一些零散的简单的数据,因此登 ...

编写QQ聊天界面实例

效果展现：

实现步骤：

代码实现：

1.准备两张9.png图片，用于接收信息和发送消息的背景，可以借鉴我上一篇的博客：9.png图片制作方法链接

2.添加RecyclerView的依赖包：

3.编写主页面，修改MainActivity的布局：

4.创建RecyclerView的布局msg_item.xml：

5.创建RecyclerView的实体类Msg：

5.创建RecyclerView的适配器：

6.在主页面完成数据的初始化，绑定适配器，设置监听等

编写QQ聊天界面实例相关推荐

最新文章

热门文章