隨著智能手機和移動應用的普及，用戶對於應用的用戶體驗要求越來越高。而其中一個非常重要的方面，就是輸入框的樣式和交互體驗。在Android平台上，如何設計漂亮、易用的輸入框樣式，不僅能提升應用的整體美感，也能幫助用戶更加便捷地輸入信息，從而提高用戶的滿意度。本文將從多個角度為大家詳細介紹Android輸入框樣式優化的技能，同時提供對應的代碼示例。
一、材料設計風格
材料設計是Google 2014年提出的一種設計思路，旨在提供更為豐富、具有層次感的用戶體驗。其中的控制項設計非常值得我們學習。在Android中，我們可以通過設置輸入框的主題樣式來實現材料設計風格的輸入框。
首先，我們需要在 styles.xml 文件中定義新的主題樣式：
<!-- 基於默認主題的輸入框樣式 -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:editTextStyle">@style/EditTextTheme</item>
</style>
<!-- 材料設計風格的輸入框樣式定義 -->
<style name="EditTextTheme">
<item name="colorControlNormal">#999999</item>
<item name="colorControlActivated">@color/colorAccent</item>
<item name="colorControlHighlight">@color/colorAccent</item>
<item name="android:textColorHighlight">@color/colorAccent</item>
</style>
其中，「colorPrimary」、「colorPrimaryDark」、「colorAccent」 三個參數用於定義主題色。EditTextTheme 主題樣式中的四個參數分別用於定義輸入框的常態、激活態、高亮態以及高亮文本顏色。
接下來，我們在布局文件中使用 EditText 控制項，並給它設置輸入框主題樣式：
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
style="@style/EditTextTheme"/>
執行上述代碼後，即可得到一個漂亮的材料設計風格的輸入框。
二、狀態切換動畫
讓輸入框具有明顯的狀態切換動畫，不僅能夠增加用戶喜愛度，更可以幫助用戶準確的區分輸入框的不同狀態。
這裡我們可以通過 XML 動畫實現狀態切換效果。首先，在 anim 目錄下創建一個名為「edittext_state.xml」的文件，用於定義動畫效果：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true"
android:drawable="@drawable/edittext_focused"/>
<item android:state_pressed="true"
android:drawable="@drawable/edittext_pressed"/>
<item android:drawable="@drawable/edittext_normal"/>
</selector>
在上述代碼中，我們定義了三種輸入框的狀態：常態、激活態和按下態。編輯器在編譯時會自動生成對應的狀態資源，分別存放在「drawable」文件夾下。
接下來，我們在布局文件中將輸入框的背景設置為我們剛才定義的動畫效果即可：
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
android:background="@drawable/edittext_state"/>
這時候，我們已經成功地為輸入框添加了一個漂亮的狀態切換動畫。
三、密碼可見性切換
當我們為應用設計登錄或註冊頁面時，通常需要涉及到密碼輸入。而在安全性和用戶體驗之間尋求平衡點，則是極具挑戰的。傳統的做法是在輸入框旁邊加一個切換按鈕，用於控制密碼是否可見。但是這樣會佔用寶貴的屏幕空間，另外用戶可能會對切換按鈕的效果感到迷惑。因此，現在常用的方法是在密碼輸入框中使用單擊事件監聽器來實現密碼可見性的切換。
代碼實現如下：
private boolean isShow = false;
mShowPwdCheckBox.setOnCheckedChangeListener(
new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton compoundButton,
boolean isChecked) {
if (isChecked) {
// 顯示密碼
mPasswordEditText.setTransformationMethod(
HideReturnsTransformationMethod.getInstance());
} else {
// 隱藏密碼
mPasswordEditText.setTransformationMethod(
PasswordTransformationMethod.getInstance());
}
// 移動游標到字元末尾
mPasswordEditText.setSelection(mPasswordEditText.getText().length());
// 記錄當前的狀態
isShow = isChecked;
}
}
);
在上述代碼中，「mShowPwdCheckBox」 是一個 CheckBox 控制項，用於切換密碼可見性狀態。
此時，我們已經成功地為密碼輸入框實現了切換密碼可見性的功能。點擊密碼輸入框旁邊的「眼睛」圖標，即可將密碼狀態從明文切換為密文，反之亦然。
四、動態高度調整
在非常規情況下（例如鍵盤彈出或輸入內容變多），輸入框需要具有自適應高度的功能，否則將會影響用戶的輸入體驗。
Android 4.0（API等級14）及以上的版本提供了自適應高度的能力。只需在 EditText 控制項中設置「maxLines」屬性，就可以讓輸入框的高度動態調整。
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
android:inputType="textMultiLine"
android:gravity="top"
android:maxLines="5" />
上述代碼中，「maxLines」屬性用於控制輸入框的行數。當輸入框內容超出最大行數時，文本將被隱藏。
值得注意的是，若使用該方法請將EditText 的 android:inputType屬性設置為textMultiLine 。
五、自動填充功能
如何幫助用戶快速地輸入信息是一個非常重要的問題。在常見的登錄場景中，用戶名和密碼通常需要用戶反覆輸入。而Android提供的自動填充功能，可以大大簡化用戶的輸入流程。
可以通過如下代碼為輸入框添加自動填充功能：
EditText usernameEditText = findViewById(R.id.username_edittext);
EditText passwordEditText = findViewById(R.id.password_edittext);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
// 創建自動填充數據源
AutofillId usernameAutofillId = usernameEditText.getAutofillId();
AutofillId passwordAutofillId = passwordEditText.getAutofillId();
String[] autofillHints = {
// 此處定義了多個自動填充提示
View.AUTOFILL_HINT_USERNAME,
View.AUTOFILL_HINT_PASSWORD,
View.AUTOFILL_HINT_EMAIL_ADDRESS,
View.AUTOFILL_HINT_PERSON_NAME,
View.AUTOFILL_HINT_PHONE,
View.AUTOFILL_HINT_POSTAL_ADDRESS
};
AutofillValue usernameAutofillValue = AutofillValue.
forText(usernameEditText.getText().toString());
AutofillValue passwordAutofillValue = AutofillValue.
forText(passwordEditText.getText().toString());
RemoteViews presentation = new RemoteViews(getPackageName(),
R.layout.view_autofill_representation);
// 將自動填充數據源綁定到視圖
presentation.setTextViewText(R.id.username,
usernameEditText.getText().toString());
presentation.setTextViewText(R.id.password,
passwordEditText.getText().toString());
IntentSender sender =
presentation.getLayoutId() == R.layout.view_autofill_representation
? new IntentSender(
mServer.newIntentForPresentation(usernameAutofillValue,
passwordAutofillValue).getIntentSender())
: null;
AutofillManager.AutofillCallback callback = new AutofillManager.AutofillCallback() {
@Override
public void onAutofillEvent(@NonNull View view, int event) {
}
};
// 將自動填充提示綁定到輸入框
usernameEditText.setAutofillHints(autofillHints);
passwordEditText.setAutofillHints(autofillHints);
usernameEditText.setImportantForAutofill(
View.IMPORTANT_FOR_AUTOFILL_YES_EXCLUDE_DESCENDANTS);
passwordEditText.setImportantForAutofill(
View.IMPORTANT_FOR_AUTOFILL_YES_EXCLUDE_DESCENDANTS);
AutofillManager afm = getSystemService(AutofillManager.class);
if (afm != null) {
// 註冊 AuthenticationCallback 監聽器
afm.registerCallback(callback, mHandler);
// 提交自動填充數據源
afm.commit(usernameAutofillValue,
usernameAutofillId, sender);
afm.commit(passwordAutofillValue,
passwordAutofillId, sender);
}
}
上述代碼中的「autofillHints」用於定義自動填充提示信息。Android 系統已內置多種使用示例，開發者也可以根據自己的需要自定義其他提示信息。
在此，我們已經成功地為輸入框添加了自動填充功能。當用戶下次進行登錄時，他們在輸入框中只需錄入較少信息。
總結
本文從多個方面為大家詳細介紹了Android輸入框樣式的優化技巧。希望讀者們可以根據自己的需求和喜好，靈活使用上述技巧，為用戶提供更為便捷、漂亮的輸入體驗。
原創文章，作者：OPZMK，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/316102.html
微信掃一掃 
支付寶掃一掃 