记录material design组件的学习笔记

快速查找：WIN+F
style:主题样式：Widget.MaterialComponents.xxx

---

使用前

• 配置build.gradle
  api 'com.google.android.material:material:1.1.0-alpha06'

---

目录

• Tablayout ：结合viewpager使用（常用，网上教程多，不做介绍）
• TextInputLayout+TextInputEditText:二者结合起来用，可代替EditText
• MaterialButton 可代替button

---

使用方法

---

TextInputLayout+TextInputEditText：

<com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:hint="@string/shr_hint_username">
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="text"
                android:maxLines="1" />
        </com.google.android.material.textfield.TextInputLayout>

TextInputLayout (xml属性)	值	作用
app:boxBackgroundColor:	color	更改填充文本字段的背景颜色
boxCornerRadiusTopStart	dp	角半径
boxCornerRadiusTopEnd
boxCornerRadiusBottomStart
boxCornerRadiusBottomEnd
app:endIconMode	枚举	结束图标模式

TextInputLayout (java方法)	值	作用
setError("")	String	输出错误信息

• 选中状态颜色：由Theme的colorPrimary决定
• 文字颜色：由Theme的android:textColorPrimary决定
• 样式style：

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"，紧凑型，上 style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"标准型，下
style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox",标准型上 style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"，紧凑型下
剩余的自己看文档

---

MeterialButton

 <com.google.android.material.button.MaterialButton
                android:id="@+id/next_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:text="@string/shr_button_next" />

默认按钮
style="@style/Widget.MaterialComponents.Button.OutlinedButton" 左边 style="@style/Widget.MaterialComponents.Button.TextButton"右边

MeterialButton	值	作用
app:rippleColor	color	水波纹颜色
app:cornerRadius	dp	按钮圆角半径
app:icon	source	按钮图标
app:iconPadding	dp	图标与文字的间距
app:iconGravity	枚举	设置图标的位置

• 不设置水波纹颜色默认使用colorPrimary颜色，透明度50%
• 图标颜色，大小可设置，自己去看文档
  剩余自己看文档：看xml属性（小技巧：在页面上搜索Related XML Attributes，能看到所有xml属性）

---