Android RecyclerView制作聊天界面

川长思鸟来 2021-12-18 16:13 480阅读 0赞

#### 一、创建两个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     }

应用完成后的图片

![1185122-20170619100127038-314567972.jpg][]

转载于:https://www.cnblogs.com/dame/p/7047410.html

[1185122-20170619100127038-314567972.jpg]: /images/20211218/2a9a1ba992e44c14a4a91c84a14f7087.png