写点什么

MaterialDesign 系列文章(十一)Google2018 年大会新出的控件汇总集合

用户头像
Android架构
关注
发布于: 2021 年 11 月 02 日

今天骑士又输了,老詹 42 分都没能挽救骑士!真的不想说什么了。。。老詹太累了,一个人带领整个球队!!!纪念一下老詹和我的篮球!!!



大家好,我是笔墨 Android,又要开车了!



关于这篇文章我酝酿了很久,第一是没有办法集成 Android P,另一个就是没有相应的类库,最近在掘金闲逛的时候,突然发现 GitHub 上面有人使用新控件了,我就十分欣喜!为什么呢?因为这个就说明我就能用了,其实我只是对其中的流式标签比较感兴趣,总看有人说怎么用,但是真的没有在代码中用过,只是停留在看的层面,这个我怎么能忍呢?所以今天分享一下我使用的心得,哈哈!

本文知识点:

  • 怎么集成 Android P 和导入新版的 MaterialDesign 的新控件;

  • Material Button 的使用;

  • Chip 和 Chip Group 的使用;

  • Material Card View 的使用;

  • Bottom App Bar 的使用;

1. 怎么集成 Android P 和导入新版的 MaterialDesign 的新控件;

这个部分是我踩坑最多的地方!当时我参考的是google中文网址中集成Android P的简介,这里说明了集成 Android P 的一些内容,如果你按照官网的方法去做的话。然而恶梦从这里刚刚开始。。。。


变更 Android P 的坑

当你按照官网配置完成的时候,你会出现这样的问题!


这个问题出现的原因主要是你在 defaultConfig 中设置了targetSdkVersion 'android-P'这个东西,只要你删除了这句话就可以了!修改后的配置就变成了这个样子滴!这里不是项目的 build.gradle 哦!切记切记。。。


android {compileSdkVersion 'android-P'defaultConfig {applicationId "com.jinlong.materialdesign"minSdkVersion 15versionCode 1versionName "1.0"testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"}buildTypes {release {minifyEnabled falseproguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'}}}


所以这里千万不要在 defaultConfig 标签中添加`targetSdkVersion '


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


android-P'`了,按照 google 所的,以后即使你添加这个也没有用了!!!

集成新版 sdk 的坑

因为新版的 SDK 应该还没有新的内容,没有关于新控件的一些 API,所以这里我是从gitHub找到的相应 API,应该都是一样的!然后就开始集成,里面有一个关于怎么配置的网页 里面说了怎么配置这个内容;你就按照里面的配置进行配置就可以了。当你 Sync Now 你会发现没有问题。。。然后你就一心欢喜的准备去运行了,然而第一个坑出现了!

坑 1:

如果你出现


Error:Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'.


java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex


//或者下面这个错误那么恭喜你,你中招了!哈哈


Error:Program type already present: android.support.v4.app.INotificationSideChannelProxy


因为implementation 'com.google.android.material:material:1.0.0-alpha1'里面包含了所有 MD 中出现的内容,所以有的会造成内容重复等一写错误,只要你把默认创建项目时生成的implementation 'com.android.support:appcompat-v7:27.1.1'删除就好了。

坑 2:

按照上面的集成之后,你直接运行的话,会发现满屏幕的红色,然后大喝一声 FACK!!!WHAT!!!其实是你倒包不对了,只要重新倒一遍包就好了。


至此,你就能可以使用 google 新出的控件了,但是劝你先不要在项目里面弄或者直接在项目里使用,因为毕竟还在测试中,否则被打死了!我可概不负责!!!

2.Material Button 的使用

这个控件其实和 Button 显示上没有太大的区别,但是使用的时候很多属性都不一样了,感觉 google 比较人性化,平时我们写什么描边的时候,都要自定义 shape,但是有哦了 MaterialButton 的话,什么都省了。真的比较人性化!这里还是惯例,先说一下相应的属性问题!


可以使用的属性


  • app:icon 给 Button 设置相应的图标,这个也是改控件特有的

  • app:iconTint 给添加的 icon 着色(就是设置颜色)

  • app:iconTintMode 设置相应的着色模式 相应的属性有 add、multiply、screen、src_atop、src_in、src_over 只怪我语文不好,自己设置一下,看一眼就知道了!嘻嘻

  • app:iconPadding 图标和文字的边距

  • app:additionalPaddingLeftForIcon 图标距离左边的距离

  • app:additionalPaddingRightForIcon 图标加文字距离右边的距离

  • app:rippleColor 定义水波纹效果的颜色

  • app:backgroundTint 设置背景颜色,如果你想给控件设置背景色,使用这个属性而不是 background

  • app:backgroundTintMode 背景的着色模式

  • app:strokeColor 描边的颜色

  • app:strokeWidth 描边的宽度

  • app:cornerRadius 圆角的半径


这里演示一个效果,感兴趣的童鞋,可以自己尝试一下。



这个样式很简单,我没有设置太多属性!只是让大家看一下效果!代码如下:


<com.google.android.material.button.MaterialButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:text="MaterialButton"app:additionalPaddingLeftForIcon="10dp"app:additionalPaddingRightForIcon="10dp"app:icon="@mipmap/ic_cake_white_24dp"app:iconPadding="10dp"app:iconTint="#098765"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintTop_toBottomOf="@id/toolBal" />


因为父控件是 ConstraintLayout 所以添加了一些属性,童鞋可以省略!!!这个控件的其他属性和之前没有什么太大的区别,这里就不进行讲解了!

3.Chip 和 Chip Group 的使用

这个控件是我比较喜欢的控件,以前使用流式标签都是使用的FlowLayout感兴趣的同学,可以私信我,或者百度一下!很多的。但是现在不需要了,有了 chip 和 chipGroup 分分钟实现上面的效果!


chip 的属性


  • app:chipText 设置 chip 显示的文字

  • app:checkable chip 是否可以被选择,如果禁用的话和 Button 是一样的

  • app:chipIcon 设置相应的图标

  • app:closeIcon 让 chip 显示一个关闭按钮

  • app:checkedIcon 设置选中的图片

  • app:closeIconEnabled 关闭按钮是否可以点击

  • app:chipIconEnabled 添加的图片是否能点击

  • app:textAppearance 设置文字的样式

  • app:chipBackgroundColor 设置 chip 的背景颜色 Chip Group 的属性

  • app:chipSpacing 水平和竖直方向同时设置间距

  • app:chipSpacingHorizontal 水平方向上设置间距

  • app:chipSpacingVertical 竖直方向上设置间距

  • app:singleLine 设置单行显示,可以左右滑动哦!

3.1 chip 的使用

下面开始说明关于 chip 的一些设置,看了看文档,后面可以有一个关闭的叉号,但是是通过设置 style 进行设置的。


<style name="Widget.MaterialComponents.Chip.Filter" parent="Base.Widget.MaterialComponents.Chip"><item name="android:checkable">true</item>


<item name="chipIconEnabled">false</item><item name="closeIconEnabled">false</item>


<item name="checkedIcon">@drawable/ic_mtrl_chip_checked_black</item></style>


看见了就可以设置一些相应的属性了,上面的属性都写着呢?随便你怎么设置。。。哈哈



这里展示一下我设置的几个 chip 的样子



很丑有没有。其实你可以按照 checkBox 来理解这个控件,没有什么新颖的啊!不开森。。。对了这个是有监听的!


  • setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener listener)监听状态改变的

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
MaterialDesign系列文章(十一)Google2018年大会新出的控件汇总集合