說說如何使用 Android UI 設計聊天界面

1 制作 Nine-Patch 圖片

Nine-Patch 圖片是一種被特殊處理的 png 圖片，它能夠指定哪些區(qū)域可以被拉伸而哪些區(qū)域不可以。

先準備一張氣泡樣式的圖片 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：


指定圖片路徑與圖片名

創(chuàng)建成功后，雙擊 *.9.png 文件，打開 9-patch 編輯器：

9-patch 編輯器

通過拖拽，設置伸縮的不可變區(qū)域，即下圖中圈出的黑色區(qū)段：


image.png

最后刪除非 .9 的 png 圖片，重新運行程序：

使用 9-patch 圖片

現(xiàn)在效果好多了吧O(∩_∩)O~

2 編寫聊天界面

因為是聊天界面，因此會有接收與發(fā)送的消息框。我們還要按照上述的方法，再制作一張右側消息框的 .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="發(fā)送"
            />

    </LinearLayout>

</LinearLayout>

在主界面中，我們放置了一個 RecyclerView 作為顯示聊天消息的控件，下面嵌套了一個 LinearLayout，里面包含一個 EditText 用于輸入消息，一個 Button 用于發(fā)送消息的按鈕。

然后定義一個消息實體類：

public class Msg {
    /**
     * 內容
     */
    private String content;

    /**
     * 類型
     */
    private TYPE type;

    public enum TYPE{
        /**
         * 接收
         */
        RECEIVED,
        /**
         * 發(fā)送
         */
        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>

我們讓收到的消息居左對齊，發(fā)送的消息居右對齊，并分別使用剛才制作兩張 9-patch png 作為背景圖。

下面創(chuàng)建 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://發(fā)出的消息
                holder.leftLayout.setVisibility(View.GONE);
                holder.rightLayout.setVisibility(View.VISIBLE);
                holder.rightMsg.setText(msg.getContent());
                break;
        }
    }

    @Override
    public int getItemCount() {
        return msgList.size();
    }
}

這里根據消息的類型，來決定每一個子項顯示哪一種樣式。

最后修改活動類的代碼，為它初始化數(shù)據，并為發(fā)送按鈕加入響應事件：

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

                //如果有新消息，則設置適配器的長度（通知適配器，有新的數(shù)據被插入），并讓 RecyclerView 定位到最后一行
                int newSize = msgList.size() - 1;
                adapter.notifyItemInserted(newSize);
                msgRecyclerView.scrollToPosition(newSize);

                //清空輸入框中的內容
                inputText.setText("");


            }
        });

    }

    /**
     * 初始化消息數(shù)據
     */
    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));
    }
}

運行程序：

聊天界面效果
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容