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"