安卓TextinputLayout使用方法

不念不忘少年蓝@ 2022-05-12 04:22 599阅读 0赞

## **目录** ##

导入依赖

TextinputLayout

TextinputLayout标签基本属性

加入事件(java篇)

--------------------

## 导入依赖 ##

使用Design下的TextinputLayout前导入依赖步骤

![70][]

在这个页面中直接找到design这个依赖，点击后再点击这两个窗口上的OK按钮，等待编译完成就完成导入了！

(可能版本不一样，导入即可)

![70 1][]

--------------------

## TextinputLayout ##

![70 2][]

TextinputLayout在Design下，可以配合EditText或者EditText的子类使用，通常可以用来提示错误信息，或者显示提示字数限制等一些操作，还可以用来做密码框密码显示！这些使用，只需要在属于TextinputLayout的标签内加入相应的属性设置对应的事件即可，先来看下最简单的效果

![70 3][]

当在这个文本框输入信息的时候，提示文字会自动向上移动；

第一个和第二个文本框使用了TextinputLayout，第三个未普通的EditText，我设置了显示字数长度和密码框的显示，看下我的布局文件

<?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        tools:context=".MainActivity">
    
        <android.support.design.widget.TextInputLayout
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:hint="输入用户名(TextInputLayout)"
    
            app:counterEnabled="true"
            app:counterMaxLength="6"
            app:errorEnabled="true">
    
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
    
        </android.support.design.widget.TextInputLayout>
    
    
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:hint="请输入密码(TextInputLayout)"
            app:passwordToggleEnabled="true">
    
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword" />
    
        </android.support.design.widget.TextInputLayout>
    
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            
            android:hint="请输入手机号(普通的EditText)" />
    
    </LinearLayout>

## TextinputLayout标签基本属性 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>详细介绍</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&nbsp;android:hint=" "</td> 
   <td>提示输入内容</td> 
  </tr> 
  <tr> 
   <td>app:hintEnabled=“true”</td> 
   <td>是否显示提示(hint)，默认为true</td> 
  </tr> 
  <tr> 
   <td>app:hintAnimationEnabled="true"</td> 
   <td>设置动画，是否有动画，默认为true</td> 
  </tr> 
  <tr> 
   <td>app:hintTextAppearance=" "</td> 
   <td>提示文本的样式</td> 
  </tr> 
  <tr> 
   <td> <p>app:errorEnabled="true"</p> </td> 
   <td>错误提示是否为显示</td> 
  </tr> 
  <tr> 
   <td>app:errorTextAppearance=" "</td> 
   <td>设置错误提示的样式</td> 
  </tr> 
  <tr> 
   <td> <p>app:passwordToggleEnabled="true"</p> </td> 
   <td>设置是否为可显示密码(上图右边的小眼睛)</td> 
  </tr> 
  <tr> 
   <td>app:passwordToggleDrawable=" "</td> 
   <td>定义显示密码按钮的图标</td> 
  </tr> 
  <tr> 
   <td>app:passwordToggleTintMode=" "</td> 
   <td>设置显示密码按钮的模式(<span style="color:#3399ea;">screen、src_atop、multiply、src_in、src_over</span>)</td> 
  </tr> 
  <tr> 
   <td>app:passwordToggleTint=" "</td> 
   <td>为显示密码按钮设置颜色</td> 
  </tr> 
  <tr> 
   <td>app:counterEnabled=" "</td> 
   <td>是否显示字数限制(如图第一个文本框右下角)</td> 
  </tr> 
  <tr> 
   <td>app:counterMaxLength=" "</td> 
   <td>最大的输入长度</td> 
  </tr> 
  <tr> 
   <td> <p>app:counterEnabled=" "</p> </td> 
   <td>是否显示长度限制(true、false)</td> 
  </tr> 
  <tr> 
   <td>app:counterTextAppearance=" "</td> 
   <td>长度提示的样式</td> 
  </tr> 
 </tbody> 
</table>

## 加入事件(java篇) ##

实现目标:点击注册按钮不符合要求后输入框下提示字数不符合要求。(在这里只对用户名做出了限制，举一反三即可)

》》》[AndroidStudio快速实例化-插件安装与使用][AndroidStudio_-]《《《点击进入

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    
    
        private TextInputLayout username;
        private TextInputLayout pasword;
        private EditText phone_number;
        private Button register;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initView();
    
        }
    
        private void initView() {
            username = (TextInputLayout) findViewById(R.id.username);
            pasword = (TextInputLayout) findViewById(R.id.pasword);
            phone_number = (EditText) findViewById(R.id.phone_number);
            register = (Button) findViewById(R.id.register);
    
            register.setOnClickListener(this);
    
        }
    
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.register:
                    submit();
                    //判断字数，设置事件
                    username.setErrorEnabled(true);//提示信息设置为可见
                    username.setError("字数不符合要求");
    
                    if (username.getEditText().getText().length() == 0 || username.getEditText().getText().length() > 6) {
                        username.setError("字数不符合要求");
                    } else {
                        username.setErrorEnabled(false);//提示信息设置为不可见
                    }
                    break;
            }
        }
    
        //判断手机号输入是否为空
        private void submit() {
            // validate
            String number = phone_number.getText().toString().trim();
            if (TextUtils.isEmpty(number)) {
                Toast.makeText(this, "请输入手机号(普通的EditText)", Toast.LENGTH_SHORT).show();
                return;
            }
            // TODO validate success, do something
        }
    }

再来一遍布局文件

<?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        tools:context=".MainActivity">
    
        <android.support.design.widget.TextInputLayout
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:hint="输入用户名(TextInputLayout)"
            app:counterEnabled="true"
            app:counterMaxLength="6"
            app:errorEnabled="true">
    
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
    
        </android.support.design.widget.TextInputLayout>
    
    
        <android.support.design.widget.TextInputLayout
            android:id="@+id/pasword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:hint="请输入密码(TextInputLayout)"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@color/design_default_color_primary_dark">
    
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword" />
    
        </android.support.design.widget.TextInputLayout>
    
        <EditText
            android:id="@+id/phone_number"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
    
            android:hint="请输入手机号(普通的EditText)" />
    
        <Button
            android:id="@+id/register"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="100dp"
            android:text="注册" />
    
    </LinearLayout>

效果演示:

![70 4][]

[70]: /images/20220512/408bd2835db945529d1221fb959a8d2d.png
[70 1]: /images/20220512/b98f26f6c1524bf89cd70bed96710f7e.png
[70 2]: /images/20220512/57dc096ebbdc45caad2449c93247c452.png
[70 3]: /images/20220512/8ba710bf7b5642acaa432beb3fbaa515.png
[AndroidStudio_-]: https://blog.csdn.net/qq_40881680/article/details/82012180
[70 4]: /images/20220512/9924b61e5c5447db9ea33459483e6fd0.png