iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
AI & Data

AI Facial Expression Recognition: Data, Model, Application系列 第 25

[Day 25] Android Studio 七日隕石開發:一起來布局 App 介面!

前言

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

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

User Research (with/by myself)

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

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

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

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

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

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

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

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


元件擺放方式

  1. 拖拉
    https://ithelp.ithome.com.tw/upload/images/20211002/20141294POC2zOmRac.jpg

  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介面就完成了!
https://ithelp.ithome.com.tw/upload/images/20211002/20141294vJXzYOeNfr.jpg
但現在看到的只是沒有功能的外殼,
明天就來介紹如何讓元件活起來吧~


上一篇
[Day 24] Android Studio 七日隕石開發:安裝與創建第一個專案 (下)
下一篇
[Day 26] Android Studio 七日隕石開發:噓! 我正在監聽這個元件
系列文
AI Facial Expression Recognition: Data, Model, Application30

尚未有邦友留言

立即登入留言