聊天界面的制作（一）——基本布局的实现

基本功能

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>