TextInputLayout使用教程

最新推荐文章于 2024-04-10 06:50:50 发布

VikcyWinner

最新推荐文章于 2024-04-10 06:50:50 发布

阅读量719

点赞数

分类专栏： Android开发

本文链接：https://blog.csdn.net/VickyWinner/article/details/53006700

版权

Android开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言：最近自己想要做一个毕业论文的营销实验，不知道能不能实现自己最终的目标。但很多事光想并没有什么用，还是需要我们一步步得去做。对我来说也是一种锻炼吧。希望自己的努力会有好的结果。因为论文导师说，做不好连论文开题答辩都不给我去了。哈哈哈，不用这么狠吧。

最近感觉很多人会把自己放到一个框架下去成长，每当我和别人发现我学习编程，他们会说你不是阿里巴巴商学院的学生嘛，怎么在学习编程？

每当我和别人谈我外联的经历或者对商业的一点点思考，他们会很惊讶的问我，你不是做技术，学编程的吗？怎么在做这些。

我觉得我不应该活在一个条条框框下，谁说我不能去涉及多个领域，或者要求我只能有一个兴趣爱好。我相信很多技能它们都是有交叉的领域的，一个领域的知识能够为另一个领域有所帮助和启发。所以，我并不觉得对商业的热衷和对技术的学习有任何冲突的地方。

不知道这些观点对不对，但我依然会坚持自己的许多个人爱好，去不断学习和思考。即使有人会说我不专注，难成为一个领域的专家。

行动派。

昨晚看到一个关于TextInputLayout的介绍，感觉简直太酷了。所以想写一篇关于TextInputLayout的文章，来介绍这个控件。

Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的 Android Design Support Library，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。最重要的是，Android Design Support Library的兼容性更广，直接可以向下兼容到Android 2.2。这不得不说是一个良心之作。

记得很早接触android的时候就接触了MD设计风格，感觉其中带来的控件都是十分简约好看的，当初玩CardView就觉得简直发现新大陆，原来可以这么简单的做出这么简约的界面。

接下来，我们就来接触一下TextInputLayout，MD设计风格里的一个很酷炫的控件。

这是今天的一个Demo效果图，我们将通过这个Demo效果的实现，去领略TextInputLayout的酷炫。

首先我们先要注入依赖：

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:24.2.1'
    testCompile 'junit:junit:4.12'
//    注入Design的依赖，TextInputLayout就在这个中
    compile 'com.android.support:design:24.2.1'
}

在注入依赖以后，我们开始动手写我们的布局吧，我会尽力把知识点以注释的形式写在代码中，为了让大家看代码的时候能够有更清晰的逻辑。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.vicky.singletonpattern.MainActivity">
    <!--TextInputLayout-->
    <!--counterEnabled 属性是用来设置是否进行计数的，就是我们右下角这个0/5-->
    <!--counterMaxLength 属性用来设置计数的最大长度-->
    <!--counterOverflowTextAppearance 属性用来设置当我们的输入长度超过我们指定的最大长度时的一个样式-->
    <!--<style name="MyOverflowText" >-->
        <!--<item name="android:textColor">#f3672b</item>-->
    <!--</style>-->
    -->
    <!--errorTextAppearance 属性用来设置-->
    <android.support.design.widget.TextInputLayout
        android:id="@+id/textinputlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:counterEnabled="true"
        app:counterMaxLength="5"
        app:counterOverflowTextAppearance="@style/MyOverflowText"
        app:errorTextAppearance="@style/MyErrorStyle"
        >
        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:hint="请输入用户名"
            />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textinputlayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:counterEnabled="true"
        app:counterMaxLength="5"
        app:counterOverflowTextAppearance="@style/MyOverflowText"
        app:errorTextAppearance="@style/MyErrorStyle"
        >
        <!--android:inputType="textPassword" 设置成textPassword就会自动多出右边的眼睛，是不是很酷炫-->
        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:inputType="textPassword"
            android:hint="请输入密码"
            />
    </android.support.design.widget.TextInputLayout>


    <android.support.design.widget.TextInputLayout
        android:id="@+id/textinputlayout3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:counterEnabled="true"
        app:counterMaxLength="11"
        app:counterOverflowTextAppearance="@style/MyOverflowText"
        app:errorTextAppearance="@style/MyErrorStyle"
        >

        <EditText
            android:id="@+id/editText3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:inputType="textEmailAddress"
            android:hint="请输入邮箱地址"
            />
    </android.support.design.widget.TextInputLayout>

