Android RecyclerView制作聊天界面

时间:2021-03-21 19:36:12

一、创建两个xml文件

    

 1 —————————————————————————————1.activity_main.xml——————————————————————————————————
 2         <?xml version="1.0" encoding="utf-8"?>
 3         <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 4             xmlns:tools="http://schemas.android.com/tools"
 5             android:id="@+id/activity_main"
 6             android:layout_width="match_parent"
 7             android:layout_height="match_parent"
 8             android:background="@drawable/box_bg"
 9             tools:context="com.example.yanglei.message_box.MainActivity">
10         <LinearLayout
11             android:orientation="horizontal"
12             android:layout_width="match_parent"
13             android:layout_height="wrap_content"
14             android:padding="5dp"
15             android:background="#fff"
16             android:layout_alignParentBottom="true"
17             android:layout_alignParentStart="true"
18             android:id="@+id/linearLayout">
19 
20             <EditText
21                 android:layout_width="230dp"
22                 android:paddingLeft="10dp"
23                 android:layout_height="40dp"
24                 android:inputType="textPersonName"
25                 android:text=""
26                 android:background="@drawable/edi_text_bg"
27                 android:ems="10"
28                 android:hint="请输入内容"
29                 android:id="@+id/input_Text"
30                 android:maxLines="2" />
31 
32             <Button
33                 android:text="发送"
34                 android:layout_width="match_parent"
35                 android:textColor="#fff"
36                 android:background="@drawable/btn_bg"
37                 android:id="@+id/send_mess"
38                 android:layout_marginLeft="5dp"
39                 android:layout_height="39dp" />
40         </LinearLayout>
41 
42         <android.support.v7.widget.RecyclerView
43             android:layout_width="match_parent"
44             android:id="@+id/msg_recycler_view"
45             android:layout_height="match_parent"
46             android:layout_alignParentTop="true"
47             android:layout_alignParentStart="true" />
48     </RelativeLayout>
 1 —————————————————————————————2.messitem.xml——————————————————————————————————
 2     <?xml version="1.0" encoding="utf-8"?>
 3     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 4        android:layout_width="match_parent"
 5         android:layout_height="wrap_content"
 6         android:paddingTop="10dp"
 7         android:paddingRight="10dp"
 8         android:paddingLeft="10dp">
 9         <LinearLayout
10             android:orientation="horizontal"
11             android:layout_width="wrap_content"
12             android:background="@drawable/left"
13             android:id="@+id/layout_left"
14             android:layout_height="wrap_content">
15             <TextView
16                 android:text="哈哈"
17                 android:layout_width="wrap_content"
18                 android:textSize="15dp"
19                 android:layout_height="wrap_content"
20                 android:id="@+id/mess_left" />
21         </LinearLayout>
22         <LinearLayout
23             android:orientation="horizontal"
24             android:layout_width="wrap_content"
25             android:background="@drawable/regin"
26             android:id="@+id/layout_rigin"
27             android:layout_height="wrap_content"
28             android:layout_alignParentTop="true"
29             android:layout_alignParentEnd="true">
30             <TextView
31                 android:text="哈哈"
32                 android:layout_width="wrap_content"
33                 android:textSize="15dp"
34                 android:layout_height="wrap_content"
35                 android:id="@+id/mess_reght" />
36         </LinearLayout>
37     </RelativeLayout>

二、创建两个adawable.xml文件

  

 1 ————————————————3.drawable资源文件,btn_bg.xml。发送按钮的背景颜色——————————————————————
 2     <?xml version="1.0" encoding="utf-8"?>
 3     <selector xmlns:android="http://schemas.android.com/apk/res/android">
 4 
 5         <item android:state_pressed="true">
 6             <shape android:shape="rectangle" >
 7                 <gradient android:startColor="#0686ff" android:endColor="#00b7ff" android:angle="90"/>
 8                 <stroke android:color="#c1c8cc" android:width="1px"/>
 9                 <corners android:radius="3dp"/>
10             </shape>
11         </item>
12 
13 
14         <item>
15             <shape android:shape="rectangle" >
16                 <gradient android:startColor="#1a90ff" android:endColor="#15bdff" android:angle="90"/>
17                 <stroke android:color="#c1c8cc" android:width="1px"/>
18                 <corners android:radius="3dp"/>
19             </shape>
20         </item>
21     </selector>

 

 
 
 1 —————————————————————4.drawable资源文件,editext_bg.xml。文本框的背景——————————————————————
 2         <?xml version="1.0" encoding="utf-8"?>
 3         <selector xmlns:android="http://schemas.android.com/apk/res/android">
 4 
 5 
 6             <item>
 7                 <shape android:shape="rectangle" >
 8                     <gradient android:startColor="#ffffff" android:endColor="#ffffff" android:angle="90"/>
 9                     <stroke android:color="#cfcfcf" android:width="1px"/>
10                     <corners android:radius="3dp"/>
11                 </shape>
12             </item>
13         </selector>
 
 

 

 

 

三、编写java代码

