天天看點

Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗

第十一章為什麼不寫,因為我很早之前就已經寫過了,有需要的可以去看

<a href="http://blog.csdn.net/qq_26787115/article/details/50412258">android高效率編碼-第三方sdk詳解系列(二)——bmob後端雲開發,實作登入注冊,更改資料,修改密碼,郵箱驗證,上傳,下載下傳,推送消息,縮略圖加載等功能</a>

這一章很多,但是很有趣,也是這書的最後一章知識點了,我現在還在考慮要不要寫這個拼圖和2048的案例,在此之前,我們先來玩玩android5.x的新特性吧!

android 5.x ui設計初步

android 5.x 新增特性分析

android 5.x開始使用新的設計風格material design來統一整個android系統設計風格,與之前的設計不同,這次的material design設計将android帶來一片全新的高度,同時google在官網推出了新的設計指南,全面的講解了material design的整個實作規範
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
材料的形态模拟是material design中最核心也是改變最大的設計,google通過模拟自然界紙墨的形态變化,光線和陰影,紙和紙之間的空間層次關系,帶來一種真實的感覺
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
好的動畫效果可以非常的有效的指引使用者,暗示使用者并給使用者帶來愉悅的使用體驗,android5.x中大量加入了各種新的動畫效果,讓整個設計風格更加自然,和諧,而各種新的轉場動畫,能更加有效的指引使用者的視覺焦點,不至于因為複雜布局的界面重排而對整體效果産生影響,讓使用者達到一個視覺連貫性
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
material design中用了大量高飽和度,适中亮度的大色塊來突出界面的主次,并一掃android4.x系列holo主題的沉重感,讓界面更加富有時尚感和視覺沖擊力
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
此外,還有更多的設計風格,比如懸浮按鈕,聚焦大圖,無框按鈕,波紋效果等新特性,這裡就不一一列舉了,google在其material design網站上也有
我們先來看看如何使用主題,md一共有三種預設的主題可以設定
效果如圖
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
同時,android5.x提出來color palette的概念,讓開發者可以設定系統區域的顔色,使得整個app的顔色使得app的顔色統一
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
通過如下所示的代碼,可以通過自定義style的方式來建立自己的color palette顔色主題,進而實作顔色的不同風格
看效果
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
在android的版本發展中,ui越來越成為google的發展中心,這次的android5.x創新的使用了palette來提取顔色,進而讓主題能夠動态适應目前頁面的色調,使得整個app的顔色基本和諧統一 android内置了幾種提取顔色的種類

vibrant(充滿活力的)

vibrant dark(充滿活力的黑)

vibrant light(充滿活力的白)

muted(柔和的)

muted dark(柔和的黑)

muted light(柔和的白)

