前言

我剛來(lái)這個(gè)公司的時(shí)候，每個(gè)周三都會(huì)有分享會(huì)，主題自定，分享對(duì)象盡量是面向大眾，一開(kāi)始覺(jué)得不錯(cuò)，但是到后面發(fā)現(xiàn)分享的內(nèi)容不是那么有營(yíng)養(yǎng)，而且積極性不是很高，都是當(dāng)做任務(wù)進(jìn)行分享。 程序員因?yàn)檩^為靦腆，分享的人較少，大部分都是客戶部、分析部或者推廣部的分享，久而久之，氛圍就比較消極。

為了提高咱們程序員發(fā)言的積極性，增添技術(shù)部的溝通氛圍，決定之前的分享形式不變，但是改為月末一次，技術(shù)部的分享每周一次。主題可以是當(dāng)前部門(mén)的相關(guān)技術(shù)，當(dāng)然最好是能夠讓大眾聽(tīng)懂。分享時(shí)能夠積極討論，最終目的提高自身的軟實(shí)力，咱們程序員不能只知道敲代碼，是吧？

那么，輪到我分享了，其實(shí)一個(gè)月之前就已經(jīng)通知我讓我準(zhǔn)備分享，因?yàn)楣居袀€(gè)交易項(xiàng)目要上線，比較繁忙，就沒(méi)太抽出時(shí)間準(zhǔn)備，直到上個(gè)星期五才抽出周末的時(shí)間準(zhǔn)備。

準(zhǔn)備

說(shuō)完那么多廢話，開(kāi)始進(jìn)入正題。最終決定分享主題為『Material Design In Android』。因?yàn)橹爱呍O(shè)項(xiàng)目 趣聞 中有用到「Support Design」庫(kù)中的控件，所以寫(xiě)起來(lái)會(huì)順手一點(diǎn)。我分三部分準(zhǔn)備：

APP 準(zhǔn)備 文檔準(zhǔn)備 Keynote 準(zhǔn)備 一、APP準(zhǔn)備

項(xiàng)目已經(jīng)上傳到 GitHub 上: AndroidMD

運(yùn)行效果

MD.gif

花了兩個(gè)多小時(shí)做了這個(gè) APP ，功能簡(jiǎn)單，主題明確。

先說(shuō)說(shuō)完成這個(gè) APP 的事前準(zhǔn)備:

1. 主題

主題是最近非常火的 「終結(jié)者2:審判日」

2. 數(shù)據(jù)

數(shù)據(jù)是自己在本地寫(xiě)的 json 數(shù)據(jù)，很是尷尬，然后部署到 七牛云 上。地址是:WeaponInfo

3. 語(yǔ)言

用的語(yǔ)言是之前學(xué)的 Kotlin 。 Kotlin學(xué)習(xí)筆記

4. 風(fēng)格

整體的風(fēng)格就是我這次分享的主題 Material Desing 風(fēng)格。

二、整體內(nèi)容結(jié)構(gòu)的準(zhǔn)備

在做 PPT 之前，先把結(jié)構(gòu)搭好，并且把 PPT 的內(nèi)容先準(zhǔn)備好，到時(shí)候直接就可以復(fù)制到 PPT中。

整體結(jié)構(gòu):

什么是 Material Design Material Desing 的特點(diǎn) 從四個(gè)特點(diǎn)結(jié)合 Android 的應(yīng)用剖析 在我的公司「口袋」項(xiàng)目中的應(yīng)用

當(dāng)然內(nèi)容需要看官方的文檔和其他資料加上總結(jié)才能完成，所以在此感謝一下文章的幫助：

Material Design 學(xué)習(xí)筆記

Material Design 官網(wǎng)介紹文檔

Material Design 中文介紹

Material Design in Android Developer

三、 PPT 的準(zhǔn)備

