在上一篇文章中，我們已經完成了 註冊系統的所有前端流程，讓行程管家具備了迎接新使用者的基礎能力。

如果把行程管家比作一棟智慧大樓，那麼「主介面」就好比是大廳 (Lobby)。
使用者一踏進來，第一眼看到的就是這個大廳的設計與導引。它不僅要 美觀直覺，還要能 清楚劃分服務區塊，讓人能快速找到自己需要的功能。

今天，我將帶領大家正式打造 行程管家的主介面 (Main UI)。
這個介面就像是整個系統的「門面」，包含了三大核心功能：

• 景點推薦：發現有趣的目的地
• 路線規劃：幫你安排最佳的行程路線
• 座標搜尋：讓你快速定位特定地點

有了這個主介面，行程管家不僅能完成登入與註冊的初始流程，更能帶來 直覺、活潑又便利的操作體驗。

activity_main 介面設計

以下是我們設計好的 activity_main.xml 程式碼，這個版面透過 LinearLayout 搭配 ImageButton 與 TextView，以清晰的分區方式，將三大功能模組展示在使用者眼前：

<?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:layout_width="match_parent"
        android:layout_height="450dp"
        android:orientation="vertical"
        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="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal" >

            <ImageButton
                android:id="@+id/imageButton8"
                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:text="景點推薦"
                android:layout_weight="1.5"
                android:textStyle="bold"
                android:gravity="center"/>


        </LinearLayout>

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

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

            <ImageButton
                android:id="@+id/imageButton10"
                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="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal">
            <ImageButton
                android:id="@+id/imageButton11"
                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/textView3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="座標搜尋"
                android:textStyle="bold"
                android:gravity="center"/>


        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

成果展示:

在下一篇中，我將帶領大家繼續展開前端的冒險之旅，撰寫 主介面功能的程式碼，讓這些按鈕不只是「看得到」，而是能真正「動起來」！