随着智能手机和移动应用的普及，用户对于应用的用户体验要求越来越高。而其中一个非常重要的方面，就是输入框的样式和交互体验。在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/n/316102.html
微信扫一扫 
支付宝扫一扫 