Android 分享會：Material Design 在 Android 中的應用

時間  2019-11-21
標籤 android 分享 material design 應用 欄目 Android 简体版
原文   原文鏈接

前言

我剛來這個公司的時候，每一個週三都會有分享會，主題自定，分享對象儘可能是面向大衆，一開始以爲不錯，可是到後面發現分享的內容不是那麼有養分，並且積極性不是很高，都是當作任務進行分享。 程序員由於較爲靦腆，分享的人較少，大部分都是客戶部、分析部或者推广部的分享，長此以往，氛圍就比較消極。html

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

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

準備

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

  1. APP準備
  2. 文檔準備
  3. Keynote準備

1、APP準備

項目已經上傳到GitHub上:AndroidMDgithub

運行效果json

MD.gif

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

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

1. 主題

主題是最近很是火的「終結者2:審判日」app

2. 數據

數據是本身在本地寫的json數據，非常尷尬，而後部署到七牛雲上。地址是:WeaponInfoide

3. 語言

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

4. 風格

總體的風格就是我此次分享的主題 Material Desing風格。

2、總體內容結構的準備

在作PPT以前，先把結構搭好，而且把PPT的內容先準備好，到時候直接就能夠複製到PPT中。

總體結構:

  1. 什麼是 Material Design
  2. Material Desing的特色
  3. 從四個特色結合Android的應用剖析
  4. 在個人公司「口袋」項目中的應用

固然內容須要看官方的文檔和其餘資料加上總結才能完成，因此在此感謝一下文章的幫助：

Material Design 學習筆記

Material Design 官網介紹文檔

Material Design 中文介紹

Material Design in Android Developer

3、PPT 的準備

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

若是須要的話，能夠加個QQ發給你。

一、封面

封面

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

二、介紹

介紹.gif

從MD上截取的動畫做爲入口，大概講解一下MD的基礎概念和特色。

三、特色

特色.gif

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

四、風格背景

文字採用圓角+陰影進行包裹，至於高度和圓角效果由於時間緊迫，沒有按照嚴格規範進行設置，若是對這方面有要求能夠參考官網詳細的規範要求。

image.png

五、動畫效果

提及動畫，爲了可以模仿MD的交互，也是現學現賣了一把。

交互.gif

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

3、總結

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

整個分享過程，感受本身就是爲了將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了。

一、主題

一個項目的開始，你得先肯定這個項目的主題顏色是什麼？你可使用谷歌給你提供的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)]

二、BottomNavigationView

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

先看一下效果:

bottomNavigationView.gif

  1. 在menu/下建立菜單文件:

    <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>
複製代碼

  2. 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"/>
複製代碼

  3. 代碼中設置點擊事件

    navigation!!.setOnNavigationItemSelectedListener {}
複製代碼

三、DrawerLayout、NavigationView

和BottomNavigationView相對的，不得不介紹一下NavigationView，這二者都是導航View，後者通常須要配合DrawerLayout實現側滑菜單效果。

請看效果：

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">
            <!-- 主內容 -->
            <FrameLayout
                android:fitsSystemWindows="true"
                android:id="@+id/fl_content"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    
            </FrameLayout>
            <!-- 側滑菜單內容 -->
            <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

四、Toolbar

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

Toolbar做爲早期Android中ActionBar的替代品，定製性和操做性挺高了很多。使用的時候須要設置NoActionBar的主題。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"></style>
複製代碼

五、RecyclerView+SwipeRefreshLayout

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

那若是想實現側滑刪除和長按拖拽的功能怎麼辦呢？RecyclerView原生就支持這些，只須要繼承ItemTouchHelper.Callback的類，並實現它幾個抽象方法便可。

  1. 建立實現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)
     }
 }
複製代碼

  2. 和RecyclerView創建鏈接

    val mItemTouchHelper = ItemTouchHelper(ItemTouchHelperCallback())
 mItemTouchHelper.attachToRecyclerView(mRecyclerView)
複製代碼

實現效果以下：

RecyclerView.gif

六、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：高度(直接影響陰影的大小)

七、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.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必須實現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.Toolbar
        android: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

上面的屬性徹底能夠像第四種狀況疊加使用，至於效果本身嘗試了了才能感受到它的奧妙之處。

八、轉場動畫

交互有了，如今看是添加點擊跳轉效果了。我們以前跳轉動畫都是在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

九、Toast、SnackBar和AlertDialog

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

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

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

TSA.gif

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

Material Design 在「口袋」中的應用

其實在我們的「口袋貴金屬」項目中也到找到不少MD的元素。

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

ripple.gif

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

circle.gif

還有就是本人在「口袋」接手的第二個需求，「我的中心」。看一下效果：

personal.gif

嚴格按照Material Design風格進行開發，相信必定能開發出很是漂亮的APP！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程