在Material Designer中,色彩再一次被擺到了重要的位置上。官方文檔中竟然給出了500種配色方案進行選擇。就是為了給不同的手機、電視、手表上帶來一直的用戶體驗。
更多用於控制色彩的屬性,可以參考:colorControlNormal.colorControlActivated.colorControlHighlight, colorButtonNormal, colorSwitchThumbNormal, colorEdgeEffect, statusBarColor and navigationBarColor.
AppCompat 為以上功能提供了大量的子集,允許你為Lollipop之前的系統控制色彩。具體可以到compat包中values中colors_material.xml進行查看
一、動態取色
對於這個方法的詳細實現,可以參考這篇: 利用Palette庫來取得圖片中的主要色彩
Palette這個類中提取以下突出的顏色:
Vibrant (有活力)
Vibrant dark(有活力 暗色)
Vibrant light(有活力 亮色)
Muted (柔和)
Muted dark(柔和 暗色)
Muted light(柔和 亮色)
比如有下面這張圖片,我們通過這個類久可以得到圓圈中所示的幾種顏色。
//目標bitmap,代碼片段 Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.kale); Palette palette = Palette.generate(bm); if (palette.getLightVibrantSwatch() != null) { //得到不同的樣本,設置給imageview進行顯示 iv.setBackgroundColor(palette.getLightVibrantSwatch().getRgb()); iv1.setBackgroundColor(palette.getDarkVibrantSwatch().getRgb()); iv2.setBackgroundColor(palette.getLightMutedSwatch().getRgb()); iv3.setBackgroundColor(palette.getDarkMutedSwatch().getRgb()); }
通過這個類我們可以很方便的取得相應的顏色,然后通過代碼動態設置。動態設置主題,或是設置瀑布流中的相片遮罩都很實用。
二、配色方案
基本的顏色要求是飽和度500,對於頂部的工具欄,需要用飽和度700的顏色。還要記得給灰色的文字、圖標和分隔線加上alpha值。
同時,為了有效地傳達信息的視覺層次,應該使用深淺不同的文本。
(1)對於白色背景上的文字,標准alpha值為87%(#000000)。
(2)視覺層次偏低的次要文字,應該使用54%(#000000)的alpha值。
(3)像正文和標簽中用於提示用戶的文字,視覺層次更低,應該使用26%(#000000)的alpha值。
(4)其他元素,比如說圖標和分割線,也應該設置透明度,效果要比純色好,這樣的透明度設置(下圖),能適應任何背景色。而有色背景上的黑白色文本,請參考配色表,來設置透明度,提高對比感。
其實上面得顏色都是#000000, 通過改變透明度來產生上面得效果。上面已經對分割線、隱藏型Text,二級文字,普通文字的透明度做了詳細得說明。以后完全可以參考這個色板。
三、強調色
強調色是用來強調某種操作的,比如開關開啟狀態的顏色或者是懸浮按鈕的顏色就應該用強調色。像是EditText在輸入時,輸入框變色也可以用強調色。這里的強調色在以后我們設置控件的時候會通過常見的backgroundColor,thumbColor進行設置。