Material Design整理（一）——TextInputLayout

github地址 点击打开

添加依赖

TextInputLayout是在Material Design中的,如果我们要使用的话,必须在gradle文件中配置

dependencies {
    compile 'com.android.support:appcompat-v7:25.0.1'
    compile 'com.android.support:design:25.0.1'
}

开始使用

TextInputLayout是一种新的继承自LinearLayout的布局，使用时其只能包含一个EditText或其子类控件（如AutoCompleteTextView）

还可通过设置hint和error来显示浮动标签

注意：一个TextInputLayout中 有且只有 一个EditText！

举例

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_email"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    app:counterEnabled="true"
    app:counterMaxLength="11"
    app:hintAnimationEnabled="true">

    <AutoCompleteTextView
        android:id="@+id/et_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:imeActionId="@+id/et_password"
        android:imeOptions="actionNext"
        android:inputType="phone"
        android:maxLines="1"
        android:singleLine="true" />

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

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_pwd"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:passwordToggleEnabled="true"
    app:passwordToggleTint="@color/colorPrimary"
    app:passwordToggleTintMode="multiply">

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:imeActionId="@+id/bt_login"
        android:imeOptions="actionDone"
        android:inputType="textPassword"
        android:maxLines="1"
        android:singleLine="true" />

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

<Button
    android:id="@+id/bt_login"
    style="?android:textAppearanceSmall"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:text="登录"
    android:textStyle="bold" />

• 浮动标签

android:hint="Email"
app:hintEnabled="true"
app:hintAnimationEnabled="true"

• 字数统计

app:counterEnabled="true"
app:counterMaxLength="11"

• 错误提示

if (TextUtils.isEmpty(phone)) {
    et_email.setError("手机号为空");
    return;
}
if (!checkMobileNumber(et_email.getText().toString())) {
    et_email.setError("手机格式错误");
    return;
}

• 密码框右侧图标

app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/colorPrimary"
app:passwordToggleTintMode="multiply"

• 虚拟键盘监听
  有时候我们在用虚拟键盘的时候,在输入账号之后,我们点击下一项,焦点会跑到输入密码这一栏,当我们密码输入完成之后,点击确定按钮就能登录了,这个怎么实现的呢.

账号EditText中

android:imeActionId="@+id/et_password"
android:imeOptions="actionNext"

密码EditText中

android:imeActionId="@+id/bt_login"
android:imeOptions="actionDone"

AutoCompleteTextView –自动提示输入框

继承自EditText，拥有EditText的所有属性，可以设置在输入时自动在输入框下方提示信息

使用：

List<String> list = new ArrayList<>();
list.add(charSequence + "@qq.com");
list.add(charSequence + "@163.com");
ArrayAdapter<String> arrayAdapter= new ArrayAdapter<String>(context,android.R.layout.simple_list_item_1, list);
et_email.setAdapter(arrayAdapter);