[Android] 漂亮的欄位輸入介面 TextInputLayout
阿新 • • 發佈:2018-12-27
之前使用的文字輸入介面,只有使用一個 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 了,也許過一陣子會更穩定一點。