安卓Material Design(5)

lihenair發表於2015-09-10

在2015年GoogleI/O大會上釋出了Material Design支援庫,使用它設計目標版本在API19以下的material應用瞬間變得十分輕鬆。在這個系列中我們將以RSS閱讀器做為material系列的基礎,並且完全使用新的設計支援庫重寫這個應用。本文中我們將看到設計支援庫的新元件在舊版本Android上如何完美工作。

在看過Vandana ShahIan Lake和Chris Bannes在2015年GoogleI/O上展示的設計支援庫後,我首先好奇這個庫是怎麼在舊版本Android上工作的。我注意到有一頁幻燈片展示了點選Tabayout中一個標籤所呈現的漂亮的漣漪效果,然後想到這個效果不大可能移植到低版本中。我就這個問題詢問過Chris,他十分願意分享一些關於向後相容問題的見解,這些觀點是這篇文章的基礎。

讓我們從首先注意的事情開始——漣漪觸控反饋。我認為很難向後相容的原因是它們是如何渲染的。Lollipop的一個底層改變是渲染執行緒,這個執行緒與標準UI執行緒一起並行工作。渲染執行緒允許動畫(如漣漪效果)有別於其他UI任務,在單獨的執行緒中進行渲染來保證高幀率,使使用者感覺動畫效果十分平滑。通常一個觸控事件將觸發一大堆UI執行緒上的任務(如Activity切換,或更新一個佈局)。因此,在同一個執行緒上處理所有事情將使得漣漪動畫的幀率迅速降低。在Lollipop之前的版本上,由於缺少專用渲染執行緒,使得漣漪效果是不大可能實現

那麼在Lollipop之前版本的的裝置上,觸感反饋是什麼樣的呢?讓我們在Jelly Bean上試試,來看看是什麼效果:

https://www.youtube.com/embed/tjrIG5ITiGA?version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent

棒極了!看一看標籤上的觸感反饋,沒有漣漪效果,但是這確實是正常的Lollipop早先版本的樣式。這有點模糊,這是因為我們主題中為collorControlHighlight引數選擇的顏色(與導航抽屜的選擇狀態共享)——很容易糾正。這是使用者(可能不會)注意到的唯一真正不同。

除了不同的觸控反饋,還有其它的不同麼?實際上還有另一個很細微的區別,但它太細微以至於當你搜尋它的時候也很難發現,這就是FAB上的陰影渲染。Lollipop引入了一些強有力的陰影渲染技術以及elevation和translationZ,而這在低於Lollipop版本上是不可能的。儘管你不知道它,但是陰影渲染相當棒。即使存在解除指觸行為,並且它看起來不錯。

那麼我在更老的Android版本——薑餅API 10上試試會怎麼樣

https://www.youtube.com/embed/ijxjjeT-hDM?version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent

在我們的WebView中,有一些明顯的渲染問題,但這與設計支援庫無關,可以忽略它。

我們看到主要問題是Toolbar和Tabayout中文字顏色是錯誤的。我猜可能是亮主題中沒有darActionBar的概念,因為在API 11蜂巢釋出之前沒有ActionBar的概念。

另一個值得注意的是隨著Snackbar的出現,我們沒有讓FAB起作用。Chris解釋到,因為蜂巢版本前沒有translationY,因此不大可能實現依賴translationY的屬性動畫。

總而言之,結果仍然相當不錯。如這個系列中所見,我們仍然得到了其它美妙的東西,儘管有些方面不支援,行為儘可能優雅降級,結果仍然非常有用。

總而言之,設計支援庫十分強大,並且向我們提供了十分有用的工具集它們既容易使用又完美的向後相容。萬分感謝Chris以及設計支援庫背後的其他成員們。

到這裡我們將結束這個系列,因為我們結束了RSS閱讀器應用中的例子——至少可以說,在應用中使用FAB是脆弱的。不過不用擔心,在後續文章中,我們將探索更多的特性,行為和很酷的東西。下週開始——持續關注。

本文中我們沒有修改任何程式碼,前面文章的原始碼可以在這裡找到。

相關文章