前言

我剛來這個公司的時候，每個周三都會有分享會，主題自定，分享對象盡量是面向大眾，一開始覺得不錯，但是到后面發現分享的內容不是那么有營養，而且積極性不是很高，都是當做任務進行分享。 程序員因為較為靦腆，分享的人較少，大部分都是客戶部、分析部或者推廣部的分享，久而久之，氛圍就比較消極。

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

那么，輪到我分享了，其實一個月之前就已經通知我讓我準備分享，因為公司有個交易項目要上線，比較繁忙，就沒太抽出時間準備，直到上個星期五才抽出周末的時間準備。

準備

說完那么多廢話，開始進入正題。最終決定分享主題為『Material Design In Android』。因為之前畢設項目 趣聞 中有用到「Support Design」庫中的控件，所以寫起來會順手一點。我分三部分準備：

APP 準備 文檔準備 Keynote 準備 一、APP準備

項目已經上傳到 GitHub 上: AndroidMD

運行效果

MD.gif

花了兩個多小時做了這個 APP ，功能簡單，主題明確。

先說說完成這個 APP 的事前準備:

1. 主題

主題是最近非?；鸬?「終結者2:審判日」

2. 數據

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

3. 語言

用的語言是之前學的 Kotlin 。 Kotlin學習筆記

4. 風格

整體的風格就是我這次分享的主題 Material Desing 風格。

二、整體內容結構的準備

在做 PPT 之前，先把結構搭好，并且把 PPT 的內容先準備好，到時候直接就可以復制到 PPT中。

整體結構:

什么是 Material Design Material Desing 的特點 從四個特點結合 Android 的應用剖析 在我的公司「口袋」項目中的應用

當然內容需要看官方的文檔和其他資料加上總結才能完成，所以在此感謝一下文章的幫助：

Material Design 學習筆記

Material Design 官網介紹文檔

Material Design 中文介紹

Material Design in Android Developer

三、 PPT 的準備

有了之前內容的編寫，做 PPT 就方便一點。但是因為剛買的 MAC ，但又不想再裝 WPS 套餐，于是用的是自帶的 keynote ，所以使用上會有點生疏。不過，整個 PPT 制作下來對其使用也熟練了起來。

如果需要的話，可以加個QQ發給你。

1、封面

封面

進入 MD 官網首頁就是這張圖片。

2、介紹

介紹.gif

從 MD 上截取的動畫作為入口，大概講解一下 MD 的基礎概念和特點。

3、特點

特點.gif

這里抽取了四個點: Material 、 Elevation 、 Color 和 Animation 進行分析。

4、風格背景

文字采用圓角+陰影進行包裹，至于高度和圓角效果因為時間緊迫，沒有按照嚴格規范進行設置，如果對這方面有要求可以參考官網詳細的規范要求。

image.png

5、動畫效果

說起動畫，為了能夠模仿 MD 的交互，也是現學現賣了一把。

交互.gif

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

三、總結

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

整個分享過程，感覺自己就是為了將 PPT 內容放完就等于完成任務似的，導致聽的人迷迷糊糊的，一個點還沒有放完就跳到了另一個點，致使整個分享結束，聽眾吸收的部分很少。在結束后，我們老大 也給了我不少建議：分享的內容不在于多，而在于聽眾吸收了多少，你匆匆忙忙的說完了，底下的人一臉懵逼，這就失去了分享的意義。

確實，技術分享本來的目的不就是為了讓那些對分享主題不熟悉的人能有個大概的了解，能夠從中收獲到一些在自己領域中得到應用的技能，這就足夠了。因此，在分享之前，自己要對分享的知識點有個充分的了解。在分享時能將每個知識點都有個透徹而又完整的分析，不要追求速度。實話說這次分享確實給我帶了不少的收獲，相信在下次分享中能夠有一個滿意的表現。

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

Material Design in Android

接下來開始分享這次分享的主要內容,因為 MD 的介紹和規范在官網上都有非常詳細全面的介紹，所以我就不贅述了，建議自己先看一遍官方網站的介紹，這樣你對 MD 的理解會更加深入一些。那我把鏈接再列出一下：

Material Design`官網介紹文檔

Material Design 中文介紹

當你把官網的內容大致瀏覽一遍，相信也對 MD 有個初步的了解，當然要想全部弄懂的話，還得需要消化一陣子，畢竟 MD 的設計規范細致入微。越讀越能感受到它的妙處，假如你能嚴格按照它的規范進行開發項目，哪怕你不是專業的UI設計師，相信你的產品一定會難看的。

那接下來就主要介紹一下 Material Desing 在 Android 中應用。。

跟隨著15年 Android 5.0 的問世，谷歌設計師們還給我們帶來的一系列的具有 Material Design 風格控件。這些控件被統一放置在 support design 庫中，以供開發中使用。使用這些庫的前提是 API>=21 ，當然如果你想在 5.0 一下的設備這些控件的話，需要添加 appcompat包進行向下兼容。

image.png

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

這么多我該從何說起呢？我想了下，就按照我做這個小項目，需要的控件順序說起吧，這樣也相當于大家跟我一起做出一個具有 Material Design 風格的 APP 了。

1、主題

一個項目的開始，你得先確定這個項目的主題顏色是什么？你可以使用谷歌給你提供的 Material Theme :

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

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

image.png

可以通過定制不同的類別的主題顏色，來達到預期的主題效果。

colorPrimary 項目主顏色，一般是 Titlebar 的背景顏色 colorPrimaryDark 比主顏色深一點顏色，一般是狀態欄顏色 textColorPrimary 文字的主顏色 windowBackground 窗口背景顏色 navigationBarColor 導航欄顏色

通過在 styles 中配置顏色來定制您的主題，并在 AndroidManifest 中應用。

開發

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

2、BottomNavigationView

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

先看一下效果:

bottomNavigationView.gif

在 menu/ 下創建菜單文件:

<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 中進行引用

<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'/>

代碼中設置點擊事件

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

和 BottomNavigationView 相對的，不得不介紹一下 NavigationView ，這兩者都是導航 View ，后者一般需要配合 DrawerLayout 實現側滑菜單效果。

請看效果：

DrawerLayout.gif

在 XML 直接引用

<android.support.v4.widget.DrawerLayout android: android:layout_width='match_parent' android:layout_weight='1' android:layout_height='0dp'> <!-- 主內容 --> <FrameLayoutandroid:fitsSystemWindows='true'android: android:layout_width='match_parent'android:layout_height='match_parent'></FrameLayout> <!-- 側滑菜單內容 --> <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>

通過配置 layout_gravity 的屬性來設置側滑的方向： start ：從左側劃出， end 從右側劃出。

headerLayout: 設置其頭布局menu: 設置菜單布局

詳細使用請看我之前寫的一篇博客： 高大上的 DrawerLayout

4、Toolbar

整體的架構搭建好了，剩下就是開始每個模塊的內容了，內容當然少不了標題，那么就開始介紹一下 Toolbar 。

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

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

項目中列表肯定是少不了的，那么這就不得不提 RecyclerView 了，強大之處不用多說，感興趣的話看一下我之前寫的博客，對其使用有個簡單的介紹： 簡單粗暴 RecyclerView

那如果想實現側滑刪除和長按拖拽的功能怎么辦呢？ RecyclerView 原生就支持這些，只需要繼承 ItemTouchHelper.Callback 的類，并實現它幾個抽象方法即可。

創建實現 ItemTouchHelper.Callback 的類

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)

實現效果如下：

RecyclerView.gif

6、CardView

列表結構寫好了，里面內容得優化吧， CardView 自帶圓角和陰影效果，讓每個 Item 看起來就非常的自然，正如其名像卡片一樣，也符合了 Material Design 特點。

作為 ViewGroup 包裹子 View 實現圓角和陰影的效果：

<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>

主要由兩個屬性控制：

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

列表寫好了，接下來就是滑動的交互， CoordinatorLayout ：作為根 View 或者是一個活多個子 View 特定的容器，用于協調子 View 之間滑動的交互，可以說 CoordinatorLayout 是整個 Design 庫中最核心的控件。

AppBarLayout 其實就是 LinearLayout ,通過 layout_scrollFlags 來控制滑動的效果。前提是滑動 view 必須實現 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>

有兩個重點：

滑動的 view 必須實現 NestedScrollingChild 接口。比如 RecyclerView 、 NestedScrollView . 必須配置 behavior 。 app:layout_behavior='@string/appbar_scrolling_view_behavior'

來看一下 layout_scrollFlags 有哪些屬性，為了方便理解，將可以滑動的 view 簡稱為 ScrollView ,設置了 layout_scrollFlags 稱為 DependentView ：

1. scroll

子 view 必須設置該屬性其他的屬性的才會生效，這個是最基本的屬性。

2. scroll|enterAlways

只要 ScrollView 滑動，滑動事件就會交給設置 DependentView ，當 DependentView 滑動結束才會將事件交給 ScorllView 。也就是下面的效果:

enterAlways.gif

3. scroll|enterAlwaysCollapsed

當 ScrollView 向下滑動時， DependentView 先折疊到最小高度(這里是0),然后將事件交給 ScrollView ，當 ScrollView 滑動結束， DependentView 才繼續滑動事件，直至展開，如下圖所示：

enterAlwaysCollapsed.gif

4. scroll|enterAlwaysCollapsed|enterAlways

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

<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

這個搭配重點在于上拉的時候， DependentView 會先折疊到最小高度，然后事件全部交給 ScrollView 。那下拉的時候就是當 ScrollView 滑動結束，才開始 DependentView 的滑動事件。

exitUntilCollapsed.gif

6. scroll|enterAlways|snap

這個 snap 就是在上面的基礎上多了一個回彈的效果,當 DependentView 正在滑動，此時手指離開屏幕時， DependentView 會自動移動到離自己較勁的終點或者始點。效果如下:

snap.gif

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

8、轉場動畫

交互有了，現在看是添加點擊跳轉效果了。咱們之前跳轉動畫都是在 startActivity 之后調用 overridePendingTransition 方法，傳入進入和退出的動畫實現跳轉動畫。 Android 5.0 提供了強大的轉場動畫，給每個 item 賦予了生命，跳轉時，仿佛每塊布局都參與了這次搬遷大運動。

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

window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)

跳轉時候這樣寫:

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

跳轉的界面設置轉場動畫或者出場動畫：

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

為了看出效果我設置了2s的延遲：

Transition.gif

9、Toast、SnackBar和AlertDialog

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

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

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

TSA.gif

大概先講這些，有時間再進行后續補充。

Material Design 在「口袋」中的應用

其實在咱們的「口袋貴金屬」項目中也到找到很多 MD 的元素。

首先是點擊的水波紋效果：

ripple.gif

其次是交易圈的滑動交互:

circle.gif

還有就是本人在「口袋」接手的第二個需求，「個人中心」?？匆幌滦Ч?/p>

personal.gif

嚴格按照 Material Design 風格進行開發，相信一定能開發出非常漂亮的 APP ！

來自：http://www.jianshu.com/p/1f3761aa1a30