ANDROID – 單色漸層效果的改良 – GRADIENT SCRIMS（转）

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

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

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

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

 

 

1 2 3 4 5 6 7 8 9 10 11

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">   <item>     <shape android:shape="rectangle">       <gradient android:startColor="@color/primary_dark"         android:endColor="@android:color/transparent"         android:angle="90"         />     </shape>   </item> </selector>

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

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

 

 

1 2 3 4 5 6

<LinearLayout   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:background="@drawable/gradlient_background"   ...

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

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

 

 

1 2 3 4 5 6 7 8

if(Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN) {   View bottom = findViewById(R.id.view_base_bottom);   bottom.setBackground(     ScrimUtil.makeCubicGradientScrimDrawable(      getResources().getColor(R.color.primary_dark), //顏色      8, //漸層數      Gravity.BOTTOM)); //起始方向 }

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

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

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

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

 

 

1 2 3 4 5 6

<LinearLayout   android:id="@+id/view_base_bottom"   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:paddingTop="@dimen/gradient_scrim_padding" ...

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