Android TextInputLayout 几种样式 +邮箱自动填充

Android TextInputLayout 几种样式

1.添加依赖

implementation 'com.google.android.material:material:1.2.1'

默认样式

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Filled box(default)">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </com.google.android.material.textfield.TextInputLayout>

样式

1.使用Google提供的几种可选样式

如何使用：不描述了，直接上图

区别

样式	描述
FilledBox	默认的，无边框，有下划线
OutlinedBox	有圆角方框，
Dense	紧密（间距小）
ExposedDropdownMenu	需结合AutoCompleteTextView使用 自动填充

上图（部分）

未聚焦

聚焦

附上代码

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:orientation="vertical">
<!-- Filled Default-->
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Filled box(default)"
        android:layout_marginTop="10dp">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </com.google.android.material.textfield.TextInputLayout>
<!--Filled Dense-->
    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Filled box(Dense)"
        android:layout_marginTop="10dp">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </com.google.android.material.textfield.TextInputLayout>

<!--   OutlinedBox box(default) -->
    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="OutlinedBox box(default)"
        android:layout_marginTop="10dp">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </com.google.android.material.textfield.TextInputLayout>

    <!--   OutlinedBox box(Dense) -->
    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="OutlinedBox box(Dense)"
        android:layout_marginTop="10dp">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </com.google.android.material.textfield.TextInputLayout>

<!--   OutlinedBox box(ExposedDropdownMenu)  -->
    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:errorEnabled="true"
        android:hint="OutlinedBox box(ExposedDropdownMenu)"
        android:layout_marginTop="10dp">
<!--   自己重写的AutoCompleteTextView 代码付下-->
        <com.example.ui.EmailAutoCompleteTextView  
            android:id="@+id/autoCompleteTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </com.google.android.material.textfield.TextInputLayout>
</LinearLayout>

EmailAutoCompleteTextView.kt

import android.content.Context
import android.util.AttributeSet
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter
import android.widget.TextView
import androidx.appcompat.widget.AppCompatAutoCompleteTextView
import kotlinx.android.synthetic.main.auto_complete_item.view.*
import java.util.regex.Pattern


class EmailAutoCompleteTextView(context: Context, attrs: AttributeSet?) :
    AppCompatAutoCompleteTextView(context, attrs) {

    private val emailSufixs: Array<String> = arrayOf(
        "@qq.com", "@163.com", "@126.com", "@gmail.com", "@sina.com", "@hotmail.com",
        "@yahoo.cn", "@sohu.com", "@foxmail.com", "@139.com", "@icloud.com"
    )

    init {
        this.setAdapter(EmailAutoCompleteAdapter(context, R.layout.auto_complete_item, emailSufixs))
        this.threshold = 1
    }


    override fun replaceText(text: CharSequence?) {
        var t: String = getText().toString()
        var index: Int = t.indexOf("@")
        if (index != -1) t = t.substring(0, index)
        super.replaceText(t + text)
    }

    override fun performFiltering(text: CharSequence?, keyCode: Int) {
        //在用户输入完成后调用，将已经出入的文本和adapter中的数据对比，若匹配到adapter中数据的前半部分，则adapter中的这条数据就会在下拉框中出现
        var t = getText().toString()
        var p: Pattern = Pattern.compile("^[a-zA-Z0-9_]+$")
        if (t.indexOf("@") == -1) {
            if (p.matcher(t).matches()) {
                super.performFiltering("@", keyCode)
            } else {
                //输入违法，关闭下拉框
                this.dismissDropDown()
            }
        } else {
            super.performFiltering(t.substring(t.indexOf("@")), keyCode)
        }
    }

    private inner class EmailAutoCompleteAdapter(
        context: Context,
        resource: Int,
        email_s: Array<String>
    ) : ArrayAdapter<String>(context, resource, email_s) {
        override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
            var view = convertView
            if (view == null)
                view = LayoutInflater.from(context).inflate(R.layout.auto_complete_item, null)
            var t = this@EmailAutoCompleteTextView.getText().toString()
            val index = t.indexOf("@")
            if (index != -1) {
                t = t.substring(0, index)
            }
            val tv=view?.findViewById<TextView>(R.id.auto_complete_tv)
             //将用户输入的文本与adapter中的email后缀拼接后，在下拉框中显示
            tv?.text = t + getItem(position)!!
            return view!!

        }
    }
}

补充：

1.右图标

 app:endIconMode="password_toggle"
 app:endIconMode="clear_text"
 app:endIconMode="dropdown_menu"
 app:endIconMode="none"
  app:endIconMode="custom"
<!--   以下与custom 结合使用-->
app:endIconCheckable="true"
app:endIconDrawable="@android:drawable/ic_input_add"
app:endIconMode="custom"

2.左图标