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