歐文的BLOG

App中常用的輸入框為 EditText，但它缺乏了Title提示，而為了補充該資訊，設計人員便會在其上補齊資訊。

雖然正規，但其實上撰寫時，就會顯得冗長 與 客制輸入框元件來處理這塊。

這邊介紹一個官方推薦的方式 

TextInputLayout ＋ TextInputEditText

Material desing 是官方強力推薦設計規範(我個人是很推崇的)，簡單又好看，也有推出工具簡單實作。

本文介紹的也是他們提供的一個輸入框工具

詳細請參考：官方文件

其style 分為兩種：1. FilledBox(填充樣式) 與 OutlinedBox (框線樣式) 

如下圖：

我是覺得UI/UX都不錯，以下介紹實作面吧

實作

Step 1 - import materail library

在app的build.gradle中加入

implementation 'com.google.android.material:material:1.3.0'

Step 2 - Add TextInputLayout ＋ TextInputEditText  into Layout

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="label">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/edit_text_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:imeOptions="actionNext"
        android:inputType="text"
        android:singleLine="true"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
        android:textColor="@color/white">

        <requestFocus />
    </com.google.android.material.textfield.TextInputEditText>

</com.google.android.material.textfield.TextInputLayout>

Options 

Style設定 官方文件寫得很清楚這邊就不多說了。

Outlined

TextInputLayout 預設為FilledBox style

須設置style

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/input_layout_country_code"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Label">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/edit_text_country_code"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
        android:textColor="@color/select_text_white_color"/>

</com.google.android.material.textfield.TextInputLayout>

若要使用Outlined style, 則需要

<activity
    android:name=".MainActivity"
    android:theme="@style/Theme.MaterialComponents.DayNight.NoActionBar" />

這是很重要的一步，因內部會檢查theme, 沒使用便拋出crash. 錯誤訊息如下

Dropdown 

這種下拉式套件，我也找了許久。一直想說用AutoComplementTextView 是否適合。

官方使用 AutoComplieteTextView 並設定 inputType="none" 關閉編輯文字功能。 

這邊做法很多，但還是看設計。我覺得也可跳出dialog 來呈現選單。