記一次公司的Android分享會
2018-07-20 來源：編程學(xué)習(xí)網(wǎng)
前言
我剛來這個公司的時候，每個周三都會有分享會，主題自定，分享對象盡量是面向大眾，一開始覺得不錯，但是到后面發(fā)現(xiàn)分享的內(nèi)容不是那么有營養(yǎng)，而且積極性不是很高，都是當(dāng)做任務(wù)進(jìn)行分享。 程序員因?yàn)檩^為靦腆，分享的人較少，大部分都是客戶部、分析部或者推廣部的分享，久而久之，氛圍就比較消極。
為了提高咱們程序員發(fā)言的積極性，增添技術(shù)部的溝通氛圍，決定之前的分享形式不變，但是改為月末一次，技術(shù)部的分享每周一次。主題可以是當(dāng)前部門的相關(guān)技術(shù)，當(dāng)然最好是能夠讓大眾聽懂。分享時能夠積極討論，最終目的提高自身的軟實(shí)力，咱們程序員不能只知道敲代碼，是吧？
那么，輪到我分享了，其實(shí)一個月之前就已經(jīng)通知我讓我準(zhǔn)備分享，因?yàn)楣居袀�交易項(xiàng)目要上線，比較繁忙，就沒太抽出時間準(zhǔn)備，直到上個星期五才抽出周末的時間準(zhǔn)備。
準(zhǔn)備
說完那么多廢話，開始進(jìn)入正題。最終決定分享主題為『Material Design In Android』。因?yàn)橹爱呍O(shè)項(xiàng)目 趣聞 中有用到「Support Design」庫中的控件，所以寫起來會順手一點(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
花了兩個多小時做了這個 APP ，功能簡單，主題明確。
先說說完成這個 APP 的事前準(zhǔn)備:
1. 主題
主題是最近非�；鸬� 「終結(jié)者2:審判日」
2. 數(shù)據(jù)
數(shù)據(jù)是自己在本地寫的 json 數(shù)據(jù)，很是尷尬，然后部署到 七牛云 上。地址是:WeaponInfo
3. 語言
用的語言是之前學(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)備好，到時候直接就可以復(fù)制到 PPT中。
整體結(jié)構(gòu):
- 什么是
Material Design Material Desing的特點(diǎn)- 從四個特點(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)容的編寫，做 PPT 就方便一點(diǎn)。但是因?yàn)閯傎I的 MAC ，但又不想再裝 WPS 套餐，于是用的是自帶的 keynote ，所以使用上會有點(diǎn)生疏。不過，整個 PPT 制作下來對其使用也熟練了起來。
如果需要的話，可以加個QQ發(fā)給你。
1、封面
封面
進(jìn)入 MD 官網(wǎng)首頁就是這張圖片。
2、介紹
介紹.gif
從 MD 上截取的動畫作為入口，大概講解一下 MD 的基礎(chǔ)概念和特點(diǎn)。
3、特點(diǎn)
特點(diǎn).gif
這里抽取了四個點(diǎn): Material 、 Elevation 、 Color 和 Animation 進(jìn)行分析。
4、風(fēng)格背景
文字采用圓角+陰影進(jìn)行包裹，至于高度和圓角效果因?yàn)闀r間緊迫，沒有按照嚴(yán)格規(guī)范進(jìn)行設(shè)置，如果對這方面有要求可以參考官網(wǎng)詳細(xì)的規(guī)范要求。
image.png
5、動畫效果
說起動畫，為了能夠模仿 MD 的交互，也是現(xiàn)學(xué)現(xiàn)賣了一把。
交互.gif
其實(shí)就是背景的放大效果，再加上文字的位移效果。
三、總結(jié)
這應(yīng)該是本人第一次技術(shù)分享，除了內(nèi)容準(zhǔn)備的還算充分，分享的過程不是很滿意。本人性格偏內(nèi)向，平時只默默的擼代碼、玩游戲，不愿意主動和別人交流，所以不論分享之前還是期間都表現(xiàn)的很緊張，聲音有明顯的顫抖，整體節(jié)奏把握的不好，很快。
整個分享過程，感覺自己就是為了將 PPT 內(nèi)容放完就等于完成任務(wù)似的，導(dǎo)致聽的人迷迷糊糊的，一個點(diǎn)還沒有放完就跳到了另一個點(diǎn)，致使整個分享結(jié)束，聽眾吸收的部分很少。在結(jié)束后，我們老大 也給了我不少建議：分享的內(nèi)容不在于多，而在于聽眾吸收了多少，你匆匆忙忙的說完了，底下的人一臉懵逼，這就失去了分享的意義。
確實(shí)，技術(shù)分享本來的目的不就是為了讓那些對分享主題不熟悉的人能有個大概的了解，能夠從中收獲到一些在自己領(lǐng)域中得到應(yīng)用的技能，這就足夠了。因此，在分享之前，自己要對分享的知識點(diǎn)有個充分的了解。在分享時能將每個知識點(diǎn)都有個透徹而又完整的分析，不要追求速度。實(shí)話說這次分享確實(shí)給我?guī)Я瞬簧俚氖斋@，相信在下次分享中能夠有一個滿意的表現(xiàn)。
我--------------是--------------分--------------割--------------線
Material Design in Android
接下來開始分享這次分享的主要內(nèi)容,因?yàn)?nbsp;MD 的介紹和規(guī)范在官網(wǎng)上都有非常詳細(xì)全面的介紹，所以我就不贅述了，建議自己先看一遍官方網(wǎng)站的介紹，這樣你對 MD 的理解會更加深入一些。那我把鏈接再列出一下：
Material Design`官網(wǎng)介紹文檔
Material Design 中文介紹
當(dāng)你把官網(wǎng)的內(nèi)容大致瀏覽一遍，相信也對 MD 有個初步的了解，當(dāng)然要想全部弄懂的話，還得需要消化一陣子，畢竟 MD 的設(shè)計規(guī)范細(xì)致入微。越讀越能感受到它的妙處，假如你能嚴(yán)格按照它的規(guī)范進(jìn)行開發(fā)項(xiàng)目，哪怕你不是專業(yè)的UI設(shè)計師，相信你的產(chǎn)品一定會難看的。
那接下來就主要介紹一下 Material Desing 在 Android 中應(yīng)用。。
跟隨著15年 Android 5.0 的問世，谷歌設(shè)計師們還給我們帶來的一系列的具有 Material Design 風(fēng)格控件。這些控件被統(tǒng)一放置在 support design 庫中，以供開發(fā)中使用。使用這些庫的前提是 API>=21 ，當(dāng)然如果你想在 5.0 一下的設(shè)備這些控件的話，需要添加 appcompat包進(jìn)行向下兼容。
image.png
我的 design 版本是 26.1.0 ,上圖大概就是 design 提供的 API ，這里我只做簡單的使用介紹，如果想了解其原理的話，可以看一下官方的介紹。
這么多我該從何說起呢？我想了下，就按照我做這個小項(xiàng)目，需要的控件順序說起吧，這樣也相當(dāng)于大家跟我一起做出一個具有 Material Design 風(fēng)格的 APP 了。
1、主題
一個項(xiàng)目的開始，你得先確定這個項(xiàng)目的主題顏色是什么？你可以使用谷歌給你提供的 Material Theme :
@android:style/Theme.Material（深色版本）@android:style/Theme.Material.Light（淺色版本）@android:style/Theme.Material.Light.DarkActionBar
當(dāng)然，也可以使用自定義的主題，先看一下非常普遍的圖片:
image.png
可以通過定制不同的類別的主題顏色，來達(dá)到預(yù)期的主題效果。
colorPrimary項(xiàng)目主顏色，一般是Titlebar的背景顏色colorPrimaryDark比主顏色深一點(diǎn)顏色，一般是狀態(tài)欄顏色textColorPrimary文字的主顏色windowBackground窗口背景顏色navigationBarColor導(dǎo)航欄顏色
通過在 styles 中配置顏色來定制您的主題，并在 AndroidManifest 中應(yīng)用。
開發(fā)
[圖片上傳失敗...(image-3f86ab-1513646879600)]
2、BottomNavigationView
主題構(gòu)建好了，下面就是主要內(nèi)容架構(gòu)，我大致分為四個模塊:武器簡介、人物簡介、配件簡介和空頭簡介。那么底下就需要一個 tab 進(jìn)行切換， BottomNavigationView 便開始登場。從名字就可以看出 「底部導(dǎo)航 view 」，主要的作用在于給每個模塊一個導(dǎo)航定位的功能。
先看一下效果:
bottomNavigationView.gif
-
在
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中進(jìn)行引用<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"/> -
代碼中設(shè)置點(diǎn)擊事件
navigation!!.setOnNavigationItemSelectedListener {}
3、DrawerLayout、NavigationView
和 BottomNavigationView 相對的，不得不介紹一下 NavigationView ，這兩者都是導(dǎo)航 View ，后者一般需要配合 DrawerLayout 實(shí)現(xiàn)側(cè)滑菜單效果。
請看效果：
DrawerLayout.gif
在 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>
<!-- 側(cè)滑菜單內(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 的屬性來設(shè)置側(cè)滑的方向： start ：從左側(cè)劃出， end 從右側(cè)劃出。
headerLayout: 設(shè)置其頭布局
menu: 設(shè)置菜單布局詳細(xì)使用請看我之前寫的一篇博客： 高大上的 DrawerLayout
4、Toolbar
整體的架構(gòu)搭建好了，剩下就是開始每個模塊的內(nèi)容了，內(nèi)容當(dāng)然少不了標(biāo)題，那么就開始介紹一下 Toolbar 。
Toolbar 作為早期 Android 中 ActionBar 的替代品，定制性和操作性挺高了不少。使用的時候需要設(shè)置 NoActionBar 的主題。
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"></style>5、RecyclerView+SwipeRefreshLayout
項(xiàng)目中列表肯定是少不了的，那么這就不得不提 RecyclerView 了，強(qiáng)大之處不用多說，感興趣的話看一下我之前寫的博客，對其使用有個簡單的介紹： 簡單粗暴 RecyclerView
那如果想實(shí)現(xiàn)側(cè)滑刪除和長按拖拽的功能怎么辦呢？ RecyclerView 原生就支持這些，只需要繼承 ItemTouchHelper.Callback 的類，并實(shí)現(xiàn)它幾個抽象方法即可。
-
創(chuàng)建實(shí)現(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)
實(shí)現(xiàn)效果如下：
RecyclerView.gif
6、CardView
列表結(jié)構(gòu)寫好了，里面內(nèi)容得優(yōu)化吧， CardView 自帶圓角和陰影效果，讓每個 Item 看起來就非常的自然，正如其名像卡片一樣，也符合了 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>主要由兩個屬性控制：
cardCornerRadius：圓角半徑cardElevation：高度(直接影響陰影的大小)
7、CoordinatorLayout+AppBarLayout+Toolbar
列表寫好了，接下來就是滑動的交互， CoordinatorLayout ：作為根 View 或者是一個活多個子 View 特定的容器，用于協(xié)調(diào)子 View 之間滑動的交互，可以說 CoordinatorLayout 是整個 Design 庫中最核心的控件。
AppBarLayout 其實(shí)就是 LinearLayout ,通過 layout_scrollFlags 來控制滑動的效果。前提是滑動 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.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>有兩個重點(diǎn)：
- 滑動的
view必須實(shí)現(xiàn)NestedScrollingChild接口。比如RecyclerView、NestedScrollView. - 必須配置
behavior。app:layout_behavior="@string/appbar_scrolling_view_behavior"
來看一下 layout_scrollFlags 有哪些屬性，為了方便理解，將可以滑動的 view 簡稱為 ScrollView ,設(shè)置了 layout_scrollFlags 稱為 DependentView ：
1. scroll
子 view 必須設(shè)置該屬性其他的屬性的才會生效，這個是最基本的屬性。
2. scroll|enterAlways
只要 ScrollView 滑動，滑動事件就會交給設(shè)置 DependentView ，當(dāng) DependentView 滑動結(jié)束才會將事件交給 ScorllView 。也就是下面的效果:
enterAlways.gif
3. scroll|enterAlwaysCollapsed
當(dāng) ScrollView 向下滑動時， DependentView 先折疊到最小高度(這里是0),然后將事件交給 ScrollView ，當(dāng) ScrollView 滑動結(jié)束， DependentView 才繼續(xù)滑動事件，直至展開，如下圖所示：
enterAlwaysCollapsed.gif
4. scroll|enterAlwaysCollapsed|enterAlways
這邊就展示一下折疊的效果，我們先設(shè)置最小的高度
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="100dp"
android:minHeight="50dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways" />展示一下效果：
see.gif
5. scroll|exitUntilCollapsed
這個搭配重點(diǎn)在于上拉的時候， DependentView 會先折疊到最小高度，然后事件全部交給 ScrollView 。那下拉的時候就是當(dāng) ScrollView 滑動結(jié)束，才開始 DependentView 的滑動事件。
exitUntilCollapsed.gif
6. scroll|enterAlways|snap
這個 snap 就是在上面的基礎(chǔ)上多了一個回彈的效果,當(dāng) DependentView 正在滑動，此時手指離開屏幕時， DependentView 會自動移動到離自己較勁的終點(diǎn)或者始點(diǎn)。效果如下:
snap.gif
上面的屬性完全可以像第四種情況疊加使用，至于效果自己嘗試了了才能感覺到它的奧妙之處。
8、轉(zhuǎn)場動畫
交互有了，現(xiàn)在看是添加點(diǎn)擊跳轉(zhuǎn)效果了。咱們之前跳轉(zhuǎn)動畫都是在 startActivity 之后調(diào)用 overridePendingTransition 方法，傳入進(jìn)入和退出的動畫實(shí)現(xiàn)跳轉(zhuǎn)動畫。 Android 5.0 提供了強(qiáng)大的轉(zhuǎn)場動畫，給每個 item 賦予了生命，跳轉(zhuǎn)時，仿佛每塊布局都參與了這次搬遷大運(yùn)動。
使用時，需在 setContentView() 之前加上
window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)跳轉(zhuǎn)時候這樣寫:
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(activity).toBundle())跳轉(zhuǎn)的界面設(shè)置轉(zhuǎn)場動畫或者出場動畫：
window.enterTransition = Explode()
window.exitTransition = Slide()為了看出效果我設(shè)置了2s的延遲：
Transition.gif
9、Toast、SnackBar和AlertDialog
基本的界面寫完了，剩下的就是一些邏輯上的操作啦，比如「提示」。那么 Android 提示分為三種：
- 友好的
Toast(比如網(wǎng)絡(luò)失敗) - 擁有附加行為的提示
SnackBar(比如誤刪信息回撤) - 強(qiáng)制讓用戶做出選擇的
AlertDialg(比如未登錄)
那么這三種的效果是什么呢？
TSA.gif
大概先講這些，有時間再進(jìn)行后續(xù)補(bǔ)充。
Material Design 在「口袋」中的應(yīng)用
其實(shí)在咱們的「口袋貴金屬」項(xiàng)目中也到找到很多 MD 的元素。
首先是點(diǎn)擊的水波紋效果：
ripple.gif
其次是交易圈的滑動交互:
circle.gif
還有就是本人在「口袋」接手的第二個需求，「個人中心」。看一下效果：
personal.gif
嚴(yán)格按照 Material Design 風(fēng)格進(jìn)行開發(fā)，相信一定能開發(fā)出非常漂亮的 APP ！
來自：http://www.jianshu.com/p/1f3761aa1a30
標(biāo)簽： 代碼 谷歌 推廣 網(wǎng)絡(luò)
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
