1. Preface and renderings :
This is a simple chat interface, similar to the QQ chat interface as shown below:
But no one is that tall. After all, as a novice, I am still running on the road, and the rendering is shown in the picture above. Let's see how it is achieved.
2. Implementation code
1. Because we use the RecycleView control in the layout, we must first add the dependency library in app/build.grade, the code is as follows:
dependencies {
...
compile 'com.android.support:recyclerview-v7:26.1.0'
...
}
2. Next we define a message entity class Msg:
public class Msg {
public static final int TYPE_RECEIVED = 0;//Indicates that the message is received
public static final int TYPE_SENT = 1;//Indicates the message sent
private String content;//Message content
private int type;//Message type
public Msg(String content,int type){
this.content = content;
this.type = type;
}
public String getContent(){
return content;
}
public int getType(){
return type;
}
}
3. Modify the activity_main.xml file, put a RecyclerView control in the parent layout first, add a sub-layout below it, put an EditText and Button are the message input box and the send button respectively, the code is as follows:
<?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="match_parent"
android:orientation="vertical"
android:background="#d8e0e8"
>
<android.support.v7.widget.RecyclerView
android:id="@+id/mRv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:layout_marginTop="5dp">
<EditText
android:id="@+id/mEt"
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"
android:textAllCaps="false"/>
</LinearLayout>
</LinearLayout>
4. You also need to write a layout as the RecyclerView sub-item layout, create a new layout file msg_item.xml, the code is as follows:
<?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"
android:padding="10dp">
<LinearLayout
android:id="@+id/layout_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:background="@drawable/message_left">
<TextView
android:id="@+id/left_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:textColor="#fff"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/layout_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="3dp"
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="5dp"
android:textColor="#000"
/>
</LinearLayout>
</LinearLayout>
Here we display both the left and right message boxes, we need to hide the layout of another message in the code according to the type of the message, and that's OK. See step 5 for the code.
5. Then we need to create an adapter for RecyclerView, the code is as follows:
public class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.ViewHolder>{
private List<Msg> mMsgLIst;
//inner class
static class ViewHolder extends RecyclerView.ViewHolder{
LinearLayout leftLayout;
LinearLayout rightLayout;
TextView leftMsg;
TextView rightMsg;
//find the controls in the child layout
public ViewHolder(View view){
super(view);
leftLayout = (LinearLayout) view.findViewById ( R.id.layout_left );
rightLayout = (LinearLayout) view.findViewById ( R.id.layout_right );
leftMsg = (TextView) view.findViewById ( R.id.left_msg );
rightMsg = (TextView) view.findViewById ( R.id.right_msg );
}
}
//Constructor, used to pass in the data source to be displayed
public MsgAdapter(List<Msg> msgLIst){
mMsgLIst = msgLIst;
}
//Load the child item layout and return a View
@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 );
}
//Assignment function to the data in the sub-item
@Override
public void onBindViewHolder(ViewHolder holder,int position){
Msg msg = mMsgLIst.get ( position );//Get the msg instance
if (msg.getType()==Msg.TYPE_RECEIVED){//Indicates that a message is received
holder.leftLayout.setVisibility ( View.VISIBLE );//Display the message layout on the left
holder.rightLayout.setVisibility ( View.GONE );//Hide the message layout on the right
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 ();
}
}
6. Finally, the MainActivity main code,
public class MainActivity extends AppCompatActivity {
private List<Msg> msgList = new ArrayList<> ( );
private EditText mEt;
private Button send;
private RecyclerView mRv;
private MsgAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView ( R.layout.activity_main );
initMsg();//Initialize message data
mEt = findViewById ( R.id.mEt );
send = findViewById ( R.id.send );
mRv = findViewById ( R.id.mRv );
//establish the connection between data and RecyclerView
LinearLayoutManager layoutManager = new LinearLayoutManager ( this);
mRv.setLayoutManager ( layoutManager );//Make the layout of RecyclerView
adapter = new MsgAdapter ( msgList );//Pass data to the MsgAdapter constructor
mRv.setAdapter ( adapter );
send.setOnClickListener ( new View.OnClickListener () {
@Override
public void onClick(View view) {
String content = mEt.getText ().toString ();
if(!"".equals (content )){//If the input box is not empty, execute the following
Msg msg = new Msg ( content,Msg.TYPE_SENT );
msgList.add ( msg );
adapter.notifyItemInserted (msgList.size ()-1);
mRv.scrollToPosition ( msgList.size ()-1 );//Position the displayed data to the last line
mEt.setText ( "" );//Clear the content of the input box after clicking send
}
}
} );
}
private void initMsg(){
Msg msg1 = new Msg ( "在吗？",Msg.TYPE_RECEIVED );
msgList.add ( msg1 );//Add msg1 to the list msgList
Msg msg2 = new Msg( "Yes, who are you?", Msg.TYPE_SENT );
msgList.add ( msg2 );
Msg msg3 = new Msg( "I am your father.",Msg.TYPE_RECEIVED );
msgList.add ( msg3 );
}
}
Such a simple chat interface is complete.