前言
我剛來這個公司的時候付翁，每個周三都會有分享會尖阔，主題自定贮缅，分享對象盡量是面向大眾，一開始覺得不錯介却，但是到后面發(fā)現(xiàn)分享的內(nèi)容不是那么有營養(yǎng)谴供，而且積極性不是很高，都是當做任務進行分享齿坷。 程序員因為較為靦腆桂肌，分享的人較少，大部分都是客戶部永淌、分析部或者推廣部的分享轴或，久而久之，氛圍就比較消極仰禀。
為了提高咱們程序員發(fā)言的積極性照雁，增添技術部的溝通氛圍，決定之前的分享形式不變答恶，但是改為月末一次饺蚊，技術部的分享每周一次。主題可以是當前部門的相關技術悬嗓，當然最好是能夠讓大眾聽懂污呼。分享時能夠積極討論，最終目的提高自身的軟實力包竹，咱們程序員不能只知道敲代碼燕酷，是吧？
那么周瞎，輪到我分享了苗缩，其實一個月之前就已經(jīng)通知我讓我準備分享，因為公司有個交易項目要上線声诸，比較繁忙酱讶，就沒太抽出時間準備，直到上個星期五才抽出周末的時間準備彼乌。
準備
說完那么多廢話泻肯，開始進入正題。最終決定分享主題為『Material Design In Android』慰照。因為之前畢設項目趣聞中有用到「Support Design」庫中的控件灶挟，所以寫起來會順手一點。我分三部分準備：
-
APP準備 - 文檔準備
-
Keynote準備
一毒租、APP準備
項目已經(jīng)上傳到GitHub上:AndroidMD
運行效果
花了兩個多小時做了這個APP稚铣，功能簡單，主題明確。
先說說完成這個APP的事前準備:
1. 主題
主題是最近非抽环海火的「終結者2:審判日」
2. 數(shù)據(jù)
數(shù)據(jù)是自己在本地寫的json數(shù)據(jù)蝌蹂，很是尷尬，然后部署到七牛云上曹锨。地址是:WeaponInfo
3. 語言
用的語言是之前學的Kotlin孤个。Kotlin學習筆記
4. 風格
整體的風格就是我這次分享的主題 Material Desing風格。
二沛简、整體內(nèi)容結構的準備
在做PPT之前齐鲤，先把結構搭好，并且把PPT的內(nèi)容先準備好椒楣，到時候直接就可以復制到PPT中给郊。
整體結構:
- 什么是
Material DesignMaterial Desing的特點- 從四個特點結合
Android的應用剖析- 在我的公司「口袋」項目中的應用
當然內(nèi)容需要看官方的文檔和其他資料加上總結才能完成，所以在此感謝一下文章的幫助：
Material Design 學習筆記
Material Design 官網(wǎng)介紹文檔
Material Design 中文介紹
Material Design in Android Developer
三捧灰、PPT的準備
有了之前內(nèi)容的編寫淆九，做PPT就方便一點。但是因為剛買的MAC毛俏，但又不想再裝WPS套餐炭庙，于是用的是自帶的keynote，所以使用上會有點生疏煌寇。不過芥备，整個PPT制作下來對其使用也熟練了起來笆凌。
如果需要的話，可以加個QQ發(fā)給你抱环。
1绊起、封面
進入
MD官網(wǎng)首頁就是這張圖片骄恶。
2酥筝、介紹
從
MD上截取的動畫作為入口遭京，大概講解一下MD的基礎概念和特點。
3徒仓、特點
這里抽取了四個點:
Material腐碱、Elevation、Color和Animation進行分析掉弛。
4、風格背景
文字采用圓角+陰影進行包裹喂走，至于高度和圓角效果因為時間緊迫殃饿，沒有按照嚴格規(guī)范進行設置，如果對這方面有要求可以參考官網(wǎng)詳細的規(guī)范要求芋肠。
5乎芳、動畫效果
說起動畫，為了能夠模仿
MD的交互，也是現(xiàn)學現(xiàn)賣了一把奈惑。
其實就是背景的放大效果吭净，再加上文字的位移效果。
三肴甸、總結
這應該是本人第一次技術分享寂殉，除了內(nèi)容準備的還算充分，分享的過程不是很滿意原在。本人性格偏內(nèi)向友扰，平時只默默的擼代碼、玩游戲庶柿，不愿意主動和別人交流村怪，所以不論分享之前還是期間都表現(xiàn)的很緊張，聲音有明顯的顫抖浮庐，整體節(jié)奏把握的不好甚负，很快。
整個分享過程审残，感覺自己就是為了將PPT內(nèi)容放完就等于完成任務似的梭域，導致聽的人迷迷糊糊的，一個點還沒有放完就跳到了另一個點维苔，致使整個分享結束碰辅，聽眾吸收的部分很少。在結束后介时，我們老大 也給了我不少建議：分享的內(nèi)容不在于多没宾，而在于聽眾吸收了多少，你匆匆忙忙的說完了沸柔，底下的人一臉懵逼循衰，這就失去了分享的意義。
確實褐澎，技術分享本來的目的不就是為了讓那些對分享主題不熟悉的人能有個大概的了解会钝，能夠從中收獲到一些在自己領域中得到應用的技能，這就足夠了工三。因此迁酸，在分享之前，自己要對分享的知識點有個充分的了解俭正。在分享時能將每個知識點都有個透徹而又完整的分析奸鬓，不要追求速度。實話說這次分享確實給我?guī)Я瞬簧俚氖斋@掸读，相信在下次分享中能夠有一個滿意的表現(xiàn)串远。
我--------------是--------------分--------------割--------------線
Material Design in Android
接下來開始分享這次分享的主要內(nèi)容,因為MD的介紹和規(guī)范在官網(wǎng)上都有非常詳細全面的介紹宏多，所以我就不贅述了，建議自己先看一遍官方網(wǎng)站的介紹澡罚，這樣你對MD的理解會更加深入一些伸但。那我把鏈接再列出一下：
當你把官網(wǎng)的內(nèi)容大致瀏覽一遍，相信也對MD有個初步的了解留搔，當然要想全部弄懂的話更胖，還得需要消化一陣子，畢竟MD的設計規(guī)范細致入微催式。越讀越能感受到它的妙處函喉，假如你能嚴格按照它的規(guī)范進行開發(fā)項目，哪怕你不是專業(yè)的UI設計師荣月，相信你的產(chǎn)品一定不會難看的管呵。
那接下來就主要介紹一下Material Desing在Android中應用。哺窄。
跟隨著15年Android 5.0的問世捐下，谷歌設計師們還給我們帶來的一系列的具有Material Design風格控件。這些控件被統(tǒng)一放置在support design庫中萌业，以供開發(fā)中使用坷襟。使用這些庫的前提是API>=21，當然如果你想在 5.0 一下的設備這些控件的話生年，需要添加appcompat包進行向下兼容婴程。
我的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
當然，也可以使用自定義的主題咙冗，先看一下非常普遍的圖片:
可以通過定制不同的類別的主題顏色表锻，來達到預期的主題效果。
-
colorPrimary項目主顏色乞娄，一般是Titlebar的背景顏色 -
colorPrimaryDark比主顏色深一點顏色瞬逊，一般是狀態(tài)欄顏色 -
textColorPrimary文字的主顏色 -
windowBackground窗口背景顏色 -
navigationBarColor導航欄顏色
通過在styles中配置顏色來定制您的主題，并在AndroidManifest中應用仪或。
開發(fā)
[圖片上傳失敗...(image-3f86ab-1513646879600)]
2确镊、BottomNavigationView
主題構建好了，下面就是主要內(nèi)容架構范删，我大致分為四個模塊:武器簡介蕾域、人物簡介、配件簡介和空頭簡介到旦。那么底下就需要一個tab進行切換旨巷，BottomNavigationView便開始登場。從名字就可以看出 「底部導航view」添忘，主要的作用在于給每個模塊一個導航定位的功能采呐。
先看一下效果:
-
在
menu/下創(chuàng)建菜單文件:<menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/bottom_weapon_inc" android:icon="@drawable/about" android:title="@string/weapon_inc" /> <!-- 省略部分代碼 --> </group> </menu> -
XML中進行引用<android.support.design.widget.BottomNavigationView android:id="@+id/navigation" 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實現(xiàn)側滑菜單效果煤率。
請看效果：
在XML直接引用
<android.support.v4.widget.DrawerLayout
android:id="@+id/dl_main"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
<!-- 主內(nèi)容 -->
<FrameLayout
android:fitsSystemWindows="true"
android:id="@+id/fl_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<!-- 側滑菜單內(nèi)容 -->
<android.support.design.widget.NavigationView
android:id="@+id/nv_left"
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
整體的架構搭建好了，剩下就是開始每個模塊的內(nèi)容了辆沦，內(nèi)容當然少不了標題昼捍，那么就開始介紹一下Toolbar。
Toolbar作為早期Android中ActionBar的替代品众辨，定制性和操作性挺高了不少端三。使用的時候需要設置NoActionBar的主題。
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"></style>
5鹃彻、RecyclerView+SwipeRefreshLayout
項目中列表肯定是少不了的郊闯，那么這就不得不提RecyclerView了，強大之處不用多說蛛株，感興趣的話看一下我之前寫的博客团赁，對其使用有個簡單的介紹：簡單粗暴RecyclerView
那如果想實現(xiàn)側滑刪除和長按拖拽的功能怎么辦呢？RecyclerView原生就支持這些谨履，只需要繼承ItemTouchHelper.Callback的類欢摄，并實現(xiàn)它幾個抽象方法即可。
-
創(chuàng)建實現(xiàn)
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)
實現(xiàn)效果如下：
6笋粟、CardView
列表結構寫好了怀挠，里面內(nèi)容得優(yōu)化吧析蝴，CardView自帶圓角和陰影效果，讓每個Item看起來就非常的自然绿淋，正如其名像卡片一樣闷畸，也符合了Material Design特點。
作為ViewGroup包裹子View實現(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>
主要由兩個屬性控制：
-
cardCornerRadius：圓角半徑 -
cardElevation：高度(直接影響陰影的大小)
7吞滞、CoordinatorLayout+AppBarLayout+Toolbar
列表寫好了佑菩，接下來就是滑動的交互，CoordinatorLayout：作為根View或者是一個活多個子View特定的容器裁赠，用于協(xié)調(diào)子View之間滑動的交互殿漠，可以說CoordinatorLayout是整個Design庫中最核心的控件。
AppBarLayout其實就是LinearLayout,通過layout_scrollFlags來控制滑動的效果佩捞。前提是滑動view必須實現(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.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
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.SwipeRefreshLayout
android:id="@+id/refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foregroundGravity="center" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
有兩個重點：
- 滑動的
view必須實現(xiàn)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薯鼠。也就是下面的效果:
3. scroll|enterAlwaysCollapsed
當ScrollView向下滑動時择诈，DependentView先折疊到最小高度(這里是0),然后將事件交給ScrollView，當ScrollView滑動結束出皇，DependentView才繼續(xù)滑動事件羞芍，直至展開，如下圖所示：
4. scroll|enterAlwaysCollapsed|enterAlways
這邊就展示一下折疊的效果郊艘，我們先設置最小的高度
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="100dp"
android:minHeight="50dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways" />
展示一下效果：
5. scroll|exitUntilCollapsed
這個搭配重點在于上拉的時候荷科，DependentView會先折疊到最小高度，然后事件全部交給ScrollView纱注。那下拉的時候就是當ScrollView滑動結束畏浆，才開始DependentView的滑動事件。
6. scroll|enterAlways|snap
這個snap就是在上面的基礎上多了一個回彈的效果,當DependentView正在滑動狞贱，此時手指離開屏幕時刻获，DependentView會自動移動到離自己較勁的終點或者始點。效果如下:
上面的屬性完全可以像第四種情況疊加使用瞎嬉，至于效果自己嘗試了了才能感覺到它的奧妙之處蝎毡。
8厚柳、轉場動畫
交互有了，現(xiàn)在看是添加點擊跳轉效果了顶掉。咱們之前跳轉動畫都是在startActivity之后調(diào)用overridePendingTransition方法草娜，傳入進入和退出的動畫實現(xiàn)跳轉動畫。Android 5.0提供了強大的轉場動畫痒筒，給每個item賦予了生命，跳轉時茬贵，仿佛每塊布局都參與了這次搬遷大運動簿透。
使用時，需在setContentView()之前加上
window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
跳轉時候這樣寫:
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(activity).toBundle())
跳轉的界面設置轉場動畫或者出場動畫：
window.enterTransition = Explode()
window.exitTransition = Slide()
為了看出效果我設置了2s的延遲：
9解藻、Toast老充、SnackBar和AlertDialog
基本的界面寫完了，剩下的就是一些邏輯上的操作啦螟左，比如「提示」啡浊。那么Android提示分為三種：
- 友好的
Toast(比如網(wǎng)絡失敗) - 擁有附加行為的提示
SnackBar(比如誤刪信息回撤) - 強制讓用戶做出選擇的
AlertDialg(比如未登錄)
那么這三種的效果是什么呢？
大概先講這些胶背，有時間再進行后續(xù)補充巷嚣。
Material Design在「口袋」中的應用
其實在咱們的「口袋貴金屬」項目中也到找到很多MD的元素。
首先是點擊的水波紋效果：
其次是交易圈的滑動交互:
還有就是本人在「口袋」接手的第二個需求钳吟，「個人中心」廷粒。看一下效果：
嚴格按照
Material Design風格進行開發(fā)红且，相信一定能開發(fā)出非常漂亮的APP坝茎！
