我們現在在做Android端的輸入框時,要具備如下功能:
默認提示
獲取焦點時提示上移至輸入框頂部
獲取焦點時輸入框有提示
錯誤時增加錯誤提示
直接上圖:
默認情況:
獲取焦點時:
開始輸入文字時:
有錯誤時:
代碼為(只寫上圖其中一個輸入框):
<android.support.design.widget.TextInputLayout
android:id="@+id/til"
app:hintTextAppearance="@style/textInputLayoutHint"
app:errorTextAppearance="@style/textInputLayoutError"
android:textColorHint="@color/color_CED2D9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.test.widget.textinput.TrainEditText
android:layout_marginBottom="-4dp"
app:dropdown_enable="false"
android:importantForAutofill="noExcludeDescendants"
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:ellipsize="end"
android:drawablePadding="5dp"
android:paddingBottom="18dp"
android:imeOptions="actionNext"
android:inputType="text"
android:lines="1"
android:theme="@style/EditTextTheme"
android:textCursorDrawable="@drawable/train_edittext_cursor_color"
android:maxLines="1"
android:textColor="@color/color_train_main_text"
android:textColorHint="@color/color_8592A6"
android:textSize="17dp"
android:visibility="visible"
tools:ignore="UnusedAttribute" />
</com.test.widget.textinput.TrainEditText>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
注意:TrainEditText是封裝的TextView
那么接下來逐一介紹一下各個地方字體的顏色設置方法:以“姓氏”這個輸入框為🌰:
默認情況下的“姓氏”:在TextInputLayout中設置:
android:textColorHint="@color/color_CED2D9"
1
獲取焦點時,藍色的“姓氏”:
在TextInputLayout中設置:
app:hintTextAppearance="@style/textInputLayoutHint"
1
代碼為:
<style name="textInputLayoutHint">
<item name="android:textSize">12dp</item>
<item name="android:textColor">@color/color_train_main</item>
</style>
1
2
3
4
獲取焦點時輸入框提示字體顏色:
在TrainEditText中設置:
android:textColorHint="@color/color_8592A6"
1
獲取焦點時輸入框輸入文字顏色:
在TrainEditText中設置:
android:textColor="@color/color_train_main_text"
1
錯誤提示顏色:
app:errorTextAppearance="@style/textInputLayoutError"
1
代碼為:
<style name="textInputLayoutError">
<item name="android:textSize">14dp</item>
<item name="android:textColor">@color/color_e30609</item>
</style>
1
2
3
4
編輯框橫線的UI
在TrainEditText中設置:
android:theme="@style/EditTextTheme"
1
代碼為:
<style name="EditTextTheme" parent="TrainAppTheme">
<item name="colorControlNormal">@color/color_CED2D9</item> //未獲得焦點時顏色
<item name="colorControlActivated">@color/color_train_main</item>//獲得焦點時顏色
</style>
---------------------