博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
MaterialDesign系列文章(十一)Google2018年大会新出的控件汇总集合
阅读量:6587 次
发布时间:2019-06-24

本文共 5584 字,大约阅读时间需要 18 分钟。

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

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

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

本文知识点:

  • 怎么集成Android P和导入新版的MaterialDesign的新控件;
  • Material Button的使用;
  • Chip和Chip Group的使用;
  • Material Card View的使用;
  • Bottom App Bar的使用;

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

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

变更Android P的坑

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

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

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

所以这里千万不要在defaultConfig标签中添加targetSdkVersion 'android-P'了,按照google所的,以后即使你添加这个也没有用了!!!

集成新版sdk的坑

因为新版的SDK应该还没有新的内容,没有关于新控件的一些API,所以这里我是从找到的相应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.INotificationSideChannel$Stub$Proxy复制代码

因为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 圆角的半径

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

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

复制代码

因为父控件是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进行设置的。

复制代码

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

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

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

  • setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener listener)监听状态改变的
  • setOnCloseIconClickListener(OnClickListener listener) 监听取消按钮被点击的

3.1 chipGroupp的使用

感觉这个控件和FlowLayout都差不多,只是内部的chip多了一个状态的样子,忘了我之前说的分分钟吧,我收回之前说的话!!!体验一下添加的代码吧!

ChipGroup chipGroup = findViewById(R.id.cg);        for (int i = 0; i < 10; i++) {            Chip tabChip = new Chip(this);            if (i % 2 == 0) {                tabChip.setChipText("这是一个长标签" + (i + 1));            } else {                tabChip.setChipText("标签0" + (i + 1));            }            chipGroup.addView(tabChip);        }复制代码

显示的样子大概是这样的。

后来我仔细看看了看源码,发现其实还有很多属性可以设置的!这里直接看图吧!

写过自定义属性的属性的童鞋可以知道,ChipDrawable_后面的xxx是可以设置的属性,什么背景色,最小高度,圆角什么的都是可以设置的!这些属性连我这个英语不到2级的人都能看懂,相信你也能看懂的!就不一个一个写了,其实有的时候源码才是最好的老师,我只是一个搬运工而已!哈哈。。。

PS: 如果你把ChipGroup设置能一行的话,建议外面包裹一层HorizontalScrollView否则的话是不能滑动的!!!

4.Material Card View的使用

关于CardView不熟悉的同学可以看看之前,其实关于新版的CardView只是多增加了一个描边的效果,其他的都没有什么变化!

  • app:strokeColor 描边的颜色
  • app:strokeWidth 描边的宽度

剩下的和CardView的使用都是一样的,具体的代码是这样的!!!

复制代码

5. Bottom App Bar的使用

这个控件是继承ToolBar的一个控件,也就是说有很多使用方式和ToolBar是类似的!这里说一下它特有设置的属性!

  • app:backgroundTint 背景颜色
  • app:fabCradleDiameter fab嵌入到BottomAppBar的直径(后面看了图你就理解了!!!)
  • app:fabCradleRoundedCornerRadius fab嵌入到BottomAppBar的圆角(后面看了图你就理解了!!!)
  • app:fabAttached 如果这个参数为true,并且使用app:layout_anchor关联了这个bottomAppBar那么fab会直接嵌入到bottomAppBar中,像下面那样!!!
  • app:fabAlignmentMode fab嵌入到BottomAppBar的样式
    • end 效果是这样的

- center 默认是中间的

  • app:fabCradleVerticalOffset: 声明要用于附加 fab 的垂直偏移量. 默认情况下为0dp:
复制代码

左边没有找到返回按钮,其实那里是navigationIcon,请不要介意!对于处女座的深表歉意!这个也是可以设置什么主标题副标题什么的,但就是设置menu的时候和以前不太一样了,以前设置menu实在onCreateOptionsMenu(Menu menu)中设置的,但是现在直接

BottomAppBar bottomAppBar = findViewById(R.id.bar);    bottomAppBar.replaceMenu(R.menu.test_menu);复制代码

这么设置就可以了!但是我真的没有找到相应的监听,我把它直至设置到menu也是不好使,监听怎么也出不来,不知道为什么,不知道是我的打开方式不对还是就是有这个问题,怎么也回去不到相应的点击事件,其实在右边出现个menu菜单真的很难看,不知道是不是因为这个才没有监听的!请原谅我的无知... 感觉国内使用这个控件的事件还要等上一段时间吧!反正我在28的alpha1是没有找到上面说的这些控件。估计等到时候会有一些优化的吧!就是让大家尝个鲜!至于一些细节等到能用的时候我们在好好探讨!!!

好吧今天就到这里吧!有点困了。。。睡觉去了!!!

差点忘了

转载地址:http://kghno.baihongyu.com/

你可能感兴趣的文章
如何使用 GRUB 2 直接从硬盘运行 ISO 文件
查看>>
《数据整理实践指南》一第2章 是我的问题还是数据的问题
查看>>
Storm-源码分析-Topology Submit-Client
查看>>
深度解析Java8 – AbstractQueuedSynchronizer的实现分析(下)
查看>>
阿里内核月报2014年2月
查看>>
《Python机器学习——预测分析核心算法》——2.2 分类问题:用声纳发现未爆炸的水雷...
查看>>
《嵌入式Linux软硬件开发详解——基于S5PV210处理器》——1.2 S5PV210处理器
查看>>
使用阿里云容器服务Jenkins 2.0实现持续集成之the tag you want篇(updated on 2017.09.06)...
查看>>
Node进阶:核心模块http简介
查看>>
Map排序
查看>>
《C语言及程序设计》实践参考——太乐了
查看>>
Web项目中使用Spring 3.x + Quartz 2.x实现作业调度详解
查看>>
[LeetCode]--60. Permutation Sequence
查看>>
YARN REST API
查看>>
swing Ctrl+S 保存配置
查看>>
Java学习之——泛型
查看>>
jQuery UI dialog实现dialog弹框显示
查看>>
[工具类]将时间转换为unix时间戳格式
查看>>
在阿里云上遇见更好的Oracle(四)
查看>>
重构-使代码更简洁优美:实际经验之谈(提供一技巧,让你省掉N多代码)
查看>>