Material Design 系列

1. Material Design UI方案使用讲解
2. Material TextInputLayout使用详解
3. Material ShapeableImageView 使用详解

博客创建时间：2022.05.23
博客更新时间：2022.06.06

以Android studio build=7.0.0，SDKVersion 31来分析讲解。如图文和网上其他资料不一致，可能是别的资料版本较低而已。

---

前言

TextInputLayout 主要是作为 EditText 的容器，从而为 EditText 生成一个浮动的 Label，当用户点击 EditText 的时候，EditText 中的 hint 字符串会自动移到 EditText 的左上角。

---

hint自动上浮

如图当点击EditText控件时，hint内容会自动往上漂浮，代码如下。

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/userInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="UserName">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp" />

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

---

错误自动提示

    app:errorEnabled="true"
    app:counterEnabled="true"
    app:counterMaxLength="8"
    app:hintTextAppearance="@style/hintAppearence"
                
		// 开启错误提示
		errorEnabled;
		// 开启计数
		counterEnabled;
		// 设置输入最大长度
		counterMaxLength;
		//浮动标签样式 
		hintTextAppearance

---

密码可见性切换

一行代码搞定密码的可见性切换，再也不用ImageView 方案来实现了。

app:passwordToggleEnabled="true"

如果想替换密码可见性的图标，可以如下配置

app:passwordToggleDrawable="@drawable/account_pwd_visible_btn_bg"

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_icon_outline_eye" android:state_checked="true" />
    <item android:drawable="@drawable/ic_icon_outline_eye_close" android:state_checked="false" />
</selector>

---

常用API

常用方法

方法	介绍
setCounterEnabled	在此布局中是否启用了字符计数器功能。
setCounterMaxLength	设置要在字符计数器上显示的最大长度。
setBoxBackgroundColorResource	设置用于填充框的背景色的资源。
setBoxStrokeColor	设置轮廓框的笔触颜色。
setCounterOverflowTextAppearance	使用指定的 TextAppearance 资源设置溢出字符计数器的文本颜色和大小。
setCounterOverflowTextColor	使用 ColorStateList 设置溢出字符计数器的文本颜色。(此文本颜色优先于 counterOverflowTextAppearance 中设置的文本颜色)
setCounterTextAppearance	使用指定的 TextAppearance 资源设置字符计数器的文本颜色和大小。
setCounterTextColor	使用 ColorStateList 设置字符计数器的文本颜色。(此文本颜色优先于 counterTextAppearance 中设置的文本颜色)
setErrorEnabled	在此布局中是否启用了错误功能。
setErrorTextAppearance	设置来自指定 TextAppearance
setErrorTextColor	设置错误消息在所有状态下使用的文本颜色。
setHelperText	设置将在下方显示的帮助消息 EditText。
setHelperTextColor	设置辅助状态在所有状态下使用的文本颜色。
setHelperTextEnabled	在此布局中是否启用了辅助文本功能。
setHelperTextTextAppearance	设置指定 TextAppearance 资源中的辅助文本的文本颜色和大小。
setHint	设置要在浮动标签中显示的提示（如果启用）。
setHintAnimationEnabled	是否获取焦点的时候，hint 文本上移到左上角开启动画。
setHintEnabled	设置是否在此布局中启用浮动标签功能。
setHintTextAppearance	从指定的 TextAppearance 资源设置折叠的提示文本的颜色，大小，样式。
setHintTextColor	从指定的 ColorStateList 资源设置折叠的提示文本颜色。
setPasswordVisibilityToggleEnabled	启用或禁用密码可见性切换功能。

XML属性

属性	介绍
app:hintTextAppearance=“@style/HintAppearance”	浮动标签字体样式
app:errorTextAppearance=“@style/ErrorAppearance”	错误提示字体样式
app:counterTextAppearance=“@style/CounterAppearance”	没有超过最大字数时统计字体样式
app:counterOverflowTextAppearance=“@style/CounterOverflowAppearance”	超过最大字数时统计字体样式
app:passwordToggleDrawable	密码可见切换图标
app:passwordToggleEnabled	控制是否显示密码可见切换图标
app:counterOverflowTextAppearance	设置超出字符数后提示文字的颜色，如果不设置默认为@color/colorAccent的颜色
boxBackgroundMode	框背景的模式，可以是filled,outline或none。
boxBackgroundColor	文本字段背景的颜色。默认启用的颜色colorOnSurface用于填充的框文本字段和透明的框文本字段。
boxStrokeColor	文本字段背景周围的笔触颜色。轮廓框文本字段的默认颜色是（在默认状态下）colorOnSurface，填充的框文本字段将被忽略。
hintTextColor/ errorTextColor/ counterTextColor	各种不同的文本颜色。
shapeAppearance	文本字段背景的形状外观。默认值为shapeAppearanceSmallComponent

---

总结

Material Design 提供了大量的UI控件且丰富了UI风格，这里有我总结的一系列Material控件的使用总结，欢迎阅读。

一些常见的不同蒙层方案总结于此，希望对爱学习的你有帮助！
有兴趣可以查看源码源码Demo>>

---

相关链接：

1. Material Design UI方案使用讲解
2. Material TextInputLayout使用详解
3. Material ShapeableImageView 使用详解

---

扩展链接：

1. Android CameraX 使用入门
2. Android 今日头条屏幕适配详细使用攻略
3. Android 史上最新最全的ADB及命令百科，没有之一

博客书写不易，您的点赞收藏是我前进的动力，千万别忘记点赞、 收藏 ^ _ ^ !