导入依赖包
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” />
@empty
AS 不识别- 以下配置之后下面属性设置将无效
app:cornerRadius="16dp" app:rippleColor="@android:color/holo_purple" app:strokeColor="@android:color/black" app:strokeWidth="1dp"
去掉阴影
布局中加入
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
Disable 无颜色改变
解决:
第一步:新建res/color
文件夹 注意:selecctor_color.xml 必须放到该文件夹下
第二步:新建selector文件,selector_blue_material_btn.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- disable 显示-->
<item android:color="#999999" android:state_enabled="false" />
<!-- 正常状态下显示-->
<item android:color="#0D78F5" />
</selector>
第三步:使用
<com.google.android.material.button.MaterialButton
...
android:backgroundTint="@color/selector_blue_material_btn"
..
/>
上手问题
问题一
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 |