Android – 單色漸層效果的改良 – Gradient Scrims

本篇是根據 +Roman Nurik 在 2014/11/24 發佈的一篇 G+ 而來。看到他發文後,起了好奇心,就根據他提出的方法嘗試著實作,並將之排列呈現,直接從視覺上做個比較。

他在 G+ 的發文中提出一個做法,改良原本看起來有點單調的漸層,改變線性到三次項的梯度呈現,使之看起來更加順眼,而將之定名為「Gradient Scrims」。然後,本篇的呈現原則上還是在 Android 5 以上的版本可以看到最佳效果哦 😉

先看到結果,如下圖:左邊是我們平常的使用習慣,右邊是改變做法的呈現。

gradient scrims

 

原則上,我們過去在 Android 開發的漸層處理,就是用 drawable 來實作之,以本範例來說,drawable 的程式碼如下:

口語來說,就是定義了一個由藍到透明的漸層方形圖,並將之轉向 90 度,好讓藍色的部份可以如上左圖般,像是從 navigation bar 延伸上去的顏色。

這樣的漸層過去也就是被設定在該文字區塊中,也就像本圖例中的樣子,

而這樣是一個線性的呈現,看起來也比較僵化點,所以 Roman 提出了一個做法,將這條曲線從線性改成三次曲線,同時,將這個這個漸層文字區塊擴張到這個畫面。這個效果的程式碼是即將被使用在 Muzei 中的 ScrimUtil(撰文的這個時間點還未被使用)。

而 Scrim 的使用方式大至上如下:

bottom 是一個全畫面的 layout 元件,使用 makeCubicGradientScrimDrawable 這個函式來計算,我們要在這個漸層中分出幾個梯度出來。也許就是因為這個梯度效果看起來像是紡織布的樣子,所以才被 Roman 定名為 Gradient Scrim 吧。至於要分成多少梯度就全看大家的需求嘍。

最後下方的三張圖,左邊跟中間的兩張圖,都是採用了 Gradient Scrim 的方式呈現漸層。中間那張主要是拿掉了上面的漸層效果,好跟右邊全畫面的線性漸層做個比較

gradient scrims neo

 

補充:下方這三張在中間插入了另一個介面設定,左邊是原線性的處理方式;右邊是全面的 gradient scrims 介面;

gradient scrims sample 2

上圖新加入的中間那張是根據文字區塊的大小,再加上 padding 的高度,讓漸層更聚焦在該區塊中。

 

不知道各位比較喜歡哪種呢 🙂

 

本部落格採用創用CC 姓名標示-非商業性-禁止改作 3.0 台灣 授權條款授權,如欲轉載請記得註明「莫希爾(Mosil) 手札

 



Loading Facebook Comments ...

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *