Day 23 行程管家的外貌：開啟與行程管家的第一場對話

2025 iThome 鐵人賽

DAY 23

Mobile Development

結合AI Agent技術打造自己的行程管家系列第 23 篇

17th鐵人賽

wenlin1227

團隊nutc imac

2025-10-07 14:25:18

58 瀏覽

分享至

今天，我們即將為「行程管家」打造最後一個關鍵的 UI 介面跟功能 —— 行程管家的聊天室。
這個聊天室不僅僅是個單純的對話框，而是整個行程管家與使用者之間的「智慧橋樑」。
有了它，我們就能透過自然語言對話，請行程管家幫我們規劃路線、推薦景點，
甚至結合 Google Maps 地圖服務，自動為使用者安排最適合的旅程動線。
是不是非常方便又充滿智慧感呢？

以下是我們設計好的activity_chat.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.main.MainActivity">


    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_marginTop="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ImageButton
                android:id="@+id/main_imageButton_pl"
                android:layout_width="320dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@null"
                app:srcCompat="@drawable/_2025_10_03_201031" />

            <TextView
                android:id="@+id/main_textView_pl"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1.5"
                android:gravity="center"
                android:text="景點推薦"
                android:textStyle="bold" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/main_textView_dr"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1.3"
                android:gravity="center"
                android:text="路線規劃"
                android:textStyle="bold" />

            <ImageButton
                android:id="@+id/main_imageButton_dr"
                android:layout_width="320dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@null"
                app:srcCompat="@drawable/_2025_10_03_201428" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ImageButton
                android:id="@+id/main_imageButton_go"
                android:layout_width="320dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@null"
                app:srcCompat="@drawable/_2025_10_03_201717" />


            <TextView
                android:id="@+id/main_textView_go"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="座標搜尋"
                android:textStyle="bold" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:layout_marginBottom="50dp"
            android:orientation="vertical">

            <ImageButton
                android:id="@+id/main_imageButton_ch"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="300dp"
                android:background="@null"
                app:srcCompat="@drawable/_2025_10_07_111103" />
        </LinearLayout>
</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

這是對話的ui設計

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="4dp">

    <!-- 接收的訊息 (左側) -->
    <LinearLayout
        android:id="@+id/layout_received"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:orientation="horizontal"
        android:visibility="gone">

        <TextView
            android:id="@+id/text_received"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_message_received"
            android:maxWidth="250dp"
            android:padding="12dp"
            android:textColor="#000000"
            android:textSize="16sp" />
    </LinearLayout>

    <!-- 發送的訊息 (右側) -->
    <LinearLayout
        android:id="@+id/layout_sent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:orientation="horizontal"
        android:visibility="gone">

        <TextView
            android:id="@+id/text_sent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_message_sent"
            android:maxWidth="250dp"
            android:padding="12dp"
            android:textColor="#FFFFFF"
            android:textSize="16sp" />
    </LinearLayout>

</FrameLayout>

ChatActivity.java

package com.example.ittext.ui.chat;

import android.os.Bundle;

import android.widget.Button;
import android.widget.EditText;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.example.ittext.R;

import java.util.ArrayList;
import java.util.List;

public class ChatActivity extends AppCompatActivity {

    private EditText InputText;
    private Button SendButton;
    private RecyclerView ChatRecyclerView;
    private MessageAdapter messageAdapter;
    private List<Message> messageList;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chat);

        getIntent();

        InputText = findViewById(R.id.chat_editText_message_et);
        SendButton = findViewById(R.id.chat_button_send_btn);
        ChatRecyclerView = findViewById(R.id.chat_recyclerView_rv);

        messageList = new ArrayList<>();
        messageAdapter = new MessageAdapter(messageList);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        ChatRecyclerView.setLayoutManager(layoutManager);
        ChatRecyclerView.setAdapter(messageAdapter);

        messageList.add(new Message("您好!我是行程管家,有什麼可以幫助您的嗎?", false));
        messageAdapter.notifyItemInserted(0);

        SendButton.setOnClickListener((view) -> {
            String message = InputText.getText().toString();
            if (!message.isEmpty()) {
                // 添加用戶訊息
                messageList.add(new Message(message, true));
                messageAdapter.notifyItemInserted(messageList.size() - 1);
                ChatRecyclerView.smoothScrollToPosition(messageList.size() - 1);

                // 清空輸入框
                InputText.setText("");

                // 模擬 AI 回覆 (延遲 1 秒)
                ChatRecyclerView.postDelayed(() -> {
                    messageList.add(new Message("收到您的訊息: " + message, false));
                    messageAdapter.notifyItemInserted(messageList.size() - 1);
                    ChatRecyclerView.smoothScrollToPosition(messageList.size() - 1);
                }, 1000);
            }
        });

    }

}