有了之前內(nèi)容的編寫(xiě)，做 PPT 就方便一點(diǎn)。但是因?yàn)閯傎I(mǎi)的 MAC ，但又不想再裝 WPS 套餐，于是用的是自帶的 keynote ，所以使用上會(huì)有點(diǎn)生疏。不過(guò)，整個(gè) PPT 制作下來(lái)對(duì)其使用也熟練了起來(lái)。

如果需要的話，可以加個(gè)QQ發(fā)給你。

1、封面

封面

進(jìn)入 MD 官網(wǎng)首頁(yè)就是這張圖片。

2、介紹

介紹.gif

從 MD 上截取的動(dòng)畫(huà)作為入口，大概講解一下 MD 的基礎(chǔ)概念和特點(diǎn)。

3、特點(diǎn)

特點(diǎn).gif

這里抽取了四個(gè)點(diǎn): Material 、 Elevation 、 Color 和 Animation 進(jìn)行分析。

4、風(fēng)格背景

文字采用圓角+陰影進(jìn)行包裹，至于高度和圓角效果因?yàn)闀r(shí)間緊迫，沒(méi)有按照嚴(yán)格規(guī)范進(jìn)行設(shè)置，如果對(duì)這方面有要求可以參考官網(wǎng)詳細(xì)的規(guī)范要求。

image.png

5、動(dòng)畫(huà)效果

說(shuō)起動(dòng)畫(huà)，為了能夠模仿 MD 的交互，也是現(xiàn)學(xué)現(xiàn)賣(mài)了一把。

交互.gif

其實(shí)就是背景的放大效果，再加上文字的位移效果。

三、總結(jié)

這應(yīng)該是本人第一次技術(shù)分享，除了內(nèi)容準(zhǔn)備的還算充分，分享的過(guò)程不是很滿意。本人性格偏內(nèi)向，平時(shí)只默默的擼代碼、玩游戲，不愿意主動(dòng)和別人交流，所以不論分享之前還是期間都表現(xiàn)的很緊張，聲音有明顯的顫抖，整體節(jié)奏把握的不好，很快。

整個(gè)分享過(guò)程，感覺(jué)自己就是為了將 PPT 內(nèi)容放完就等于完成任務(wù)似的，導(dǎo)致聽(tīng)的人迷迷糊糊的，一個(gè)點(diǎn)還沒(méi)有放完就跳到了另一個(gè)點(diǎn)，致使整個(gè)分享結(jié)束，聽(tīng)眾吸收的部分很少。在結(jié)束后，我們老大 也給了我不少建議：分享的內(nèi)容不在于多，而在于聽(tīng)眾吸收了多少，你匆匆忙忙的說(shuō)完了，底下的人一臉懵逼，這就失去了分享的意義。

確實(shí)，技術(shù)分享本來(lái)的目的不就是為了讓那些對(duì)分享主題不熟悉的人能有個(gè)大概的了解，能夠從中收獲到一些在自己領(lǐng)域中得到應(yīng)用的技能，這就足夠了。因此，在分享之前，自己要對(duì)分享的知識(shí)點(diǎn)有個(gè)充分的了解。在分享時(shí)能將每個(gè)知識(shí)點(diǎn)都有個(gè)透徹而又完整的分析，不要追求速度。實(shí)話說(shuō)這次分享確實(shí)給我?guī)Я瞬簧俚氖斋@，相信在下次分享中能夠有一個(gè)滿意的表現(xiàn)。

我--------------是--------------分--------------割--------------線

Material Design in Android

接下來(lái)開(kāi)始分享這次分享的主要內(nèi)容,因?yàn)?MD 的介紹和規(guī)范在官網(wǎng)上都有非常詳細(xì)全面的介紹，所以我就不贅述了，建議自己先看一遍官方網(wǎng)站的介紹，這樣你對(duì) MD 的理解會(huì)更加深入一些。那我把鏈接再列出一下：

