Android 第二十一課 RecyclerView簡單的應用之編寫“精美”的聊天頁面

1、由于我們會使用到RecyclerView，因此首先需要在app/build.gradle當中添加依賴庫。如下：

apply plugin: 'com.android.application'
....
dependencies {....compile 'com.android.support:recyclerview-v7:26.1.0'
}

2、然后開始編寫主頁面，修該activity_main.xml中的代碼，如下：

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

可以看到主頁面上面是一個RecyclerView，用來顯示聊天的消息內容，下面是一個EditView，用于輸入消息和Button，用于發送消息。

3、然后定義消息的是實體類，新建Msg,代碼如下：

package com.example.messsage;/*** Created by ZHJ on 2018/3/14.*/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;}
}

Msg類中只有兩個字段，content表示消息的內容，type表示消息的類型。其中消息類型有兩個值可選，TYPE_RECEIVED表示這是一條收到的消息，TYPE_SENT表示這是一條發出的消息。

4、接著編寫RecyclerView子項的布局，新建msg_item.xml，代碼如下：

<?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"><LinearLayoutandroid:id="@+id/left_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"android:background="@drawable/message_left"><TextViewandroid:id="@+id/left_msg"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_margin="10dp"android:textColor="#f00"/></LinearLayout><LinearLayoutandroid:id="@+id/right_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:background="@drawable/message_right"><TextViewandroid:id="@+id/right_msg"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_margin="10dp"/></LinearLayout></LinearLayout>

我們讓收到的消息居左對齊，發出的消息居右對齊，并且使用meassage_right和message_left作為背景圖，這里我們讓收到的消息和發出的消息都放在了同一布局里，我們可以根據消息的類型來決定隱藏和顯示哪種消息就可以了。

5、創建RecyclerView的適配器類，新建類MsgAdapter，代碼如下：

package com.example.messsage;import android.support.v7.widget.LinearLayoutManager;
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;/*** Created by ZHJ on 2018/3/14.*/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) itemView.findViewById(R.id.left_layout);rightLayout = (LinearLayout)itemView.findViewById(R.id.right_layout);leftMsg = (TextView)itemView.findViewById(R.id.left_msg);rightMsg = (TextView)itemView.findViewById(R.id.right_msg);}}public MsgAdapter (List<Msg>msgList){mMsgList = msgList;}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.msg_item,parent,false);return new ViewHolder(view);}@Overridepublic 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.leftLayout.setVisibility(View.GONE);holder.rightLayout.setVisibility(View.VISIBLE);holder.rightMsg.setText(msg.getContent());}}@Overridepublic int getItemCount() {return mMsgList.size();}
}

在onBindViewHolder()方法中增加了對消息類型到判斷，如果這條消息是收到的，則顯示左邊的的消息布局，如果消息是發出的，則顯示右邊的消息布局。

我們先定義了一個內部類ViewHolder，ViewHolder要繼承自RecyclerView.ViewHolder。然后，ViewHolder的構造函數中要傳入一個View參數，這個參數通常就是RecyclerView子項的最外層布局，那么我們就可以通過findViewById()方法來獲取到布局中的leftMsg 和rightMsg 的實例了。

????????MsgApapter中也有一個構造函數，這個方法用于把要展示的數據源傳進來，并賦值給一個全局變量mMsgList，我們后續的操作都將在這個數據源的基礎上進行。繼續往下看，由于mMsgAdapter是繼承自RecyclerView.Adapter的，那么就必須重寫onCreateViewHolder(),onBindViewHolder()和getItemCount()這3個方法。

????onCreateViewHolder()方法用于創建ViewHolder實例的，我們在這個方法中將R.layout.msg_item布局加載進來，然后創建一個ViewHolder實例，并把加載進來，然后創建一個ViewHolder實例，并把加載出來的布局傳入到構造函數中，最后將ViewHolder()方法的實例返回。

????onBindViewHolder()方法是用于對RecyclerView子項的數據進行賦值，會在每個子項被滾到屏幕內的時候執行，這里我們通過position參數得到當前項的Msg實例，然后再將數據設置到ViewHolder的ImageView和TextView當中即可。

????getItemCount()方法就簡單了，它用于告訴RecyclerView一共有多少子項，直接返回數據源的長度就可以了。

6、最后修該Main_activity中的代碼，如下：

package com.example.messsage;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;@Overrideprotected 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() {@Overridepublic void onClick(View view) {String content = inputText.getText().toString();if (!"".equals(content)){Msg msg = new Msg(content,Msg.TYPE_SENT);msgList.add(msg);adapter.notifyItemInserted(msgList.size()-1);msgRecyclerView.scrollToPosition(msgList.size() - 1);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 talking to you.",Msg.TYPE_RECEIVED);msgList.add(msg3);}
}

initMsgs()方法中我們先初始化了幾條數據用于在RecyclerView中顯示出來。

然后在按鈕的點擊事件中獲取了EditText中的內容，如果內容不為空，則創建出一個新的Msgz對象，并把它添加都msgList列表中。之后又調用了適配器的notifyItemInserted()方法，用于通知列表有新的數據插入，這樣新增的一條消息才能夠在RecyclerView中顯示出來。接著調用RecyclerView的scrollPosition()方法將顯示的數據定位到最后一行，以保證一定可以看到最后發出的一條消息，最后調用EditText的setText()方法將輸入的內容清空。

運行之后，如下：