Android羣英傳知識點回顧——第十二章:Android5.X新特性詳解


  • 12.1 Android5.X UI設計初步

    • 12.1.1 材料的形態模擬

    • 12.1.2 更加真實的動畫

    • 12.1.3 大色塊的使用

  • 12.2 Material Design主題

  • 12.3 Palette

  • 12.4 視圖與陰影

  • 12.5 Tinting和Clipping

    • 12.5.1 Tinting(着色)

    • 12.5.2 Clipping(裁剪)

  • 12.6 列表與卡片

    • 12.6.1 RecyclerView

    • 12.6.2 CardView

  • 12.7 Android過渡動畫

  • 12.8 Material Design動畫效果

    • 12.8.1 Ripple效果

    • 12.8.2 Circular Reveal

    • 12.8.3 View state changes Animation

  • 12.9 Toolbar

  • 12.10 Notification

    • 12.10.1 基本的Notification

    • 12.10.2 摺疊式Notification

    • 12.10.3 懸掛式Notification

    • 12.10.4 顯示等級的Notification


轉眼間,安卓7.0已經出了,而我還在學習5.0的知識,此刻的心情是藍瘦、香菇,看來得加把勁了,這篇文章較長,不過有很多實例的動畫確實很好看,今年是個UI火熱的一年,掌握了這些動畫,可謂是你的看家本領,也是你進階的一部分

Android5.X系列開始使用新的設計風格Material Design

Google通過模擬自然界的形態變化、關線與陰影、紙與紙之間的空間層級關係,帶來一種真實的空間感

Material Design中採用大量高飽和、適中亮度的大色塊來突出界面的主次

希望瞭解更多的Material Design設計風格的讀者可以訪問網站:https://www.google.com/design/#resources

Material Design提供默認的三種主題

同時也提出了Color Palette的概念,讓開發者自己設定系統區域的顏色

可以通過使用自定義Style來創建自己的Color Palette顏色主題

Android5.X使用Palette來提取顏色,從而讓主題能夠動態適應當前頁面的色調

Android內置了幾種提取顏色的種類:

  • Vibrant(充滿活力的)

  • Vibrant dark(充滿活力的黑)

  • Vibrant light(充滿活力的白)

  • Muted(柔和的)

  • Muted dark(柔和的黑)

  • Muted light(柔和的白)

使用Palette需要在Dependencies中添加依賴:

這這可以給Palette傳進一個Bitmap對象,並調用它的Palette.generate()靜態方法或者Palette.generateAsync()方法創建一個Palette

下面例子演示如何通過加載圖片的柔和色調來改變狀態欄和Actionbar的色調:

使用書上源碼會出現空指針錯誤,我們稍微把程序修改一下,查看效果圖:

Material Design最重要的特點就是擬物扁平化

Android5.X在以外的View中只有x和y的方向上添加了z方向,View的z值由兩部分組成:

通常可以在XML佈局文件中設置View的視圖高度

下面通過實例演示不同視圖高度的效果:

在程序中也可以用代碼變換視圖高度:

通常和還可以用屬性動畫來改變視圖高度:

Android5.X提供了兩個對操作圖像的新功能:Tinting和Clipping

下面有例子說明,注意tint和tintMode屬性:

效果圖:

使用Clipping,首先需要使用ViewOutlineProvider來修改outline,然後再通過setOutlinProvider將outline作用給視圖

下面通過例子理解Clipping:

在代碼中:

效果圖:

關於這章,可以在我博客上已經寫過了,那麼就不再多寫了

傳送門:

  • Android基礎控件——RecyclerView實現拖拽排序側滑刪除效果

  • Android基礎控件——CardView的使用、仿支付寶銀行卡

在Activity之間的跳轉中,通過overridePendingtransition(int inId,int outId)這個方法給Activity添加一些切換動畫,效果也是差強人意

Android5.X提供了三種Transition類型的動畫:

  • 進入:一個進入的過渡動畫決定Activity中的所有視圖怎麼進入屏幕

  • 退出:一個退出的過渡動畫決定Activity中的所有視圖怎麼退出屏幕

  • 共享元素:一個共享元素過渡動畫決定兩個Activity之間的過渡,怎麼共享他們的視圖