Material Design`官網(wǎng)介紹文檔

Material Design 中文介紹

當(dāng)你把官網(wǎng)的內(nèi)容大致瀏覽一遍，相信也對(duì) MD 有個(gè)初步的了解，當(dāng)然要想全部弄懂的話，還得需要消化一陣子，畢竟 MD 的設(shè)計(jì)規(guī)范細(xì)致入微。越讀越能感受到它的妙處，假如你能?chē)?yán)格按照它的規(guī)范進(jìn)行開(kāi)發(fā)項(xiàng)目，哪怕你不是專(zhuān)業(yè)的UI設(shè)計(jì)師，相信你的產(chǎn)品一定會(huì)難看的。

那接下來(lái)就主要介紹一下 Material Desing 在 Android 中應(yīng)用。。

跟隨著15年 Android 5.0 的問(wèn)世，谷歌設(shè)計(jì)師們還給我們帶來(lái)的一系列的具有 Material Design 風(fēng)格控件。這些控件被統(tǒng)一放置在 support design 庫(kù)中，以供開(kāi)發(fā)中使用。使用這些庫(kù)的前提是 API>=21 ，當(dāng)然如果你想在 5.0 一下的設(shè)備這些控件的話，需要添加 appcompat包進(jìn)行向下兼容。

image.png

我的 design 版本是 26.1.0 ,上圖大概就是 design 提供的 API ，這里我只做簡(jiǎn)單的使用介紹，如果想了解其原理的話，可以看一下官方的介紹。

這么多我該從何說(shuō)起呢？我想了下，就按照我做這個(gè)小項(xiàng)目，需要的控件順序說(shuō)起吧，這樣也相當(dāng)于大家跟我一起做出一個(gè)具有 Material Design 風(fēng)格的 APP 了。

1、主題

一個(gè)項(xiàng)目的開(kāi)始，你得先確定這個(gè)項(xiàng)目的主題顏色是什么？你可以使用谷歌給你提供的 Material Theme :

@android:style/Theme.Material （深色版本） @android:style/Theme.Material.Light （淺色版本） @android:style/Theme.Material.Light.DarkActionBar

當(dāng)然，也可以使用自定義的主題，先看一下非常普遍的圖片:

image.png

可以通過(guò)定制不同的類(lèi)別的主題顏色，來(lái)達(dá)到預(yù)期的主題效果。

colorPrimary 項(xiàng)目主顏色，一般是 Titlebar 的背景顏色 colorPrimaryDark 比主顏色深一點(diǎn)顏色，一般是狀態(tài)欄顏色 textColorPrimary 文字的主顏色 windowBackground 窗口背景顏色 navigationBarColor 導(dǎo)航欄顏色

通過(guò)在 styles 中配置顏色來(lái)定制您的主題，并在 AndroidManifest 中應(yīng)用。

開(kāi)發(fā)

[圖片上傳失敗...(image-3f86ab-1513646879600)]

2、BottomNavigationView

主題構(gòu)建好了，下面就是主要內(nèi)容架構(gòu)，我大致分為四個(gè)模塊:武器簡(jiǎn)介、人物簡(jiǎn)介、配件簡(jiǎn)介和空頭簡(jiǎn)介。那么底下就需要一個(gè) tab 進(jìn)行切換， BottomNavigationView 便開(kāi)始登場(chǎng)。從名字就可以看出 「底部導(dǎo)航 view 」，主要的作用在于給每個(gè)模塊一個(gè)導(dǎo)航定位的功能。

先看一下效果:

bottomNavigationView.gif

在 menu/ 下創(chuàng)建菜單文件:

<menu xmlns:android='http://schemas.android.com/apk/res/android'> <group android:checkableBehavior='single'> <item android: android:icon='@drawable/about' android:title='@string/weapon_inc' /> <!-- 省略部分代碼 --> </group> </menu>

XML 中進(jìn)行引用

<android.support.design.widget.BottomNavigationView android: android:layout_width='match_parent' android:layout_height='wrap_content' app:itemBackground='@color/colorPrimary' app:itemIconTint='@android:color/white' app:itemTextColor='@android:color/white' app:menu='@menu/bottom_menu'/>

代碼中設(shè)置點(diǎn)擊事件

navigation!!.setOnNavigationItemSelectedListener {} 3、DrawerLayout、NavigationView

和 BottomNavigationView 相對(duì)的，不得不介紹一下 NavigationView ，這兩者都是導(dǎo)航 View ，后者一般需要配合 DrawerLayout 實(shí)現(xiàn)側(cè)滑菜單效果。

請(qǐng)看效果：

DrawerLayout.gif

在 XML 直接引用

<android.support.v4.widget.DrawerLayout android: android:layout_width='match_parent' android:layout_weight='1' android:layout_height='0dp'> <!-- 主內(nèi)容 --> <FrameLayoutandroid:fitsSystemWindows='true'android: android:layout_width='match_parent'android:layout_height='match_parent'></FrameLayout> <!-- 側(cè)滑菜單內(nèi)容 --> <android.support.design.widget.NavigationViewandroid: android:layout_width='match_parent'android:layout_height='match_parent'android:layout_gravity='start'app:headerLayout='@layout/nav_header'app:menu='@menu/nav_menu'/></android.support.v4.widget.DrawerLayout>

通過(guò)配置 layout_gravity 的屬性來(lái)設(shè)置側(cè)滑的方向： start ：從左側(cè)劃出， end 從右側(cè)劃出。

headerLayout: 設(shè)置其頭布局menu: 設(shè)置菜單布局

詳細(xì)使用請(qǐng)看我之前寫(xiě)的一篇博客： 高大上的 DrawerLayout

4、Toolbar

整體的架構(gòu)搭建好了，剩下就是開(kāi)始每個(gè)模塊的內(nèi)容了，內(nèi)容當(dāng)然少不了標(biāo)題，那么就開(kāi)始介紹一下 Toolbar 。

Toolbar 作為早期 Android 中 ActionBar 的替代品，定制性和操作性挺高了不少。使用的時(shí)候需要設(shè)置 NoActionBar 的主題。

<style name='AppTheme' parent='Theme.AppCompat.Light.NoActionBar'></style> 5、RecyclerView+SwipeRefreshLayout

項(xiàng)目中列表肯定是少不了的，那么這就不得不提 RecyclerView 了，強(qiáng)大之處不用多說(shuō)，感興趣的話看一下我之前寫(xiě)的博客，對(duì)其使用有個(gè)簡(jiǎn)單的介紹： 簡(jiǎn)單粗暴 RecyclerView

那如果想實(shí)現(xiàn)側(cè)滑刪除和長(zhǎng)按拖拽的功能怎么辦呢？ RecyclerView 原生就支持這些，只需要繼承 ItemTouchHelper.Callback 的類(lèi)，并實(shí)現(xiàn)它幾個(gè)抽象方法即可。

創(chuàng)建實(shí)現(xiàn) ItemTouchHelper.Callback 的類(lèi)

internal inner class ItemTouchHelperCallback : ItemTouchHelper.Callback() { override fun getMovementFlags(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder): Int { val dragFlags = ItemTouchHelper.UP or ItemTouchHelper.DOWN val swipeFlags = ItemTouchHelper.START or ItemTouchHelper.END return makeMovementFlags(dragFlags, swipeFlags) } override fun onMove(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder, target: RecyclerView.ViewHolder): Boolean { myAdapter!!.onItemMove(viewHolder.adapterPosition, target.adapterPosition) return false } override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) { myAdapter!!.onItemDismiss(viewHolder.adapterPosition) } }

和 RecyclerView 建立連接

val mItemTouchHelper = ItemTouchHelper(ItemTouchHelperCallback()) mItemTouchHelper.attachToRecyclerView(mRecyclerView)

實(shí)現(xiàn)效果如下：

RecyclerView.gif

6、CardView

列表結(jié)構(gòu)寫(xiě)好了，里面內(nèi)容得優(yōu)化吧， CardView 自帶圓角和陰影效果，讓每個(gè) Item 看起來(lái)就非常的自然，正如其名像卡片一樣，也符合了 Material Design 特點(diǎn)。

作為 ViewGroup 包裹子 View 實(shí)現(xiàn)圓角和陰影的效果：

<android.support.v7.widget.CardView android:layout_width='wrap_content' android:layout_height='wrap_content' android:layout_margin='2dp' app:cardCornerRadius='5dp' app:cardElevation='5dp'></android.support.v7.widget.CardView>

主要由兩個(gè)屬性控制：

cardCornerRadius ：圓角半徑 cardElevation ：高度(直接影響陰影的大小) 7、CoordinatorLayout+AppBarLayout+Toolbar

列表寫(xiě)好了，接下來(lái)就是滑動(dòng)的交互， CoordinatorLayout ：作為根 View 或者是一個(gè)活多個(gè)子 View 特定的容器，用于協(xié)調(diào)子 View 之間滑動(dòng)的交互，可以說(shuō) CoordinatorLayout 是整個(gè) Design 庫(kù)中最核心的控件。

AppBarLayout 其實(shí)就是 LinearLayout ,通過(guò) layout_scrollFlags 來(lái)控制滑動(dòng)的效果。前提是滑動(dòng) view 必須實(shí)現(xiàn) NestedScrollingChild 的接口，且需要配置 behavior ，最基本的使用就是：

<android.support.design.widget.CoordinatorLayout xmlns:android='http://schemas.android.com/apk/res/android' xmlns:app='http://schemas.android.com/apk/res-auto' android:layout_width='match_parent' android:layout_height='match_parent'><android.support.design.widget.AppBarLayoutandroid: android:layout_width='match_parent'android:layout_height='wrap_content'><android.support.v7.widget.Toolbar android: android:layout_width='match_parent' android:layout_height='?attr/actionBarSize' android:background='?attr/colorPrimary' android:fitsSystemWindows='true' android:theme='@style/ThemeOverlay.AppCompat.Dark.ActionBar' app:layout_scrollFlags='scroll|enterAlwaysCollapsed' app:popupTheme='@style/Theme.AppCompat.Light' /> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.SwipeRefreshLayoutandroid: android:layout_width='match_parent'android:layout_height='match_parent'app:layout_behavior='@string/appbar_scrolling_view_behavior'><android.support.v7.widget.RecyclerView android: android:layout_width='match_parent' android:layout_height='match_parent' android:foregroundGravity='center' /> </android.support.v4.widget.SwipeRefreshLayout></android.support.design.widget.CoordinatorLayout>

有兩個(gè)重點(diǎn)：

滑動(dòng)的 view 必須實(shí)現(xiàn) NestedScrollingChild 接口。比如 RecyclerView 、 NestedScrollView . 必須配置 behavior 。 app:layout_behavior='@string/appbar_scrolling_view_behavior'

來(lái)看一下 layout_scrollFlags 有哪些屬性，為了方便理解，將可以滑動(dòng)的 view 簡(jiǎn)稱(chēng)為 ScrollView ,設(shè)置了 layout_scrollFlags 稱(chēng)為 DependentView ：

1. scroll

子 view 必須設(shè)置該屬性其他的屬性的才會(huì)生效，這個(gè)是最基本的屬性。

2. scroll|enterAlways

只要 ScrollView 滑動(dòng)，滑動(dòng)事件就會(huì)交給設(shè)置 DependentView ，當(dāng) DependentView 滑動(dòng)結(jié)束才會(huì)將事件交給 ScorllView 。也就是下面的效果:

enterAlways.gif

3. scroll|enterAlwaysCollapsed

當(dāng) ScrollView 向下滑動(dòng)時(shí)， DependentView 先折疊到最小高度(這里是0),然后將事件交給 ScrollView ，當(dāng) ScrollView 滑動(dòng)結(jié)束， DependentView 才繼續(xù)滑動(dòng)事件，直至展開(kāi)，如下圖所示：

enterAlwaysCollapsed.gif

4. scroll|enterAlwaysCollapsed|enterAlways

這邊就展示一下折疊的效果，我們先設(shè)置最小的高度

<android.support.v7.widget.Toolbarandroid:layout_width='match_parent'android:layout_height='100dp'android:minHeight='50dp'app:layout_scrollFlags='scroll|enterAlwaysCollapsed|enterAlways' />

展示一下效果：

see.gif

5. scroll|exitUntilCollapsed

這個(gè)搭配重點(diǎn)在于上拉的時(shí)候， DependentView 會(huì)先折疊到最小高度，然后事件全部交給 ScrollView 。那下拉的時(shí)候就是當(dāng) ScrollView 滑動(dòng)結(jié)束，才開(kāi)始 DependentView 的滑動(dòng)事件。

exitUntilCollapsed.gif

6. scroll|enterAlways|snap

這個(gè) snap 就是在上面的基礎(chǔ)上多了一個(gè)回彈的效果,當(dāng) DependentView 正在滑動(dòng)，此時(shí)手指離開(kāi)屏幕時(shí)， DependentView 會(huì)自動(dòng)移動(dòng)到離自己較勁的終點(diǎn)或者始點(diǎn)。效果如下:

snap.gif

上面的屬性完全可以像第四種情況疊加使用，至于效果自己嘗試了了才能感覺(jué)到它的奧妙之處。

8、轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

交互有了，現(xiàn)在看是添加點(diǎn)擊跳轉(zhuǎn)效果了。咱們之前跳轉(zhuǎn)動(dòng)畫(huà)都是在 startActivity 之后調(diào)用 overridePendingTransition 方法，傳入進(jìn)入和退出的動(dòng)畫(huà)實(shí)現(xiàn)跳轉(zhuǎn)動(dòng)畫(huà)。 Android 5.0 提供了強(qiáng)大的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，給每個(gè) item 賦予了生命，跳轉(zhuǎn)時(shí)，仿佛每塊布局都參與了這次搬遷大運(yùn)動(dòng)。

使用時(shí)，需在 setContentView() 之前加上

window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)

跳轉(zhuǎn)時(shí)候這樣寫(xiě):

startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(activity).toBundle())

跳轉(zhuǎn)的界面設(shè)置轉(zhuǎn)場(chǎng)動(dòng)畫(huà)或者出場(chǎng)動(dòng)畫(huà)：

window.enterTransition = Explode() window.exitTransition = Slide()

為了看出效果我設(shè)置了2s的延遲：

Transition.gif

9、Toast、SnackBar和AlertDialog

基本的界面寫(xiě)完了，剩下的就是一些邏輯上的操作啦，比如「提示」。那么 Android 提示分為三種：

友好的 Toast (比如網(wǎng)絡(luò)失敗) 擁有附加行為的提示 SnackBar (比如誤刪信息回撤) 強(qiáng)制讓用戶做出選擇的 AlertDialg (比如未登錄)

那么這三種的效果是什么呢？

TSA.gif

大概先講這些，有時(shí)間再進(jìn)行后續(xù)補(bǔ)充。

Material Design 在「口袋」中的應(yīng)用

其實(shí)在咱們的「口袋貴金屬」項(xiàng)目中也到找到很多 MD 的元素。

首先是點(diǎn)擊的水波紋效果：

ripple.gif

其次是交易圈的滑動(dòng)交互:

circle.gif

還有就是本人在「口袋」接手的第二個(gè)需求，「?jìng)€(gè)人中心」。看一下效果：

personal.gif

嚴(yán)格按照 Material Design 風(fēng)格進(jìn)行開(kāi)發(fā)，相信一定能開(kāi)發(fā)出非常漂亮的 APP ！

來(lái)自：http://www.jianshu.com/p/1f3761aa1a30