使用palette的api,能夠讓我們從bitmap中擷取對應的色調,修改目前的主題色調,使用palette首先需要在android studio引用相關的依賴
可以通過傳遞一個bitmap對象給palette,并調用它的palette.generate()靜态方法或者palette.generateasync()方法建立一個palette,接下來,就可以使用getter方法來檢索相應的色調,這些色調就是我們在上面清單所列出的色調 我們這裡寫一個小例子,示範如何通過加載的圖檔的柔和色調來改變狀态欄和actionbar的色調,代碼如下
而且,我們可以使用不同的方法擷取不同的色調顔色
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
material design的一個很重要的特點就是拟物扁平化,如果說ios的扁平化設計太過于超前,讓很多人來不及從拟物轉變成扁平,那麼material design則是把ios往回拉了一點,通過展現生活中的材料效果,恰當的使用陰影和光線,配合完美的動畫效果,模拟出一個動感十足又美麗大膽的視覺效果
以往的android view通常有兩個屬性——x和y,而在android5.x中,google為其增加了一個新的屬性——z,對應垂直方向上的高度變化,看圖,我們更加了解
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
在android 5.x中,view的z值由兩部分組成,elevation和translationz(他們都是android5.x新引入的屬性),elevation是靜态的成員,translationz可以在代碼中使用來實作動畫效果,他們的關系
通過下面的代碼,示範了不同視圖高度所顯示的效果,xml代碼
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
在程式中,我們也可以使用代碼改變視圖高度
通常也會使用屬性動畫來為視圖高度改變的時候增加動畫效果
android5.x在對圖像的操作有了更多的功能,下面來看看android5.x的兩個對操作圖像的新功能——tinting(着色) 和 clipping(裁剪)
tinting的使用非常的簡單,隻要在xml中配置好tint和tintmode就可以了,對于配置組合效果,隻需要大家實際操作一下,就能非常清晰的了解處理效果,在下面的代碼中,設定了幾種不同的tint和tintmode效果,xml代碼如下
效果如下
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
tint通過修改圖像的alpha遮罩來修改圖像的顔色,進而達到重新着色的目的,這一功能在一些圖檔處理的app使用起來還是十分的友善的
clipping可以讓我們改變一個視圖的外形,要使用clipping,首先需要使用viewoutlineprovider來修改outline作用給視圖 下面這個例子,将一個正方形的textview通過clipping裁剪成一個圓形的正方形和一個圓,xml代碼如下
邏輯代碼很簡單
我們看下效果
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
在android5.x中将使用了很久的listview做了更新,增加了一個使用友善,效率更高的控件——recyclerview,recyclerview是support-v7中的一個新的元件,是一個強大的滑動控件,viewholder的封裝實作,使用者隻要實作自己的viewholder就可以了,該元件會自動幫你回收服用的每一個item 要使用recyclerview,首先需要在項目中引用依賴
在布局中使用recyclerview與使用listview基本類似,同樣需要一個類似list itemd的布局,在material design中,通常與cardview配合使用,後面我們再講cardview的使用 使用recyclerview的重點和使用和listview一樣,需要使用一個合适的資料擴充卡來加載資料,recyclerview中需要重寫的很多方法都似曾相識,不過recyclerview更加先進的是,它已經封裝好了viewholder,隻要實作功能就可以,,先看adapter
上面就是一個非常簡單卻典型的recyclerview,通過oncreateviewholder将list item的布局轉換成view,并傳遞給recyclerview封裝好的viewholder,就可以将資料和視圖關聯起來了,但是有一點要注意的是,android并沒有給recyclerview增進點選事件,是以我們需要自己寫接口回調,代碼如圖
類似listview的list item視圖
當然,僅僅是性能也是不夠的,讓開發者能夠更加友善的使用才是非常重要的,google在recyclerview中定義了layoutmanager來幫助開發者更加友善的建立不同但的布局,下面的例子就示範如何建立水準和垂直布局,當然,你也可以通過自定義layoutmanager來建立自己的布局,核心代碼如下:
完整代碼:
運作結果
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
cardview曾經開始流行在google+,後來越來越多的app也引入了card這樣的布局方式,說到底,cardview也是一個容器布局,隻是他提供了一種卡片的形式,google所幸提供了一個cardview控件,友善大家使用這種布局,開發者可以設定大小和視圖高度,圓角的角度等,在此之前,我們要添加依賴
同時要添加命名空間
我們舉個例子
運作的效果
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
曾經的android在activity進行跳轉的時候,隻是很生硬的切換,即使通過 overridependingtransition( int inid, int outid)這個方法來給activity增加一些切換動畫,效果也隻是差強人意,而在android5.x中,google對動畫效果進行了更深一步的诠釋,為activity的轉場效果設計了更加豐富的動畫效果 android5.x提供了三種transition類型

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

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

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

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

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

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

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

共享元素包括

changebounds——改變目标視圖的布局邊界

changeclibounds——裁剪目标視圖邊界

changetransfrom——改變目标視圖的縮放比例和旋轉角度

changeimagetransfrom——改變目标圖檔的大小和縮放比例

可以發現,在android5.x上,動畫效果的種類變得更加豐富了 首先來看看普通的三種activity過渡動畫, 要使用這些動畫非常簡單,例如從activitya轉到activityb,隻需要在activitya中将基本的startactivity(intent)方法改為如下代碼即可
而在achvityb中,隻需要設定下如下所示代碼
或者在樣式檔案中設定如下所示代碼
那麼接下來就可以設定進人/退出activityb的具體的動畫效果了, 代碼如下所示
而對于共享元素的動畫效果.可以借用開發者網上的一張圖
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
要想在程式中使用共享元素的動畫效果也很簡單,首先需要在他的activity1布局中設定共享元素,增加元素代碼
同時在activity2中,也增加一個相應的共享元素屬性,如果隻要一個共享元素,那麼在activity1中可以這樣寫
使用的參數就是前面普通動畫的基礎上增加了共享的的view和前面取的名字,如果由多個共享元素,那麼我們可以通過
來建立多個共享元素
下面我們通過一個具體的執行個體來示範一下過渡動畫,我們從bactivity跳轉到cactivity bactivity的xml
實作邏輯
再看cactivity的xml
實作邏輯就更簡單了
我們運作一下就可以看到自己想要的效果了
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
動畫已經成了ui設計中一個非常重要的一個組成部分,在android5.x的material design中,更是使用了大量的動畫效果,同時google官方文檔也有詳細的說明
在android5.x中,material design大量的使用了ripple動畫,即點就博文效果,可以通過如下代碼設定波紋的背景
波紋有邊界是指波紋被限制在控件的邊界中,而波紋超出邊界,則是不會受到控件的限制,以圓形發散出去,我們做一個示範 xml
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
同樣的,我們可以寫一個xml檔案來實作ripple效果
使用方法直接設定背景就可以了,運作效果
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
這個動畫效果是在google i/o 大會上示範了好多次的,具體變現為一個view以圓形的形式展開,揭示出來,通過viewanimationutils.createcircularreveal()來建立動畫,代碼如下:
revealanimator的使用特别簡單,主要就是幾個關鍵的坐标點

