[郭霖]Android 通知欄的微技巧

今天是周二，感覺也不能每天都發大家投稿的內容，總要適當發一些我自己的文章（實際上是稿件不夠了，大家快來多多來投稿呀！）。其實微信上的技術文章真的很好寫，不需要太高的技術難度，也不需要大量的代碼，只要能將一個有你獨立思維的技術點講講清楚，就是一篇很好的文章了。

上周二的時候我發了一篇標桿文章，講解的是deep links技術，通篇可能十行代碼都不到，但是卻很有技術價值，也非常適合在微信上閱讀。那么今天我就再來寫一篇標桿文章，講一講Android通知欄的微技巧，希望能夠給各位投稿作者們帶來一些參考價值。

對于通知欄的使用，Android各個版本其實都有比較大的調整，包括即將發布的Android 7.0版本，通知欄功能上又要有大動作。那么新版本的通知欄API無法兼容老系統這就會是一個很頭疼的問題。

為此Android在appcompat-v7庫中提供了一個NotificationCompat類來處理新老版本的兼容問題，我們在編寫通知功能時都使用NotificationCompat這個類來實現，appcompat-v7庫就會自動幫我們做好所有系統版本的兼容性處理了。一段基本的觸發通知代碼如下所示：

NotificationManager manager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
NotificationCompat.Builder builder = new NotificationCompat.Builder(context);
Notification notification = builder
.setContentTitle("這是通知標題")
.setContentText("這是通知內容")
.setWhen(System.currentTimeMillis())
.setSmallIcon(R.mipmap.ic_launcher)
.setLargeIcon(BitmapFactory.decodeResource(
  getResources(), R.mipmap.ic_launcher))
.build();
manager.notify(1, notification);

可以看到，這里只是把我們平時使用的Notification.Builder改成了NotificationCompat.Builder而已，其他用法都是一模一樣的，這樣我們的通知就具備各種Android版本的兼容性了。

注意看一下我們給通知設置的圖標，一個小圖標、一個大圖標，都是使用的R.mipmap.ic_launcher這張圖。其實很多app都使用的這種做法，即直接拿應用程序的icon來作為通知的圖標，好像這樣看上去也挺合理的。

現在我使用Android 6.0系統的Nexus 5手機運行這個程序，并觸發上面那段通知邏輯，效果如圖下圖所示：

可以看到，通知欄上彈出了一個通知圖標。然后我們將通知欄下拉展開，效果如下圖所示：

效果好像還不錯的樣子。但實際上，我現在是將項目的targetSdkVersion指定成了21以下，即低于5.0系統。如果將targetSdkVersion指定成21或者更高的話，結果可能就不樂觀了：

defaultConfig {
    ....
    targetSdkVersion 23
}

這里我們將targetSdkVersion指定成了23，然后重新運行程序并觸發圖標邏輯，效果如下圖所示：

恩？這是什么鬼，怎么通知圖標變成白白的一個圓了。下拉之后的大圖效果如下：

好像下拉之后的大圖還算正常，不過大圖的右下角也有一個白白的圓。

這到底是為什么呢？實際上，Android從5.0系統開始，對于通知欄圖標的設計進行了修改。現在Google要求，所有應用程序的通知欄圖標，應該只使用alpha圖層來進行繪制，而不應該包括RGB圖層。

說的好像很玄乎，什么叫作只使用alpha圖層來進行繪制呢？其實通俗點來講，就是讓我們的通知欄圖標不要帶顏色就可以了。

恩？不帶顏色！那圖標還怎么設計？但這就不是我們程序員應該考慮的問題了，而是應該交給項目的UI設計師來想辦法，但我們需要將這個設計需求清楚地告訴設計師，因為他們通常并不知道Google的各種標準和要求。

那么我們來參考一下別的程序都是怎么設計通知欄圖標的，這是支付寶的通知欄圖標：

下拉通知之后的效果是這樣的：

然后再看一下網易新聞的通知欄圖標：

 

下拉通知之后的效果是這樣的：

可以看出，它們的通知欄小圖都是沒有RGB色的，圖標是只有白色一種顏色，然后借助alpha圖層來繪制出一個logo的樣式。

因此，按著這種設計要求，我將項目的通知欄圖標改成了這個樣子：

這張圖只用于替換通知的小圖部分，大圖仍然還是用原來的那樣圖就可以了。現在重新運行一下程序，效果如下圖所示：

這樣看上去效果就好多了吧？然后下拉通知欄之后的效果如下圖所示：

這里我們來仔細觀察一下這個下拉后的大圖，其實前面大家應該也已經注意到了，只不過一直沒提，在大圖標的右下角，還有一個比較小的圓圈，在這個圓圈中嵌套著我們設置的小圖標。

這個功能是系統自動附加的一個功能，并不需要我們進行任何的代碼設置，可以觀察一下，支付寶、網易新聞也都是有這個功能的。但是如果我們再看仔細一點，你會發現網易的圖標更好看一些，因為系統給右下角的這個小圓圈默認是設置成灰色的，和我們的整體色調并不搭配，而網易則將這個小圓圈改成了紅色，因此總體視覺效果更好。

那么怎樣修改這個小圓圈的顏色呢？其實非常簡單，只需要在NotificationCompat.Builder中再多連綴一個setColor()方法就可以了，如下所示：

Notification notification = builder        ......
        .setColor(Color.parseColor("#EAA935"))
        .build(); 

現在重新運行一下程序，通知欄大圖的具體效果如下圖所示：

怎么樣，現在的效果是不是更棒了？不過我不知道為什么微信會把圖片壓縮的這么模糊，我截的原圖都還是挺清晰的，因此如果大家想要直觀體驗到最佳的視覺效果，最好的辦法還是自己動手試一試。

但是這里我還要給大家提個醒，上面的功能我使用Nexus手機和三星手機都測試過，結果都是正常的，但是使用小米手機測試就比較無語了，MIUI系統直接無視我們設置的大圖和小圖，一律使用應用程序的icon來作為通知欄圖標，所以如果你是使用的小米手機，就測試不出來上述的各種效果了。其他手機的兼容性我還沒有試過，不過不管怎么樣，我們的代碼都是要這么寫的，至于那些定制過的系統該如何去解析展示，那是這些第三方廠商的事情，畢竟我們程序員也是控制不了的。

當然，如果你手上只有小米手機的話，也不要絕望，還是可以使用Android模擬器來測試這個功能的。

via:郭霖