Pratique de l'interface de chat d'écriture d'Android

(Prémisse) Faire des images à neuf chemins
est expliqué en détail dans ma section précédente.
Faire des photos de neuf chemins

Composez une belle interface de chat:

Puisque vous souhaitez écrire une interface de chat, vous devez recevoir et envoyer des messages.
Le fichier pop.9.png que nous venons de créer peut être utilisé comme image de fond du message reçu, il ne fait donc aucun doute que vous devez créer un autre pop_right.9.png comme image de fond du message envoyé.
Une fois les images fournies, vous pouvez commencer à coder. Comme nous utiliserons RecyclerView plus tard, nous devons d'abord ajouter des bibliothèques dépendantes dans app / build.gradle, comme indiqué ci-dessous:

dependencies {
    
    
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
    
    
    exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support:recyclerview-v7:25.3.1'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
testCompile 'junit:junit:4.12'
}

Ensuite, commencez à écrire l'interface principale et modifiez le code dans activity_main.xml comme suit:

<?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:background="#d8e0e8">
<android.support.v7.widget.RecyclerView
    android:id="@+id/msg_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
        android:id="@+id/input_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Type something here"
        android:maxLines="2"
        />
    <Button
        android:id="@+id/send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Send"/>
</LinearLayout>

</LinearLayout>

Nous avons placé un RecyclerView dans l'interface principale pour afficher le contenu de l'historique du chat, un EditText pour la saisie des messages et un bouton pour l'envoi de messages.
Définissez ensuite la classe d'entité du message, créez un nouveau Msg, le code est le suivant:

package net.nyist.lenovo.message_agetest;
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 String getContent() {
    
    
    return content;
}

public int getType() {
    
    
    return type;
}
}

Il n'y a que deux champs dans la classe Msg. Content représente le contenu du message et type représente le type du message. Le type de message a deux valeurs facultatives. TYPE_RECEIVED indique qu'il s'agit d'un message reçu et TYPE_SENT indique que c'est un message sortant.
Ensuite, écrivez la disposition des sous-éléments RecyclerView et créez un nouveau code msg_item.xml comme suit:

<?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
    android:id="@+id/left_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="left"
    android:background="@drawable/pop">
    <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"
        />
</LinearLayout>
</LinearLayout>

Ici, alignons le message reçu à gauche et le message envoyé à droite. Et utilisez respectivement message_left.9.png et message_right.9.png comme images d'arrière-plan.
Ensuite, vous devez créer une classe d'adaptateur pour RecycerView, une nouvelle classe MsgAdapter, le code est le suivant:

package net.nyist.lenovo.message_agetest;
	
	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.List;
	
	
	public 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;

        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;
        }

    @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);
    }

    @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();
    }
	}

Enfin, modifiez le code dans MainActivity pour initialiser certaines données pour RecyclerView et envoyez-le au bouton pour ajouter une réponse à l'événement. Le code est le suivant:

package net.nyist.lenovo.message_agetest;
	
	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.support.v7.widget.LinearLayoutManager;
	import android.support.v7.widget.RecyclerView;
	import android.view.View;
	import android.widget.Button;
	import android.widget.EditText;
	import android.widget.LinearLayout;
	
	import java.util.ArrayList;
	import java.util.List;
	
	public class MainActivity extends AppCompatActivity {
    
    

        private List<Msg> msgList = new ArrayList<>();

        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_recycler_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);
                    adapter.notifyItemInserted(msgList.size() - 1);//当有消息时,刷新ListView中的显示
                    msgRecyclerView.scrollToPosition(msgList.size() - 1);//将ListView定位到最后一行
                    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 to meet you.",Msg.TYPE_RECEIVED );
        msgList.add(msg3);
    }
	}

Dans la méthode initMsgs (), nous initialisons d'abord quelques éléments de données à afficher dans RecyclerView. Envoyez ensuite l'événement de clic sur le bouton pour obtenir le contenu dans EditText, si le contenu n'est pas nul, créez un nouvel objet Msg et ajoutez-le à la liste msgList. Après cela, la méthode notifyItemInserted () de l'adaptateur est appelée pour notifier que la liste a de nouvelles données insérées, afin qu'un nouveau message puisse être affiché dans le RecyclerView. Appelez ensuite la méthode scrollToPosition () de RecyclerView pour localiser les données affichées sur la dernière ligne pour vous assurer que le dernier message envoyé est visible. Enfin, appelez la méthode setText () d'EditText pour effacer le contenu d'entrée.