1.创建一个myAdapter适配器>myAdapter.java--------------------------------------------------

  

 1  public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder>{      //泛型
 2     private List<Msg> mMsgList;
 3 
 4     public MyAdapter(List<Msg> msgList){                                            //构造方法,传值为List<Msg>
 5         this.mMsgList=msgList;
 6     }
 7     public class ViewHolder extends RecyclerView.ViewHolder{                    
 8         LinearLayout leftLayout,rightLayout;                                        //声明控件类变量
 9         TextView leftMsg,rightMsg;                                                  //声明控件类变量
10         public ViewHolder(View itemView) {                  
11             super(itemView);
12             leftLayout= (LinearLayout) itemView.findViewById(R.id.layout_left);     //获得创建好的layout_left id 布局控件
13             rightLayout= (LinearLayout) itemView.findViewById(R.id.layout_rigin);   //获得创建好的layout_rigin id 布局控件
14             leftMsg= (TextView) itemView.findViewById(R.id.mess_left);              //获取TextView_left_id,并赋值给leftMsgid
15             rightMsg= (TextView) itemView.findViewById(R.id.mess_reght);            //获取TextView_reght_id,并赋值给rightMsgid
16         }
17     }
18 
19     @Override
20     public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {                              //加载itme资源方法
21         View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.mess_item,parent,false);   //加载itemlayout资源
22         return new ViewHolder(view);                                                                    //新实例化上文泛型,参数为刚刚过去的messitem.xml View
23     }
24 
25     @Override
26     public void onBindViewHolder(ViewHolder holder, int position) {                 //循环执行方法
27         Msg msg=mMsgList.get(position);                                             //获取当前下标
28 
29         if(msg.getType() == Msg.TYPE_RECEIVED_SD)                                   //如果收到消息 显示左侧的消息布局隐藏右边布局
30         {
31             holder.leftLayout.setVisibility(View.VISIBLE);                          //设置左侧消息框可见
32             holder.rightLayout.setVisibility(View.GONE);                            //设置右侧消息框隐藏
33             holder.leftMsg.setText(msg.getContent());                               //设置接收到的内容
34 
35         }else if(msg.getType()==Msg.TYPE_SENT_FC)                                   //如果是发出消息 显示右侧消息,隐藏左侧消息
36         {
37             holder.leftLayout.setVisibility(View.GONE);                             //设置左侧消息框可见
38             holder.rightLayout.setVisibility(View.VISIBLE);                         //设置右侧消息框隐藏
39             holder.rightMsg.setText(msg.getContent());                              //设置发送消息
40         }
41     }
42 
43     @Override
44     public int getItemCount() {                                                     //返回项的总数量
45         return mMsgList.size();                                                     //返回list的总数
46     }
2.创建一个Msg消息实体类>Msg.java--------------------------------------------------
 1 public class Msg {
 2         public  static final int TYPE_RECEIVED_SD=0;    //收到的消息标记
 3         public  static final int TYPE_SENT_FC=1;        //发出的消息标记
 4         private String content;                        //消息内容
 5         private int type;                              //消息类型
 6 
 7         public Msg(String content,int type)           //声明两参构造方法,声明get set方法
 8         {
 9             this.content=content;
10             this.type=type;
11         }
12         public String getContent() {
13             return content;
14         }
15 
16         public void setContent(String content) {
17             this.content = content;
18         }
19 
20         public int getType() {
21             return type;
22         }
23 
24         public void setType(int type) {
25             this.type = type;
26         }
27     }
3.MainActivity代码>MainActivity.java--------------------------------------------------
 
 1  public class MainActivity extends AppCompatActivity {
 2     private List<Msg> msgList=new ArrayList<>();                                //声明List变量
 3     private EditText editText;                                                  //声明EdiText类变量
 4     private Button send;                                                        //声明Button类变量
 5     private RecyclerView recyclerView;                                          //声明recyclerView类变量
 6     private MyAdapter adapter;                                                  //声明adapter类变量
 7     @Override
 8     protected void onCreate(Bundle savedInstanceState) {
 9         super.onCreate(savedInstanceState);
10         setContentView(R.layout.activity_main);
11         initMsgs();                                                             //初始化数据
12 
13         editText= (EditText) findViewById(R.id.input_Text);                     //获取组建,赋值给editText类变量
14         send= (Button) findViewById(R.id.send_mess);                            //获取组建,赋值给send类变量
15         recyclerView= (RecyclerView) findViewById(R.id.msg_recycler_view);
16         recyclerView.setLayoutManager(new LinearLayoutManager(this));           //创建显示方式
17         adapter=new MyAdapter(msgList);
18 
19         LinearLayoutManager linearLayoutManager=new LinearLayoutManager(getApplicationContext());   //设置一个GridLayoutManager,图标形式显示,参数一 上下文,参数二,要分成几列显示
20         linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);                         //是横向显示还是纵向显示,两种选项HORIZONTAL,VERTICAL
21         recyclerView.setAdapter(adapter);                                                           //给recyclerView设置 adapter事件
22         send.setOnClickListener(new View.OnClickListener() {                                        //btn发送消息
23             @Override
24             public void onClick(View v) {
25                 String content=editText.getText().toString();                       //获取editext内容
26                 if(!"".equals(content))                                             //判断context是否是“”,或null
27                 {
28                     Msg msg=new Msg(content,Msg.TYPE_SENT_FC);
29                     msgList.add(msg);
30                     adapter.notifyItemInserted(msgList.size()-1);                   //有消息刷新显示
31                     recyclerView.scrollToPosition(msgList.size()-1);                    //将list定位到最后一行
32                     editText.setText("");
33                 }
34             }
35         });
36 
37     }
应用完成后的图片

Android RecyclerView制作聊天界面