其中,進人和退出效果包括:

  • explode(分解)一一從屏幕中間進或出,移動視圖

  • slide(滑動)——從屏幕邊緣進或出,移動視圖

  • fade(淡出) 一一通過改變屏幕上視圖的不透明度達到添加或者移除視圖

共享元素包括(簡單的說ActivityA的指定的View不會消失,帶着View跳轉到ActivityB中):

  • changeBounds——改變目標視圖的佈局邊界

  • changeClipBounds——裁剪目標視圖邊界

  • changeTransfrom——改變目標視圖的縮放比例和旋轉角度

  • changeImageTransfrom——改變目標圖片的大小和縮放比例

這裏比如ActivityA跳轉到ActivityB,運用這三種過渡動畫,則在ActivityA中修改:

而在ActivityB,只需要設置以下代碼:

或者在ActivityB的樣式文件設置如下代碼:

那麼接下來可以設置進入ActivityB的動畫效果:

或者是設置離開ActivityB的動畫效果:

下面是共享元素的使用,首先在ActivityA中設置共享元素的屬性:

同時在ActivityB中設置相同的共享元素的屬性:

在代碼中使用共享元素,首先是單個共享元素:

或者一個視圖中有多個共享元素,通過Pair.create()來創建多個共享元素:

Android5.X切換動畫例子……見經典代碼回顧案例一

無知識點

Ripple效果:點擊後的波紋效果,可以通過代碼設置波紋背景

下面通過例子來演示一下這兩個效果:

效果圖:

同樣的,也可以通過XML來聲明一個ripple,然後在佈局文件中使用:

效果圖:

這個動畫效果具體變現爲一個View以圓形的形式展開,揭示出來,通過ViewAnimationUtils.createCircularReveal()來創建動畫,代碼如下:

RevealAnimator的使用特別簡單,主要就是幾個關鍵的座標點:

  • centerX 動畫開始的中心點X

  • centerY 動畫開始的中心點Y

  • startRadius 動畫開始半徑

  • endRadius 動畫結束半徑

接下來我們來看一下例子,瞭解下RevealAnimator的使用,首先用XML創建一個圓和方形:

然後在佈局文件中使用這兩個圖形:

主程序:

效果圖:

  • StateListAnimator:視圖動畫效果,以前的Selector用來修改背景達到反饋效果,現在支持Selector使用動畫效果

在XML定義一個StateListAnimator,添加到Selector中:

在佈局文件中直接使用:

特別要注意:Animator是要開啓的,所以必須在主代碼中使用AnimatorInflater.loadStateListAnimator()方法,並且通過View.setStateListAnimator()方法分配到視圖中


  • animated-selector:同樣作爲一種狀態改變的動畫效果Selector

首先得有一套狀態變換圖:

然後在XML中定義這些圖片組合:

最後在主程序中使用即可:

效果圖:

Toolbar與ActionBar最大的區別就是Toolbar更加自由、可控,這也是Google逐漸使用Toolbar替代Actionbar的原因,使用Toolbar必須引入appcompat-v7包,並設置主題爲NoActionBar,使用以下代碼進行設置:

Toolbar的使用……見經典代碼回顧案例二

Android5.0對Notification進行了優化:

  • 長按Notification可以顯示消息來源

  • 鎖屏狀態下,可以看到Notification的通知

基本的Notification……見經典代碼回顧案例三

摺疊式Notification……見經典代碼回顧案例四

懸掛式Notification……見經典代碼回顧案例五

Notification分爲三個等級:

  • VISIBILITY_PRIVATE:表明只有當沒有鎖屏的時候會顯示

  • VISIBILITY_PUBLIC:表明在任何情況下都會顯示

  • VISIBILITY_SECRET:表明在pin、password等安全鎖和沒有鎖屏的情況下顯示

設置Notification的等級非常簡單,只需在案例三四五增加一句:

同時,Notificatio還提供了其他方法:

  • 設置Notification背景顏色

  • 設置Notification的category接口,用來確定Notification的顯示位置

分別看下ActivityA和ActivityB的佈局文件,loving you注意transitionName在哪個View:

分別看下ActivityA和ActivityB的Activity文件:


記得先將主題設置爲NoActionBar主題,在佈局中聲明ToolBar

在Menu文件夾中創建一個Menu的XML文件

在代碼中使用

修改一下佈局,實現Toolbar側滑菜單

在主代碼中實現:





經典回顧×××

github:https://github.com/CSDNHensen/QunYingZhuang

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章