欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

TextInputLayout的基本使用

程序员文章站 2022-07-02 11:53:45
TextInputLayout属于EditText的一个浮动标签,属于Material Design 设计规范中的,效果可以看下面的动图账号:只是普通EditText密码:用TextInputLayout包裹的EditText使用的话TextInputLayout包裹一个EditText就可以。当然TextInputLayout也只能包裹EditText:
TextInputLayout属于EditText的一个浮动标签,属于Material Design 设计规范中的,效果可以看下面的动图

账号:只是普通EditText

密码:用TextInputLayout包裹的EditText

TextInputLayout的基本使用

使用的话TextInputLayout包裹一个EditText就可以。当然TextInputLayout也只能包裹EditText:

<android.support.design.widget.TextInputLayout
   android:id="@+id/tl_etpass"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
        android:id="@+id/et_pass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入密码" />
</android.support.design.widget.TextInputLayout>

 

具体完整代码:

xml:

<?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"
    tools:context="com.wjs.myedittextdemo1.MainActivity">


    <EditText
        android:id="@+id/et_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入账号" />

    <android.support.design.widget.TextInputLayout
       android:id="@+id/tl_etpass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/et_pass"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入密码" />
    </android.support.design.widget.TextInputLayout>



    <Button
        android:id="@+id/login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="登录" />
</LinearLayout>

 

activity:

package com.wjs.myedittextdemo1;

import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private EditText etName;
    private EditText etPass;
    private Button login;
    private TextInputLayout tlEtpass;

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

    private void initview() {
        etName = findViewById(R.id.et_name);
        etPass = findViewById(R.id.et_pass);
        tlEtpass = findViewById(R.id.tl_etpass);
        login = findViewById(R.id.login);
    }

    private void initData() {

        login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                 String name = etName.getText().toString().trim();
                 String passwarld = etPass.getText().toString().trim();
                if (!name.equals("大不懂")) {
                    etName.setError("请输入正确用户名");
                    Toast.makeText(MainActivity.this,"用户名错误",Toast.LENGTH_SHORT).show();
                } else if (!passwarld.equals("123456")) {
                    tlEtpass.setErrorEnabled(true);
                    tlEtpass.setError("请输入正确密码");
                    Toast.makeText(MainActivity.this,"密码错误",Toast.LENGTH_SHORT).show();
                } else {
                    tlEtpass.setErrorEnabled(false);
                    Toast.makeText(MainActivity.this,"登录成功",Toast.LENGTH_SHORT).show();
                }
            }
        });

    }
}

 

进阶修改样式

 

TextInputLayout的基本使用

密码:

EditText中添加:android:inputType="textPassword"
TextInputLayout中添加:
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/colorPrimary"

最大长度:

TextInputLayout中添加:

app:counterEnabled="true"
app:counterMaxLength="3"
app:counterOverflowTextAppearance="@style/MyOverflowText"

style:

<style name="MyOverflowText" parent="TextAppearance.AppCompat.Small">
    <item name="android:textColor">#ffe600</item>
</style>

错误提示:

TextInputLayout中添加:

app:errorEnabled="true"
app:errorTextAppearance="@style/MyErrorText"

style:

<style name="MyErrorText" parent="TextAppearance.AppCompat.Small">
    <item name="android:textColor">#ff4444</item>
</style>

默认样式:

TextInputLayout中添加:

app:hintTextAppearance="@style/MyHintText"

EditText中添加:

android:theme="@style/MyEditText"

style:

<style name="MyHintText" parent="TextAppearance.AppCompat.Small">
    <item name="android:textColor">@color/colorPrimary</item>
</style>

<!--Input field style-->
<style name="MyEditText" parent="Theme.AppCompat.Light">
    <item name="colorControlNormal">#000022</item>
    <item name="colorControlActivated">@color/colorPrimary</item>
    <item name="android:textSize">18sp</item>
</style>

 

完整代码:

xml:

<android.support.design.widget.TextInputLayout
    android:id="@+id/tl_etstyles"
    android:layout_width="match_parent"
    app:errorEnabled="true"
    app:counterEnabled="true"

    app:counterMaxLength="3"
    app:passwordToggleEnabled="true"
    app:passwordToggleTint="@color/colorPrimary"
    app:counterOverflowTextAppearance="@style/MyOverflowText"
    app:errorTextAppearance="@style/MyErrorText"
    app:hintTextAppearance="@style/MyHintText"
    android:layout_height="wrap_content">
    <EditText
        android:theme="@style/MyEditText"
        android:id="@+id/et_styles"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:hint="样式展示" />
</android.support.design.widget.TextInputLayout>

activity:

etStyles = findViewById(R.id.et_styles);
etStyles.addTextChangedListener(mTextWatcher);
private TextWatcher mTextWatcher = new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void afterTextChanged(Editable editable) {
        Editable text = tlEtstyles.getEditText().getText();
        if (!text.toString().equals("123"))
            tlEtstyles.setError("输入123");//show
        else
            tlEtstyles.setError(null);//hide
    }
};

 

style:

<style name="MyHintText" parent="TextAppearance.AppCompat.Small">
    <item name="android:textColor">@color/colorPrimary</item>
</style>

<!--Input field style-->
<style name="MyEditText" parent="Theme.AppCompat.Light">
    <item name="colorControlNormal">#000022</item>
    <item name="colorControlActivated">@color/colorPrimary</item>
    <item name="android:textSize">18sp</item>
</style>
<style name="MyErrorText" parent="TextAppearance.AppCompat.Small">
    <item name="android:textColor">#ff4444</item>
</style>

<style name="MyOverflowText" parent="TextAppearance.AppCompat.Small">
    <item name="android:textColor">#ffe600</item>
</style>

 

感谢:https://blog.csdn.net/yechaoa/article/details/78699045

源码下载

TextInputLayout的基本使用

 

 

本文地址:https://blog.csdn.net/qq_35698774/article/details/110497852