Android通知欄微技巧,那些你所沒關注過的小細節

轉載請註明出處:http://blog.csdn.net/guolin_blog/article/details/50945228
本篇文章首發於我的微信公衆號,其實通常情況下我都不會將微信文章再在博客上發表的,因爲我認爲兩者區別比較大。微信文章偏向於短小精煉,畢竟要在手機上閱讀,博客文章則可以寫得更加深入一些,也不怕貼大量的代碼。但是由於這篇文章稍微有點特殊,講的是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模擬器來測試這個功能的。


關注我的技術公衆號,每天都有優質技術文章推送。關注我的娛樂公衆號,工作、學習累了的時候放鬆一下自己。

微信掃一掃下方二維碼即可關注:

        

發佈了120 篇原創文章 · 獲贊 2萬+ · 訪問量 1031萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章