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

时间 2019-12-05

标签 materialdesign 系列文章十一 google2018 google 大会控件汇总集合栏目 Google 繁體版

原文原文链接

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

你们好，我是笔墨Android，又要开车了！android

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

本文知识点：

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

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

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

变动Android P的坑

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

这个问题出现的缘由主要是你在defaultConfig中设置了targetSdkVersion 'android-P'这个东西，只要你删除了这句话就能够了！修改后的配置就变成了这个样子滴！这里不是项目的build.gradle哦！切记切记。。。app

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所的，之后即便你添加这个也没有用了！！！ide

集成新版sdk的坑

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

坑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'删除就行了。gradle

坑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.MaterialButton
        android: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)监听状态改变的
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不熟悉的同窗能够看看以前，MaterialDesign系列文章（九）CardView的使用及适配其实关于新版的CardView只是多增长了一个描边的效果，其余的都没有什么变化！

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

剩下的和CardView的使用都是同样的，具体的代码是这样的！！！

<com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        app:cardCornerRadius="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:strokeColor="#223344"
        app:strokeWidth="2dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="展现这个标签" />
    </com.google.android.material.card.MaterialCardView>
复制代码

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:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAttached="true"
        app:navigationContentDescription="这是一个底栏"
        app:navigationIcon="@mipmap/ic_more_vert_white_24dp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bar"
        app:srcCompat="@mipmap/ic_local_dining_white_24dp" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
复制代码

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

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

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

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

差点忘了本文代码的地址