Android Studio實現智能聊天機器人【階段案例】

一、需求分析

1、業務需求分析

在這裏插入圖片描述

2、模型需求分析

在這裏插入圖片描述

3、界面需求分析

在這裏插入圖片描述

二、開發環境介紹

在這裏插入圖片描述

三、聊天功能業務實現

1、申請機器人身份標識

在這裏插入圖片描述

2、搭建聊天界面佈局

在這裏插入圖片描述
整個界面最外層採用線性佈局,在最大的LinearLayout中先設置了一個TextView用來顯示聊天窗口的文本爲機器人。

接着在TextView下面放置了一個RelativeLayout,在它裏面先放置了一個ListView,用於顯示聊天消息列表。

然後放置了一個小的RelativeLayout,裏面放置了一個Button和一個EditText,Button在EditText右側,文本爲“發送”,作爲發送按鈕,EditText則是聊天輸入框,在裏面輸入聊天內容。

這樣整個聊天界面的佈局文件就搭建好了。如圖所示:
在這裏插入圖片描述
activity_main的代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:gravity="center"
        android:background="#0cc4e5"
        android:text="機器人"
        android:textColor="@android:color/white"
        android:textSize="20sp"/>
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <ListView
            android:id="@+id/list"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_above="@+id/rl_bottom"
            android:cacheColorHint="@android:color/black"
            android:divider="@null"
            android:listSelector="@null"
            android:transcriptMode="alwaysScroll"/>
        <RelativeLayout
            android:id="@+id/rl_bottom"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@drawable/bottom_bg">
            <Button
                android:id="@+id/btn_send"
                android:layout_width="60dp"
                android:layout_height="40dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:background="@drawable/btn_send_selector"
                android:text="發送"
                android:textColor="@android:color/black"
                android:textSize="14sp"/>
            <EditText
                android:id="@+id/et_send_msg"
                android:layout_width="fill_parent"
                android:layout_height="40dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_toLeftOf="@+id/btn_send"
                android:background="@drawable/send_msg_bg"
                android:singleLine="true"
                android:textColor="@android:color/black"
                android:textSize="18sp"/>
        </RelativeLayout>
    </RelativeLayout>
</LinearLayout>

3、搭建聊天條目佈局

在這裏插入圖片描述
chatting_left_item文件爲機器人聊天頭像和聊天框顯示文件,用於顯示機器人的聊天內容。

主要是在RelativeLayout中放置了一個ImageView和一個TextView,ImageView爲機器人的頭像圖片robot_head,TextView 中的 style 設置爲 style 文件夾中寫好的格式文件 chat_content_style , background選擇drawable中的chat_left_selector【鼠標選中消息,背景顯示爲深綠色,默認顯示爲綠色】。效果如圖:
在這裏插入圖片描述
chatting_left_item代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="6dp">
    <ImageView
        android:id="@+id/iv_head"
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="5dp"
        android:background="@drawable/robot_head"
        android:focusable="false"/>
    <TextView
        android:id="@+id/tv_chat_content"
        style="@style/chat_content_style"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/iv_head"
        android:background="@drawable/chat_left_selector" />
</RelativeLayout>

chatting_right_item文件爲用戶聊天頭像和聊天框顯示文件,用於顯示用戶的聊天內容。

和機器人的聊天條目相同。主要是在RelativeLayout中放置了一個ImageView和一個TextView,ImageView 爲用戶的頭像圖片 myhead ,TextView中的 style 爲 style 中 chat_content_style ,
background選擇drawable中的chat_right_selector【鼠標選中消息,背景顯示爲灰色,默認顯示爲白色】。效果如圖:
在這裏插入圖片描述
chatting_right_item代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="6dp">
    <ImageView
        android:id="@+id/iv_head"
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="5dp"
        android:background="@drawable/myhead"
        android:focusable="false"/>
    <TextView
        android:id="@+id/tv_chat_content"
        style="@style/chat_content_style"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dp"
        android:layout_toLeftOf="@+id/iv_head"
        android:background="@drawable/chat_right_selector"/>

</RelativeLayout>

4、封裝聊天信息實體類

在這裏插入圖片描述
在該類中創建機器人與用戶聊天信息的屬性。重寫了get和set方法,消息的狀態設爲state,發送消息值設爲1,接受消息值設爲2。

public class ChatBean {
    public static final int SEND=1;//發送消息
    public static final int RECEIVE=2;//接收消息
    private int state;//消息的狀態(是接收還是發送)
    private String message;//消息的內容

    public int getState() {
        return state;
    }

    public void setState(int state) {
        this.state = state;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

5、編寫聊天列表適配器

由於聊天界面用了ListView控件顯示聊天信息,因此需要創建一個數據適配器ChatAdapter對ListView控件進行數據適配。所以要創建一個ChatAdapter類。

getView方法內用if和else語句判斷當前的消息是發送的消息還是接收到的消息,不同消息加載不同的view。如果是接收消息,說明就是機器人發的消息,那就加載左邊佈局;如果是發送消息,說明就是用戶發的消息,則加載右邊佈局。

@Override
    public View getView(int position, View contentView, ViewGroup viewGroup) {
        Holder holder = new Holder();
        //判斷當前信息是發送信息還是接收信息,根據不同信息加載不同佈局文件
        if (chatBeanList.get(position).getState() == ChatBean.RECEIVE) {
        	//加載機器人對應的佈局文件
            contentView = layoutInflater.inflate(R.layout.chatting_left_item, null);
        } else {
        	//加載用戶對應的佈局文件
           contentView = layoutInflater.inflate(R.layout.chatting_right_item,null);
        }
        //獲取聊天內容控件,並設置控件的文本信息
        holder.tv_chat_content = (TextView) contentView.findViewById(R.id. tv_chat_content);
        holder.tv_chat_content.setText(chatBeanList.get(position).getMessage());
        return contentView;
    }

6、實現智能機器人通信

在這裏插入圖片描述
在RobotActivity中,創建了5個方法:

(1)initView( ) 用於獲取界面控件並初始化界面數據;
在這裏插入圖片描述
(2)showData( ) 用於顯示歡迎信息到界面上;
在這裏插入圖片描述
(3)sendData ( ) 用於用戶發送信息;
在這裏插入圖片描述
(4)getDataFromServer( ) 從服務器獲取機器人的回覆信息;
在這裏插入圖片描述
(5)updateView( ) 更新界面信息;
在這裏插入圖片描述
最後重寫onKeyDown( )方法,在該方法中實現點擊後退鍵退出智能聊天程序的功能。
在這裏插入圖片描述

四、項目效果

1、進來會有隨機的歡迎消息,可以在回覆設置裏面自定義。
在這裏插入圖片描述
2、沒有裝中文輸入法,所以就發個數字先,它會自動回覆。
在這裏插入圖片描述
3、發英文字母a,b,c,它會自動往下接,發e它會回句“額”。
在這裏插入圖片描述

五、項目總結

在本項目的實現過程中,熟悉了網絡請求、JSON解析、Handler處理等知識點,這些知識點會在後來Android項目中經常使用,因此希望讀者可以按照步驟完成此項目,通過熟練掌握本項目中的這些知識點,方便以後開發其他項目。

你遇見了什麼人,什麼時候找到一份工作,在哪裏做了什麼事,是努力還是墮落,事到如今,你回頭想想,這些其實都是你對自己的安排。所有的昨日,纔有了你所有的今日。 ​​​​

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章