</LinearLayout>

这里主要来说一下TextInputLayout的一些属性：

counterEnabled ：用来设置是否进行计数的，就是我们右下角这个0/5

counterMaxLength：用来设置计数的最大长度

counterOverflowTextAppearance：用来设置当我们的输入长度超过我们指定的最大长度时的一个样式

errorTextAppearance：用来设置输入错误时的样式

接下来看一下我们的代码逻辑，其实很简单，就是实例化、然后给EditText添加一个监听器，然后进行一定的业务逻辑判断。

package com.example.vicky.singletonpattern;

import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.util.Patterns;
import android.view.View;
import android.widget.EditText;

import com.example.vicky.singletonpattern.SingletonPattern.SingleClass;

public class MainActivity extends AppCompatActivity {
    TextInputLayout textInputLayout;
    EditText editText;
    TextInputLayout textInputLayout2;
    EditText editText2;
    TextInputLayout textInputLayout3;
    EditText editText3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        SingleClass singleClass=SingleClass.getSingleClass();
        textInputLayout= (TextInputLayout) findViewById(R.id.textinputlayout);
        editText= (EditText) findViewById(R.id.editText);
        textInputLayout2= (TextInputLayout) findViewById(R.id.textinputlayout2);
        editText2= (EditText) findViewById(R.id.editText2);
        textInputLayout3= (TextInputLayout) findViewById(R.id.textinputlayout3);
        editText3= (EditText) findViewById(R.id.editText3);
        editText.addTextChangedListener(new MyTextWatcher(editText));
        editText2.addTextChangedListener(new MyTextWatcher(editText2));
        editText3.addTextChangedListener(new MyTextWatcher(editText3));
    }

    /**
     * 判断用户名是否可用
     * @return
     */
    public boolean isNameValid(){
        if (TextUtils.isEmpty(editText.getText().toString().trim())){
//            setErrorEnabled方法设置错误的样式和显示或者隐藏错误的提示信息
            textInputLayout.setErrorEnabled(true);
            //设置错误的提示信息
            textInputLayout.setError("用户名不能为空格");
            editText.requestFocus();
            return false;
        }
//        一定要在之后调用setErrorEnabled(false);，不然错误提示会一直在
        textInputLayout.setErrorEnabled(false);
        return true;
    }

    public boolean isPasswordValid(){
        if (TextUtils.isEmpty(editText2.getText().toString().trim())){
            textInputLayout2.setErrorEnabled(true);
            textInputLayout2.setError("密码不能为空格");
            editText2.requestFocus();
            return false;
        }
        textInputLayout2.setErrorEnabled(false);
        return true;
    }

    public boolean isEmailValid(){
        if (TextUtils.isEmpty(editText3.getText().toString().trim())
                || !Patterns.EMAIL_ADDRESS.matcher(editText3.getText().toString().trim()).matches()){
            textInputLayout3.setErrorEnabled(true);
            textInputLayout3.setError("请确认邮箱是否输入正确");
            editText3.requestFocus();
            return false;
        }
        textInputLayout3.setErrorEnabled(false);
        return true;
    }
//    自定义EditText的监听器。
    private class MyTextWatcher implements TextWatcher{

        private View view;
        public MyTextWatcher(View view){
            this.view=view;
        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {

        }

        @Override
        public void afterTextChanged(Editable s) {
            switch (view.getId()){
                case R.id.editText:
                    isNameValid();
                    break;
                case R.id.editText2:
                    isPasswordValid();
                    break;
                case R.id.editText3:
                    isEmailValid();
                    break;
            }
        }
    }
}

只用通过TextInputLayout对EditText进行包裹就能实现酷炫的登录界面效果，其实蛮值得我们去认真一下MD设计中的所有新的控件。

VikcyWinner

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
TextInputLayout使用教程

昨晚看到一个关于TextInputLayout的介绍，感觉简直太酷了。所以想写一篇关于TextInputLayout的文章，来介绍这个控件。Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，Google给我们提供了更加规范的MD设计
复制链接

扫一扫