关于Material组件

一个丰富的UI控件
使用方式:
1.导入依赖:

implementation 'com.google.android.material:material:1.2.0'

MaterialButton
日常开发中,我们写布局,写圆角,通常会在drawable下自己新建一个xml.然后在布局中@drawwable/xxx这样去引用自定义的xml,但这样就会遇到一个问题,UI为了美观给出了很多不同的边角,不同dp的描边,这样导致我们要自定义诸多的xml,如果项目处于一期还比较好维护,但如果后期项目越做越大,不停更新迭代,项目就不好维护了,由此看来我们需要一个强大的组件来支撑.让开发者直接在xml中设置圆角啊边框啊描边呀这些很美(zhuang)观(bi)的高大上的形状.
Google官方在SDK28的时候推出了一个强大的新控件-----MaterialButton.
我们首先看下效果图.

image.png

image.png

支持圆角,双重变色,圆形,描边,按压水波纹等多种不同的设置,真是一个强大的组件奥.
MaterialButton继承AppCompatButton,支持圆角、描边、前置和后置icon(icon支持设置Size、Tint、Padding、Gravity等),还支持按压水波纹并且设置color.
他的公共属性如下:

image.png

关于background
在1.2版本以前,MaterialButton只能通过app:backgroundTint属性设置背景色,该属性接收color state list。不能通过android:background设置自定义drawable。

1.2版本后,官方已修复此问题。如果未设置自定义背景,则 MaterialShapeDrawable 仍将用作默认背景。

也就是说,如果按钮背景是纯色,可以通过app:backgroundTint指定;如果按钮背景是渐变色,则需要自己定义drawable,然后通过android:background设置。

注意:如果要使用android:background设置背景,则需要将backgroundTint设置为@empty,否则background不会生效。

<com.google.android.material.button.MaterialButton
    android:background=”@drawable/custom_background”
    app:backgroundTint=”@empty” /> 

指定@empty后,Android Studio会出现红色警告,可以正常运行,忽略就好。不过既然已经自定义drawable,就没必要使用MaterialButton,直接用普通的Button甚至用TextView就好了。

关于insetTop、insetBottom

看下面的代码:

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn1"
    android:layout_width="150dp"
    android:layout_height="50dp"
    android:textColor="@android:color/white"
    android:textSize="18sp"
/> 

xml预览图:

image

看源码发现,MaterialButton默认在style指定了insetTop和insetBottom为6dp,使得height看起来并没有Button实际设置值一样高,可以在xml将MaterialButton的insetTop和insetBottom都设置为0dp,这样MaterialButton的高度就和实际设置的高度一致了。

关于阴影

MD组件默认都是自带阴影的,MaterialButton也不例外。但是有时候我们并不想要按钮有阴影,那么这时候可以指定style为
style="@style/Widget.MaterialComponents.Button.UnelevatedButton",这样就能去掉阴影,让视图看起来扁平化。

关于theme

在MDC1.1.0以后,使用MaterialButton可能会出现闪退的问题,原因就是使用了MD控件,但是未将them设置为MaterialComponents。解决方法可以有几种:

先在style.xml自定义MaterialComponents_Theme

<style name="MaterialComponents_Theme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        ...
 </style> 

方法一: AndroidManifest里application节点下配置,作用域为整个应用

<application
        ...
        android:theme="@style/MaterialComponents_Theme" 

方法二: 只在当前activity配置,作用域为当前activity

<activity
        ...
        android:theme="@style/MaterialComponents_Theme" 

方法三: 为每个在使用到MD控件的地方配置,作用域只针对当前控件

<com.google.android.material.button.MaterialButton
    ...
    android:theme="@style/Theme.MaterialComponents.Light.NoActionBar" /> 

关于在Android Studio中预览

如下代码

<com.google.android.material.button.MaterialButton
        android:id="@+id/btn_send"
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        android:layout_width="@dimen/dp_80"
        android:layout_height="@dimen/dp_30"
        android:layout_marginStart="@dimen/dp_12"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:padding="0dp"
        android:text="@string/dispatch_room_text_upper_mic"
        android:textColor="@color/white"
        android:textSize="@dimen/font_12"
        app:backgroundTint="@color/c_6D56FF"
        app:cornerRadius="@dimen/dp_15"
        app:layout_constraintBottom_toBottomOf="@id/iv_head"
        app:layout_constraintStart_toEndOf="@id/iv_head" /> 

xml预览

image

可以看到xml预览效果和代码是不匹配的,这时候可以将预览的主题指定为MaterialComponents

image

这样效果就和xml代码一致了

image

/ ShapeableImageView /

来波效果图:

image

以往我们实现图片圆角、描边等需求,多数时候是使用第三方或者自定义,Glide也有个扩展库,能很轻松帮我们实现。不过在MDC1.2.0中,已经有了一套官方的实现方案。那就是ShapeableImageView。

ShapeableImageView继承自ImageView,可以为image添加描边大小、颜色,以及圆角、裁切等,这得益于它新增了一个属性shapeAppearance,具体实现在ShapeAppearanceModel,可以通过style来配置,也可以通过代码实现。

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"
    ...
    /> 

代码设置:

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() 

代码接收一个ShapeAppearanceModel,通过构建者模式实现,setTopLeft表示处理左上角,其他同理。

cornerSize表示设置的大小,有RelativeCornerSize和AbsoluteCornerSize,RelativeCornerSize构造方法接收一个百分比,范围0-1;AbsoluteCornerSize构造方法接收一个具体数值,这个数值就是圆角的数值。

这里还有个CornerFamily,它表示处理的方式,有ROUNDED和CUT两种,ROUNDED是圆角,CUT是直接将圆角部分裁切掉。setAllCornerSizes(ShapeAppearanceModel.PILL)可以直接实现圆形效果。

关于Stroke

ShapeableImageView指定strokeWidth描边的时候,其描边会被覆盖掉一半,如strokeWidth=4dp,上下左右会被覆盖,实际的效果是只有2dp被显示。如图,

image

github有人反馈了类似问题(https://github.com/material-components/material-components-android/issues/1489),我的处理方法是在设置了strokeWidth的同时,设置相应的pading,这样描边就不会被覆盖了。


<com.google.android.material.imageview.ShapeableImageView
        ...
        app:strokeWidth="4dp"
        android:padding="4dp" 

/ Slider(加强版的SeekBar) /

image
image
image

Slider的父类BaseSlider,直接继承View,重新实现逻辑。此外BaseSlider还有个子类RangeSlider,用它来实现图1效果2

Slider可以实现滑块头部数字变化效果,还可以实现类似刻度尺效果,比原生的SeekBar加强了不少。

常用属性如下:

image

其他属性还有haloColor、haloRadius、thumbColor等,用来配置一些外观

/ BottomNavigationView /

image

BottomNavigationView相比之前要完善了很多,可以设置icon大小,添加红点和未读消息数,以及超过3个item,切换效果也不会出现问题,通过LabelVisibilityMode.LABEL_VISIBILITY_LABELED指定。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容