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"
...
|
不知道各位比較喜歡哪種呢 
