[Android] 漂亮的欄位輸入介面 TextInputLayout

之前使用的文字輸入介面，只有使用一個 EditText 加 Hint(或稱為Placehole) 就結束了，在使用者輸入資料之前，是可以看的到欄位名稱沒錯，但使用者填完之後之後，畫面上會變成一堆的文字，不知道什麼值要對應到什麼欄位。

參考了 seafile 的account_detail.xml寫法，完成後的畫面如下:

滿神奇的，還可以顯示password 欄位值的值為明碼。還會有欄名縮放＋移動位置的動畫，滿酷的，附上的我 layout xml 檔:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/activity_login"
    tools:context="com.lwfd.hiftp.LoginActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/ip_hint"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/activity_horizontal_margin"
        >
        <EditText
            android:id="@+id/ip"
            android:hint="@string/prompt_ip"
            android:inputType="textUri"
            android:maxLines="1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/et_margin_bottom"
            android:layout_marginLeft="@dimen/auto_complete_ed_margin_left"
            android:layout_marginRight="@dimen/auto_complete_ed_margin_right"
            android:fontFamily="sans-serif"
            />

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/port_hint"
        app:layout_constraintTop_toBottomOf="@+id/ip_hint"
        app:layout_constraintLeft_toLeftOf="@+id/ip_hint"
        android:layout_width="368dp"
        android:layout_height="wrap_content">

        <EditText
            android:inputType="number"
            android:text="@string/default_port"
            android:id="@+id/port"
            android:hint="@string/prompt_port"
            android:maxLines="1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/et_margin_bottom"
            android:layout_marginLeft="@dimen/auto_complete_ed_margin_left"
            android:layout_marginRight="@dimen/auto_complete_ed_margin_right"
            android:fontFamily="sans-serif"
            />
    </android.support.design.widget.TextInputLayout>



    <android.support.design.widget.TextInputLayout
        android:id="@+id/account_hint"
        app:layout_constraintTop_toBottomOf="@+id/port_hint"
        app:layout_constraintLeft_toLeftOf="@+id/ip_hint"
        android:layout_width="368dp"
        android:layout_height="wrap_content">

        <EditText
            android:text="@string/default_id"
            android:id="@+id/account"
            android:maxLines="1"
            android:hint="@string/prompt_account"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/et_margin_bottom"
            android:layout_marginLeft="@dimen/auto_complete_ed_margin_left"
            android:layout_marginRight="@dimen/auto_complete_ed_margin_right"
            android:fontFamily="sans-serif"
            />

    </android.support.design.widget.TextInputLayout>


    <android.support.design.widget.TextInputLayout
        android:id="@+id/password_hint"
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/account_hint"
        app:layout_constraintLeft_toLeftOf="@+id/ip_hint"
        >

        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/et_margin_bottom"
            android:layout_marginLeft="@dimen/auto_complete_ed_margin_left"
            android:layout_marginRight="@dimen/auto_complete_ed_margin_right"
            android:fontFamily="sans-serif"
            android:hint="@string/prompt_password"
            android:inputType="textPassword" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:text="@string/action_save"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/save_button"

        app:layout_constraintTop_toBottomOf="@+id/password_hint"
        app:layout_constraintLeft_toLeftOf="@+id/ip_hint"
        android:paddingBottom="@dimen/long_btn_padding_bottom"
        android:paddingTop="@dimen/long_btn_padding_top"
        android:layout_marginLeft="@dimen/long_btn_margin_left"
        android:layout_marginStart="@dimen/long_btn_margin_left"
        android:textAllCaps="false"/>


</android.support.constraint.ConstraintLayout>

Android 新的 ConstraintLayout，還滿好玩用，目前操作起來優點似乎滿多的，但目前還是 beta, 而且1~2天就改一個版號，目前出到  1.0.0 beta 了，也許過一陣子會更穩定一點。