Material Design系列之TextInputLayout

最新推荐文章于 2022-01-21 13:39:23 发布

原创最新推荐文章于 2022-01-21 13:39:23 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #Android #MD

Android 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用TextInputLayout组件增强原生EditText的样式，包括设置提示动画、字数统计、颜色及错误提示等功能。

受够了原生EditText那种呆板的样子了吗，来给它加点料吧！

首先添加依赖

    compile 'com.android.support:appcompat-v7:24.1.1'
    compile 'com.android.support:design:24.1.1'

开始编写布局

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInput_name"
        // 设置hint的动画
        app:hintAnimationEnabled="true"
        // 设置字数统计
        app:counterEnabled="true"
        // 设置统计字数的颜色
        app:counterTextAppearance="@color/colorPrimary"
        // 设置统计字数最大值，超出会有变色提示
        app:counterMaxLength="10"
        // 设置超出最大值style，就是输入框提示的颜色
        app:counterOverflowTextAppearance="@style/counterOverflow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        // 这个看上去和EditText没什么区别，继承自AppCompatEditText，而AppCompatEditText继承自EditText，只不过实现了TintableBackgroundView接口，没试过，搜到的答案说是全屏状态下有优化
        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
    </android.support.design.widget.TextInputLayout>

overflowStyle设置

    <style name="counterOverflow">
        <item name="android:textColor">@color/red</item>
    </style>

代码中的操作

我们在布局文件中写了一个简单的登录页面，需要验证账号是否正确，进行模拟登录操作，下面我们看代码。

布局文件中

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:gravity="center"
        android:text="Welcome"
        android:textColor="@android:color/black"
        android:textSize="30sp"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInput_name"
        app:hintAnimationEnabled="true"
        app:counterEnabled="true"
        app:counterTextAppearance="@color/colorPrimary"
        app:counterOverflowTextAppearance="@style/Widget.Design.TextInputLayout"
        app:counterMaxLength="10"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInput_pwd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="numberPassword"/>
    </android.support.design.widget.TextInputLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="click"
        android:layout_marginTop="50dp"
        android:text="Login"/>

</LinearLayout>

代码中

    public class MainActivity extends AppCompatActivity {

    private static final String TAG = MainActivity.class.getSimpleName();
    private TextInputLayout mTi_name;
    private TextInputLayout mTi_pwd;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTi_name = (TextInputLayout) findViewById(R.id.textInput_name);
        mTi_pwd = (TextInputLayout) findViewById(R.id.textInput_pwd);
    }

    public void click(View view){

        // 在进行判断前把Error提示设置为false，取消掉错误提示，好处是输入错误之后点击了之后显示取消显示，再设置Error信息
        // 如果不在这里调用，两次错一个地方，很容易让用户混淆，以为点击了之后没有反应
        mTi_name.setErrorEnabled(false);
        mTi_pwd.setErrorEnabled(false);

        // TextInputLayout提供了获取子view也就是EditText对象的方法。
        // TextInputLayout中只能有一个子View，必须是EditText
        String name = mTi_name.getEditText().getText().toString();
        String pwd = mTi_pwd.getEditText().getText().toString();

        if (TextUtils.isEmpty(name)){
            mTi_name.setError("username not null");
            return;
        }else if (TextUtils.isEmpty(pwd)){
            mTi_pwd.setError("password not null");
            return;
        }

        if (!name.equals("odriver")){
            mTi_name.setError("username not exist");
            return;
        }else if (!pwd.equals("123456")){
            mTi_pwd.setError("pwd error");
            return;
        }
        Snackbar.make(view,"Login success", Snackbar.LENGTH_SHORT).show();

    }
}