导入依赖包
implementation 'com.google.android.material:material:1.2.0'MaterialButton
基础知识
最小案例
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:strokeColor="@android:color/black"
app:strokeWidth="1dp"
app:cornerRadius="16dp"
app:icon="@drawable/ic_like"
app:iconSize="20dp"
app:iconTint="@android:color/holo_red_light"
app:backgroundTint="@color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rippleColor="@android:color/holo_purple"
/>常用属性
| 属性 | 描述 |
|---|---|
| app:backgroundTint | 背景着色 |
| app:backgroundTintMode | 着色模式 |
| app:strokeColor | 描边颜色 |
| app:strokeWidth | 描边宽度 |
| app:cornerRadius | 圆角大小 |
| app:rippleColor | 按压水波纹颜色 |
| app:icon | 图标icon |
| app:iconSize | 图标大小 |
| app:iconGravity | 图标重心 |
| app:iconTint | 图标着色 |
| app:iconTintMode | 图标着色模式 |
| app:iconPadding | 图标和文本之间的间距 |
上手发现
backgroundTint 默认颜色
<!-- 主题设置的颜色 -->
<item name="colorPrimary">@color/colorPrimary</item>渐变色
<com.google.android.material.button.MaterialButton
android:background=”@drawable/custom_background”
app:backgroundTint=”@empty” />@emptyAS 不识别- 以下配置之后下面属性设置将无效
app:cornerRadius="16dp" app:rippleColor="@android:color/holo_purple" app:strokeColor="@android:color/black" app:strokeWidth="1dp"
去掉阴影
布局中加入
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"上手问题
问题一
Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents解决一：
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.Bridge">
<!-- ... -->
</style>可以选择主题
Theme.MaterialComponents.Bridge
Theme.MaterialComponents.Light.Bridge
Theme.MaterialComponents.NoActionBar.Bridge
Theme.MaterialComponents.Light.NoActionBar.Bridge
Theme.MaterialComponents.Light.DarkActionBar.Bridge解决二AppCompat增加属性：
<style name="Theme.MyApp" parent="Theme.AppCompat">
<!-- Original AppCompat attributes. -->
<item name="colorPrimary">@color/my_app_primary_color</item>
<item name="colorSecondary">@color/my_app_secondary_color</item>
<item name="android:colorBackground">@color/my_app_background_color</item>
<item name="colorError">@color/my_app_error_color</item>
<!-- New MaterialComponents attributes. -->
<item name="colorPrimaryVariant">@color/my_app_primary_variant_color</item>
<item name="colorSecondaryVariant">@color/my_app_secondary_variant_color</item>
<item name="colorSurface">@color/my_app_surface_color</item>
<item name="colorOnPrimary">@color/my_app_color_on_primary</item>
<item name="colorOnSecondary">@color/my_app_color_on_secondary</item>
<item name="colorOnBackground">@color/my_app_color_on_background</item>
<item name="colorOnError">@color/my_app_color_on_error</item>
<item name="colorOnSurface">@color/my_app_color_on_surface</item>
<item name="scrimBackground">@color/mtrl_scrim_color</item>
<item name="textAppearanceHeadline1">@style/TextAppearance.MaterialComponents.Headline1</item>
<item name="textAppearanceHeadline2">@style/TextAppearance.MaterialComponents.Headline2</item>
<item name="textAppearanceHeadline3">@style/TextAppearance.MaterialComponents.Headline3</item>
<item name="textAppearanceHeadline4">@style/TextAppearance.MaterialComponents.Headline4</item>
<item name="textAppearanceHeadline5">@style/TextAppearance.MaterialComponents.Headline5</item>
<item name="textAppearanceHeadline6">@style/TextAppearance.MaterialComponents.Headline6</item>
<item name="textAppearanceSubtitle1">@style/TextAppearance.MaterialComponents.Subtitle1</item>
<item name="textAppearanceSubtitle2">@style/TextAppearance.MaterialComponents.Subtitle2</item>
<item name="textAppearanceBody1">@style/TextAppearance.MaterialComponents.Body1</item>
<item name="textAppearanceBody2">@style/TextAppearance.MaterialComponents.Body2</item>
<item name="textAppearanceCaption">@style/TextAppearance.MaterialComponents.Caption</item>
<item name="textAppearanceButton">@style/TextAppearance.MaterialComponents.Button</item>
<item name="textAppearanceOverline">@style/TextAppearance.MaterialComponents.Overline</item>
</style>
ShapeableImageView
style 设置
<style name="StyleShapeAppearanceImage" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">16dp</item>
<item name="cornerSizeTopRight">10dp</item>
<item name="cornerSizeBottomRight">0dp</item>
</style>
<com.google.android.material.imageview.ShapeableImageView
app:shapeAppearance="@style/StyleShapeAppearanceImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>代码设置
imageView?.shapeAppearanceModel = ShapeAppearanceModel.builder()
.setAllCorners(CornerFamily.ROUNDED,20f)
.setTopLeftCorner(CornerFamily.CUT,RelativeCornerSize(0.3f))
.setTopRightCorner(CornerFamily.CUT,RelativeCornerSize(0.3f))
.setBottomRightCorner(CornerFamily.CUT,RelativeCornerSize(0.3f))
.setBottomLeftCorner(CornerFamily.CUT,RelativeCornerSize(0.3f))
.setAllCornerSizes(ShapeAppearanceModel.PILL)
.setTopLeftCornerSize(20f)
.setTopRightCornerSize(RelativeCornerSize(0.5f))
.setBottomLeftCornerSize(10f)
.setBottomRightCornerSize(AbsoluteCornerSize(30f))
.build()- cornerSize 表示设置的大小，有RelativeCornerSize和AbsoluteCornerSize，RelativeCornerSize构造方法接收一个百分比，范围0-1；AbsoluteCornerSize构造方法接收一个具体数值，这个数值就是圆角的数值。
- CornerFamily 有ROUNDED和CUT两种，ROUNDED是圆角，CUT是直接将圆角部分裁切掉。setAllCornerSizes(ShapeAppearanceModel.PILL)可以直接实现圆形效果。
Slider(加强版的SeekBar)
| 属性 | 描述 |
|---|---|
| android:valueFrom | 进度起点 |
| android:valueTo | 进度终点 |
| android:value | 当前进度点 |
| android:stepSize | 步长（必须大于0） |
| app:values | 配置多个slider节点 |
| app:labelBehavior | slider 滑动时顶部是否显示变化效果 |
| app:labelStyle | 配置slider节点顶部view style |
BottomNavigationView
