前言

昨天我們成功的運行了自己做的App。
但我們還有2個步驟要做：

1. 布局App元件
2. 實作App功能

User Research (with/by myself)

今天要來布局App的元件(我以最簡需求來製作)
一個影像辨識需要甚麼元件呢?

1. 顯示標題的文字框
   由於我只打算做一個頁面(不會切來切去)
   所以標題只好放在最上面

2. 顯示影像的視窗
   這不用多說吧? 就最基本的讓user看到現在辨識的圖片。

3. 執行辨識的按鈕**(否決)**
   關於這點我想過兩個方案，
   第一個是有辨識按鈕，在user拍照後再進行辨識。
   第二個是沒有辨識按鈕，拍完照立刻辨識。
   雖然感覺第二個方案的互動性變少了，
   但是使用app久了，uesr會覺得多這步驟很麻煩，
   所以把辨識按鈕取消掉。

4. 打開相機的按鈕
   打開相機+辨識的功能都合併在"拍照"按鈕就好。

5. 打開相簿的按鈕
   這個按鈕我有點猶豫要不要放上去，
   因為在使用者體驗上，及時辨識才是需要的。
   打開相簿用已經存在手機上的相片進行辨識好像只有我(測試人員)會用到。
   但身為教學的文章，
   多介紹一個打開相簿的功能好像也合理。

6. 顯示辨識結果的文字框
   不顯示結果是要使用者通靈嗎?

結論:只需要1、2、4、5、6，共5個元件！

元件擺放方式

1. 拖拉
   

2. 寫code

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

這兩個方式是相對應的，
你拖拉元件之後，code就會自動產生，
你寫code之後，元件就會出現在UI上。

• 注意元件所在的層級，有時候拖拉會不小心把元件放在元件上。

元件介紹與布局

TextView

    <TextView
        android:id="@+id/tv_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="AI Face Expression Recognition"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

• android:id = 元件名稱 (我取為tv_header)
• android:layout_width/layout_height = 元件寬度/高度 (wrap_content代表剛好包覆內容的大小)
• android:layout_marginTop = 距離最上面邊界多遠 (20dp) (延伸閱讀: UI的單位好亂!)
• android:text = 顯示的文字
• android:textSize = 文字的大小

ImageView

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="360dp"
        android:layout_height="360dp"
        android:layout_marginTop="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_header"
        app:srcCompat="@android:drawable/sym_def_app_icon" />

• app:layout_constraintEnd_toEndOf、constraintStart_toStartOf、constraintTop_toTopOf
  這個系列比較複雜，化簡一下就是:

1. constraint方向為限制元件位置，End代表右側，Start代表左側，Top代表上側，Bottom代表下側。
2. to方向Of為參考相對於另一個元件的位置。
   例如app:layout_constraintTop_toBottomOf="@+id/tv_header"翻譯成白話文就是:
   「我約束ImageView元件的最上側要貼近tv_header的最下側」

• app:layout_constraintHorizontal_bias = 左右相對間距的百分比，預設是0.5。
• app:srcCompat="@android:drawable/sym_def_app_icon" = 從drawble中選取圖片當作預覽畫面

Button (拍照)

<Button
        android:id="@+id/btn_photo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:backgroundTint="@color/teal_700"
        android:text="用拍照辨識"
        android:textSize="16sp"
        app:icon="@android:drawable/ic_menu_camera"
        app:layout_constraintEnd_toStartOf="@+id/btn_album"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

Button (相簿)

    <Button
        android:id="@+id/btn_album"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:backgroundTint="@color/teal_700"
        android:text="從相簿辨識"
        android:textSize="16sp"
        app:icon="@android:drawable/ic_menu_gallery"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btn_photo"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

ListView (辨識結果)

當我要顯示的結果有很多個的時候，
TextView就不堪使用了，
ListView可以讓我一次顯示多筆資料在一個列表中。

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:scrollbarStyle="insideInset"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_photo" />

結語

最後我的們UI介面就完成了!

但現在看到的只是沒有功能的外殼，
明天就來介紹如何讓元件活起來吧~