Google2018 i/o 大会发布的新版MD2控件

Google i/o 大会是每年程序员都很期待的会议,作为一个Android撸码员每次都期待Google发布一些开发神器、新控件。
今年Google带来了新的Material Design的设计和定义风格,这里我们用网上流传的Material Design 2,后面用MD2来简写。

Material Design 2 更新戳这里

1. 导入material-components-android

不得不说,material-components-android的GitHub导入写的真的过分,啥都没有,不过也可能是我功力尚浅没找到,知道的大佬勿喷,导入一瞬间,报错一整天!最后我还是老老实实用Android Studio 3.2 Canary版本来写了。 强烈推荐使用3.2,更新了很多新功能。

话不多说,直接就是干

第一步打开项目的build.gradle文件添加jcenter和google

allprojects {
repositories {
  jcenter()
  maven {
    url "https://maven.google.com"
    }
  }
}

第二步将库添加到app依赖

dependencies {
// ...
compile 'com.google.android.material:material:1.0.0-alpha1'
  // ...
}

写到这,我继续往下翻github的doc文档,恩~ 下面都是介绍怎么使用material-components了,真的开心,马上就可以使用google最新的控件了,想想就贼G2激动!
一运行,mmp事情果然没有那么简单,眉头还是皱晚了,没有事先察觉。

Android resource linking failed
Output:  C:\Android Project\MyApplication\app\build\intermediates\incremental\mergeDebugResources\merged.dir\values-v28\values-v28.xml:7: error: resource android:attr/dialogCornerRadius not found

google出来很多都是使用最新的implementation 'com.android.support:appcompat-v7:28.0.0-alpha1支持库,结果然并软,后来在issues中发现了一位大佬的答案。更新compileSdkVersion Android P预览版即可,因为在使用28.0.0-alpha1的所有支持库时,缺少属性时会出现这个问题。

[图片上传失败...(image-425db0-1542780039077)]

接下来我又可以开开心心的run了,emmmmmmmmmmmmm.....又gg

Program type already present: android.support.v4.os.ResultReceiver$MyResultReceiver
    at com.android.builder.dexing.D8DexArchiveMerger.getExceptionToRethrow(D8DexArchiveMerger.java:126)
    at com.android.builder.dexing.D8DexArchiveMerger.mergeDexArchives(D8DexArchiveMerger.java:111)
    at com.android.build.gradle.internal.transforms.DexMergerTransformCallable.call(DexMergerTransformCallable.java:101)
    at com.android.build.gradle.internal.transforms.ExternalLibsMergerTransform.transform(ExternalLibsMergerTransform.kt:123)
    at com.android.build.gradle.internal.pipeline.TransformTask$2.call(TransformTask.java:221)
    at com.android.build.gradle.internal.pipeline.TransformTask$2.call(TransformTask.java:217)
    at com.android.builder.profile.ThreadRecorder.record(ThreadRecorder.java:102)

这个错经过无数遍的google、百度都没找到是什么问题导致的,最后还是万能的issues,提到使用最新Android studio 3.2预览版,Refactor--Refactor to AndroiX>转换成Android X项目,目前我也不懂这个AndroidX是个啥TnT,知道的大佬可以告诉俺=。=,之后就可以360°无死角的运行项目了,开始体验MD2喽~

完整build.gradle文件

apply plugin: 'com.android.application'

android {
    compileSdkVersion 'android-P'
    defaultConfig {
        applicationId "com.example.horen.myapplication"
        minSdkVersion 21
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.0.0-alpha1'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.1.0-alpha1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.0-alpha1'

    implementation 'com.google.android.material:material:1.0.0-alpha1'
}

2. MaterialComponents控件

  • Bottom App Bars
  • Bottom Navigation
  • Bottom Sheets
  • Chips
  • Collapsing Toolbars
  • Floating Action Buttons
  • Meiter Botton
  • Meiter Card
  • Meiter Bottom Sheets
  • Navigation Views
  • Snackbars
  • Tab Layout
  • Text Fields
  • Top App Bars

2.1 BottomAppBar

这次google大会上也展示了这个控件,配合FloatingActionButton能实现很炫酷的组合形状。

在使用BottomAppBar之前如果app的style Theme没有使用以下属性的话,那么可以将BottomAppBar Material样式直接应用到XML中的窗口小部件。

  • Theme.MaterialComponents
  • Theme.MaterialComponents.NoActionBar
  • Theme.MaterialComponents.Light
  • Theme.MaterialComponents.Light.NoActionBar
  • Theme.MaterialComponents.Light.DarkActionBar

Material Styles

style="@style/Widget.MaterialComponents.BottomAppBar"

控件的基本属性

属性名 布局属性 说明
Background Tint app:backgroundTint 设置背景颜色,调用background是不生效的
FAB Alignment Mode app:fabAlignmentMode 起始对齐模式,center、end
FAB Cradle Margin app:fabCradleMargin 改变这个值会增加或减少FAB和BottomAppBar之间的视距。
FAB Attached app:fabAttached 控制FAB和BottomAppBar的分离
FAB Cradle Corner Radius app:fabCradleRoundedCornerRadius 指定切口周围角的圆度。
FAB Vertical Offset app:fabCradleVerticalOffset 指定FAB和BottomAppBar之间的垂直偏移量。
  • fabCradleVerticalOffset是指定FAB和BottomAppBar之间的垂直偏移量。如果fabCradleVerticalOffset为0,则FAB的中心将与BottomAppBar的顶部对齐。

  • 通过调用setFabAlignmentMode(int),可以将FAB对齐到中心(FAB_ALIGNMENT_MODE_CENTER)或对齐右边(FAB_ALIGNMENT_MODE_END)。默认是有动画的。这可以与片段过渡相对协调。

2.1 Bottom Navigation

BottomNavigationView creates bottom navigation bars, making it easy to explore and switch between top-level content views with a single tap.
This pattern can be used when you have between 3 and 5 top-level destinations to navigate to.

BottomNavigationView创建底部导航栏,使用户只需轻点一下即可轻松浏览和切换顶级内容视图。 当您有3到5个顶层目的地导航到时,可以使用此模式。

开始使用

  1. 创建一个Menu布局,最多5个导航目标(BottomNavigationView不支持超过5个)。
  2. 在xml中放置BottomNavigationView。
  3. 将BottomNavigationView上的app:menu属性设置为您的菜单资源布局。
  4. 使用setOnNavigationItemSelectedListener(...)监听选择点击事件。
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BottomNavigationActivity">

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="@string/title_home"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        style="@style/Widget.MaterialComponents.BottomNavigationView"
        app:itemIconTint="@drawable/bottom_navigation_colors"
        app:itemTextColor="@drawable/bottom_navigation_colors"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

app:itemIconTint(图标选择颜色) 和app:itemTextColor(文字选择颜色) 采用ColorStateList而不是简单的设置颜色。这样我们可以定义一个selector 来设置选中和未选中的颜色。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="true"
        android:color="@color/colorPrimary" />
    <item
        android:state_checked="false"
        android:color="@android:color/darker_gray" />
</selector>

app:itemIconSize可以设置导航图标的大小。

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

推荐阅读更多精彩内容