本篇是根據 +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" ... |
不知道各位比較喜歡哪種呢