Práctica de la interfaz de chat de escritura de Android

(Premisa) La creación de imágenes de nueve caminos
se explica en detalle en mi sección anterior.
Hacer dibujos de nueve caminos

Crea una hermosa interfaz de chat:

Dado que desea escribir una interfaz de chat, debe recibir y enviar mensajes.
El pop.9.png que acabamos de crear se puede utilizar como imagen de fondo del mensaje recibido, por lo que no hay duda de que necesita crear otro pop_right.9.png como imagen de fondo del mensaje enviado.
Una vez que se proporcionan las imágenes, puede comenzar a codificar. Como usaremos RecyclerView más adelante, primero debemos agregar bibliotecas dependientes en app / build.gradle, como se muestra a continuación:

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

A continuación, comience a escribir la interfaz principal y modifique el código en activity_main.xml de la siguiente manera:

<?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>

Hemos colocado un RecyclerView en la interfaz principal para mostrar el contenido del historial de chat, un EditText para ingresar mensajes y un botón para enviar mensajes.
Luego defina la clase de entidad del mensaje, cree un nuevo Msg, el código es el siguiente:

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

Solo hay dos campos en la clase Msg. El contenido representa el contenido del mensaje y el tipo representa el tipo del mensaje. El tipo de mensaje tiene dos valores opcionales. TYPE_RECEIVED indica que se trata de un mensaje recibido y TYPE_SENT indica que es un mensaje saliente.
A continuación, escriba el diseño de los subelementos de RecyclerView y cree un nuevo código msg_item.xml de la siguiente manera:

<?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>

Aquí alineemos el mensaje recibido a la izquierda y el mensaje enviado a la derecha. Y use message_left.9.png y message_right.9.png como imágenes de fondo respectivamente.
A continuación, debe crear una clase de adaptador para RecycerView, una nueva clase MsgAdapter, el código es el siguiente:

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

Finalmente, modifique el código en MainActivity para inicializar algunos datos para RecyclerView y envíelo al botón para agregar respuesta al evento. El código es el siguiente:

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

En el método initMsgs (), primero inicializamos algunos datos para mostrarlos en RecyclerView. Luego envíe el evento de clic de botón para obtener el contenido en EditText, si el contenido no es nulo, cree un nuevo objeto Msg y agréguelo a la lista msgList. Después de eso, se llama al método notifyItemInserted () del adaptador para notificar que la lista tiene nuevos datos insertados, de modo que se pueda mostrar un nuevo mensaje en RecyclerView. Luego, llame al método scrollToPosition () de RecyclerView para ubicar los datos mostrados en la última línea para asegurarse de que se pueda ver el último mensaje enviado. Finalmente, llame al método setText () de setText de EditText para borrar el contenido de entrada.