Utilisez RecyclerView pour implémenter une interface de chat simple.
Préparez:
需要两张.9.png的图片来作为聊天气泡的背景图。
需要一张图片作为聊天背景图。
1. Créez d'abord un fichier de mise en page pour l'interface utilisateur principale, qui nécessite un RecyclerView, un bouton ENVOYER et une zone de saisie Edtitext.
2. Créez un fichier de mise en page de l'adaptateur RecyclerView pour fournir deux bulles à gauche et à droite.
3. Chargez chaque message envoyé dans le sous-élément RecyclerView et actualisez l'affichage chaque fois que les données sont mises à jour en définissant un écouteur.
Pour l'utilisation de RecyclerView, veuillez vérifier:
http://blog.csdn.net/q296264785/article/details/53581608
Code de mise en page de l'interface utilisateur principale et rendus
Rendu de la disposition de l'adaptateur
Classe d'activité:
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private RecyclerView recyclerView;
private List<Msg> list = new ArrayList<>();
private TextView sendText;
private MyAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
sendText = (TextView) findViewById(R.id.send_text);
recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(linearLayoutManager);
list.add(new Msg("你好!",0));//启动之前先加载两条数据
list.add(new Msg("Hello!",1));
adapter = new MyAdapter(list);
recyclerView.setAdapter(adapter);
findViewById(R.id.send).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String text_data = sendText.getText().toString();
list.add(new Msg(text_data, 1));
adapter.notifyItemInserted(list.size() - 1); // 当有新消息时,刷新RecyclerView中的显示
recyclerView.scrollToPosition(list.size() - 1); // 将RecyclerView定位到最后一行
sendText.setText("");
}
});
}
}
Classe de message Msg:
public class Msg {//消息类,每发送一次消息就实例化一个本类,保存消息的内容以及标志位(标志位来确定是发送还是接收)
private String str_data = null;
private int flag = 0;
public Msg(String str_data, int flag) {
this.flag = flag;
this.str_data = str_data;
}
public int getFlag() {
return flag;
}
public String getStr_data() {
return str_data;
}
}
Adaptateur:
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.ArrayList;
import java.util.List;
import static com.example.administrator.class_chatscreen.R.layout.right_layout;
/**
* Created by Administrator on 2016/12/13 0013.
*/
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private List<Msg> list = new ArrayList<>();
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(right_layout, parent, false);
ViewHolder holder = new ViewHolder(view);
return holder;
}
public MyAdapter(List<Msg> str_data) {
this.list = str_data;
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
Msg msg = list.get(position);
if (msg.getFlag() == 1){//发送消息时,关闭左边的消息气泡,在右边显示
holder.right_layout.setVisibility(View.VISIBLE);
holder.left_layout.setVisibility(View.GONE);
holder.rightTextView.setText(msg.getStr_data());
}else if (msg.getFlag() == 0){//接收消息时,关闭右边的消息气泡,在左边显示
holder.right_layout.setVisibility(View.GONE);
holder.left_layout.setVisibility(View.VISIBLE);
holder.leftTextView.setText(msg.getStr_data());
}
}
@Override
public int getItemCount() {
return list.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
TextView leftTextView;
TextView rightTextView;
LinearLayout left_layout;
LinearLayout right_layout;
public ViewHolder(View itemView) {//控件和UI关联
super(itemView);
left_layout = (LinearLayout)itemView.findViewById(R.id.left);
right_layout = (LinearLayout)itemView.findViewById(R.id.right);
leftTextView = (TextView) itemView.findViewById(R.id.textViewleft);
rightTextView = (TextView) itemView.findViewById(R.id.textViewright);
}
}
}
Disposition de l'interface utilisateur:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bb"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.example.administrator.class_chatscreen.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="0sp"
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:layout_width="0sp"
android:layout_weight="8"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Type something here"
android:ems="10"
android:id="@+id/send_text" />
<Button
android:text="Send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/send" />
</LinearLayout>
</LinearLayout>
Disposition des bulles de message (adaptateur)
<?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">
<LinearLayout
android:id="@+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:background="@drawable/message_left"
android:gravity="center_vertical">
<TextView
android:id="@+id/textViewleft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="center_vertical"
android:background="@drawable/message_right">
<TextView
android:id="@+id/textViewright"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5sp"
android:paddingRight="10sp"
android:textColor="#2828ff"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>