1 制作 Nine-Patch 圖片
Nine-Patch 圖片是一種被特殊處理的 png 圖片，它能夠指定哪些區域可以被拉伸而哪些區域不可以。
先準備一張氣泡樣式的圖片 message_left.png：
氣泡樣式圖片
我們把這張圖片設置為 LinearLayout 的背景圖片：
<?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="400dp"
android:background="@drawable/message_left_small"
>
</LinearLayout>
氣泡被拉伸變形
這樣的展示效果，用戶體驗很差。
因此，我們需要制作 9-patch 的 png 圖片。
在 Android Studio 中，右鍵選中要制作 9-patch 的 png 圖片，在彈出的列表中選擇 “Create 9-Patch file”：
右鍵選中制作 9-patch 文件
在接下來的彈出框中，指定 9-patch 的 png 圖片路徑，注意要放在 drawable-xx 等類似的路徑下，生成的圖片名為 *.9.png：
指定圖片路徑與圖片名
創建成功后，雙擊 *.9.png 文件，打開 9-patch 編輯器：
9-patch 編輯器
通過拖拽，設置伸縮的不可變區域，即下圖中圈出的黑色區段：
image.png
最后刪除非 .9 的 png 圖片，重新運行程序：
使用 9-patch 圖片
現在效果好多了吧O(∩_∩)O~
2 編寫聊天界面
因為是聊天界面，因此會有接收與發送的消息框。我們還要按照上述的方法，再制作一張右側消息框的 .9 png 圖片：
右側消息框的 .9 png
在 app/build.gradle 中加入 RecyclerView 的依賴庫：
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:24.2.1'
compile 'com.android.support:recyclerview-v7:24.2.1'
testCompile 'junit:junit:4.12'
}
編寫主界面：
<?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.RecyclerView
android:id="@+id/msg"
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"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="請輸入"
android:maxLines="2"
/>
<Button
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="發送"
/>
</LinearLayout>
</LinearLayout>
在主界面中，我們放置了一個 RecyclerView 作為顯示聊天消息的控件，下面嵌套了一個 LinearLayout，里面包含一個 EditText 用于輸入消息，一個 Button 用于發送消息的按鈕。
然后定義一個消息實體類：
public class Msg {
/**
* 內容
*/
private String content;
/**
* 類型
*/
private TYPE type;
public enum TYPE{
/**
* 接收
*/
RECEIVED,
/**
* 發送
*/
SENT
}
public Msg(String content,TYPE type){
this.content = content;
this.type = type;
}
public TYPE getType() {
return type;
}
public String getContent() {
return content;
}
}
接下來編寫 RecyclerView 子項的布局（msg_item.xml）：
<?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/left_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:background="@drawable/message_left_small">
<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_small">
<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>
我們讓收到的消息居左對齊，發送的消息居右對齊，并分別使用剛才制作兩張 9-patch png 作為背景圖。
下面創建 RecyclerView 的適配器類：
public class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.ViewHolder> {
private List<Msg> msgList;
static class ViewHolder extends RecyclerView.ViewHolder {
LinearLayout leftLayout;
LinearLayout rightLayout;
TextView leftMsg;
TextView rightMsg;
public ViewHolder(View itemView) {
super(itemView);
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) {
this.msgList = msgList;
}
@Override
public MsgAdapter.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(MsgAdapter.ViewHolder holder, int position) {
Msg msg=msgList.get(position);
switch (msg.getType()){
case RECEIVED://接收的消息
holder.leftLayout.setVisibility(View.VISIBLE);
holder.rightLayout.setVisibility(View.GONE);
holder.leftMsg.setText(msg.getContent());
break;
case SENT://發出的消息
holder.leftLayout.setVisibility(View.GONE);
holder.rightLayout.setVisibility(View.VISIBLE);
holder.rightMsg.setText(msg.getContent());
break;
}
}
@Override
public int getItemCount() {
return msgList.size();
}
}
這里根據消息的類型，來決定每一個子項顯示哪一種樣式。
最后修改活動類的代碼，為它初始化數據，并為發送按鈕加入響應事件：
public class MainActivity extends AppCompatActivity {
private List<Msg> msgList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
final EditText inputText=(EditText)findViewById(R.id.input);
Button sendBtn=(Button)findViewById(R.id.send);
final RecyclerView msgRecyclerView=(RecyclerView)findViewById(R.id.msg);
LinearLayoutManager layoutManager=new LinearLayoutManager(this);
msgRecyclerView.setLayoutManager(layoutManager);
final MsgAdapter adapter=new MsgAdapter(msgList);
msgRecyclerView.setAdapter(adapter);
sendBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String content=inputText.getText().toString();
if("".equals(content))
return;
msgList.add(new Msg(content, Msg.TYPE.SENT));
//如果有新消息，則設置適配器的長度（通知適配器，有新的數據被插入），并讓 RecyclerView 定位到最后一行
int newSize = msgList.size() - 1;
adapter.notifyItemInserted(newSize);
msgRecyclerView.scrollToPosition(newSize);
//清空輸入框中的內容
inputText.setText("");
}
});
}
/**
* 初始化消息數據
*/
private void init() {
msgList.add(new Msg("你好", Msg.TYPE.RECEIVED));
msgList.add(new Msg("你好，請問你是？", Msg.TYPE.SENT));
msgList.add(new Msg("我是 deniro，很高興認識你^_^", Msg.TYPE.RECEIVED));
}
}
運行程序：
聊天界面效果
