聊天介面的製作（一）——基本佈局的實現

基本功能

1. 自定義標題欄。（標題欄不做任何功能）

2. 有左右傳送按鈕。（這個只能自己和自己聊天哦，所以有左右傳送按鈕）

　　（1）點選左邊按鈕傳送按鈕，在ListView的左側顯示。
　　（2）點選右邊按鈕傳送按鈕，在ListView的右側顯示。
　　
3.有表情傳送按鈕。

　　（1）當點選表情傳送按鈕時， 彈出表情框，點選想要傳送的表情將其新增輸入框中。
　　（2）當在此點選表情按鈕時，表情框收回。
　　（3）當表情框處在顯示狀態時， 點選輸入框時，表情框收回。
　　
聊天介面的製作（二）——傳送訊息後ListView左右佈局顯示
聊天介面的製作（三）——表情列表傳送功能
原始碼下載連結

標題欄製作

1. 定義標題的title_bar.xml佈局檔案，一般情況下用Linearlayout來寫。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/light_blue"
    android:gravity="center"
    android:orientation="horizontal">

    <ImageButton
        android:id="@+id/imagebutton_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:background="@drawable/imagebtn_back" />

    <TextView
        android:id="@+id/textview_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Chatting"
        android:textColor="@color/white"
        android:textSize="@dimen/title_bar_tilte"
        android:textStyle="bold" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:background="@drawable/title_phone_background" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dp"
        android:background="@mipmap/kmy" />

</LinearLayout>

2. 在整體佈局activity_main.xml中通過功能引入title_bar.xml佈局實現。

<include
        android:id="@+id/title_bar"
        layout="@layout/title_bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

整體佈局構建

• 定義聊天介面的整體佈局。
  （注意: 顏色值儲存在colors中，color的顏色定義名稱儘量用顏色只來命名。大小值儲存在dimens中，值的名稱可以用器件的名稱來命名。）

在佈局中用到了幾個知識點：

• 背景漸變色的設定。參考博文: Android UI設計小知識——漸變色背景的製作
• 按鈕背景的設定。 參考博文：Android UI設計小知識——按鈕背景的製作
• 去除應用自帶的標題欄。參考博文：Activity的操作—去標題和橫豎屏

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <include
        android:id="@+id/title_bar"
        layout="@layout/title_bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/chatting_background"
        android:listSelector="@android:color/transparent"></ListView>

    <LinearLayout
        android:id="@+id/linearlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/grey"
        android:gravity="bottom"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/imagebutton_expression"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:focusable="true"
            android:background="@drawable/imagebutton_expression" />

        <Button
            android:id="@+id/button_left"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_margin="5dp"
            android:background="@drawable/button_send_background"
            android:padding="5dp"
            android:text="傳送"
            android:textColor="@color/white" />

        <EditText
            android:id="@+id/edittext_input"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:background="@drawable/edittext_background"
            android:padding="7dp"
            android:layout_gravity="center"/>

        <Button
            android:id="@+id/button_right"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_margin="5dp"
            android:background="@drawable/button_send_background"
            android:padding="5dp"
            android:text="傳送"
            android:textColor="@color/white" />
    </LinearLayout>
    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="7"
        android:visibility="gone"
        android:background="@color/grey">

    </GridView>

</LinearLayout>

　　這樣基本佈局就完成了……
　　聊天介面左右按鈕傳送功能以及傳送圖片功能的完成請看接下來的文章。