centerx 動畫開始的中心點x

centery 動畫開始的中心點y

startradius 動畫開始半徑

endradius 動畫結束半徑

我們還是通過一個執行個體去示範一下
邏輯代碼
這樣我們就可以去實作了
Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗Android群英傳筆記——第十二章:Android5.X 新特性詳解,Material Design UI的新體驗
在android5.x中,系統提供了視圖與狀态改變來設定一個視圖狀态的切換

staetlistanimator

staetlistanimator作為視圖改變時的動畫效果,通常會使用seletor來進行設定,但是以前我們設定seletor的時候,通常是修改他的背景來達到回報的效果,但是再現在android5.x中就不需要這樣了,可以使用動畫來實作,我們用小例子來具體看看怎麼實作的吧

在xml中定義一個staetlistanimator

然後直接在布局中設定即可

animated-selector

animated-selector同樣是一個改變動畫效果的動畫,

這個效果不講,沒素材

toolbar和actionbar最大的差別就是toolbar更加的自由,可控,這也是google在逐漸使用toolbar來取代actionbar的原因,要使用toolbar就必須引用依賴
同樣的,我們要設定主題
然後在xml中
在代碼中擷取
而menu都是一樣的,就不寫了,這樣一個title就寫出來了

![這裡寫圖檔描述](http://img.blog.csdn.net/20160502113126051)

我們再來具體實作以下,我們加入一個側滑的效果,xml代碼
然後我們設定一下

![這裡寫圖檔描述](http://img.blog.csdn.net/20160502114128620)

notification作為一個時間觸發性的互動提示接口,讓我們獲得消息的時候,在狀态欄,鎖屏界面顯示相應的消息 google在android5.x中,又進一步的改進了通知欄,優化了notification,在5.x裝置上一個标準的通知是這樣的,長按是下圖

![這裡寫圖檔描述](http://img.blog.csdn.net/20160502115934511)

長按會顯示消息的來源 notification會有一個從白色到灰色的動畫切換效果,最終顯示發出這個通知的調用者,而在我們的鎖屏界面,也可以看到

![這裡寫圖檔描述](http://img.blog.csdn.net/20160502120144877)

我們分四重境界來講解在android5.x下使用notification
通過notification.builder建立一個notification的builder,代碼如下
這個與alertdialog的使用方法非常的相似,接下來,要點選notification執行一個intent,由于這個intent的不是立即執行,而是使用者觸發的,是以用pendingintent來完成這個延時操作,代碼如下:
這樣點選pendingintent 之後就會觸發時間了,我們也可以給他增加屬性
通過下面的代碼釋出通知欄
這樣我們很輕松的就建立了一個通知欄

![這裡寫圖檔描述](http://img.blog.csdn.net/20160502121915412)

折疊式notification也是一種自定義視圖的notification,常常用于顯示文本,他擁有兩個視圖狀态,我們可以用remoteview來幫助我們建立一個notification視圖,代碼如下:
其中notification的布局是這樣的
通過如下代碼,可以講一個視圖指定為notification正常狀态下的視圖
另一個展開的代碼
奉獻完整代碼
懸挂式notification是android5.x新增加的方式,google希望通過這個方式來給使用者帶來更好的體驗,這種被稱為headsup的notification方式,可以在螢幕的上方産生notification而不打擾使用者的操作 在android sample中,google給我們展示了這個項目,代碼如下:
效果

![這裡寫圖檔描述](http://img.blog.csdn.net/20160502131330033)

最後一重境界也就是新加入的一種模式,顯示登記,具體分三級

visibility_private -沒有鎖屏的時候顯示

visibility_public - 表明在任何情況下都會顯示

visibility_secret - 表明在pin,password等安全鎖和沒有鎖屏的情況下顯示

這一章自我感覺沒啥寫的,就一頁,跳過吧,很少的知識點 群英傳到這裡,也就沒有知識點可以将了,最後十三章,是兩個小項目,本來不準備講的,不過看到這個拼圖還是可以講一講的,就準備寫了,2048我很早之前就寫過,這裡就不重複了

繼續閱讀