文字保護沙-Material Designw

標籤：

　　Ok，關於這個Material Design 都快被說爛了，他被開發人員越來越熟悉的程度，卻與市場上的單薄身影形成了鮮明的對比，以至於每當我提及Material Design時就像祥林嫂附身一樣。

　　有些人說，MD裡有些看起來很泛，告訴你一個絕招，如果你是一個獨立開發人員，或者你的app對UI的要求相對較低，又或者你身邊沒有UI資源，你完全可以按照MD裡的規範COPY一個相對看起來會很順眼的應用，甚至完爆所謂的UI設計出的low設計。

　　今天，給大家介紹個乾貨，MD的官網地址就不粘貼了，有的自會有，沒有的，你也看不了（要FQ），給個中文版的，感謝這些英文大牛（雖然反應的有的不貼切），真心感謝，人要有感恩的心，地址如下：http://design.1sters.com/。

　　乾貨來了，文字保護紗-protection scrims，紗是紗布的紗，不是沙子的沙，附上地址：http://wiki.jikexueyuan.com/project/material-design/style/imagery.html

　　配個圖更好說明

　　

 

　　請注意暱稱這一欄，背景有一段是過度色，這部分過度色的作用就是文字保護紗，有的時候在設計中會發現由於背景色彩的不確定性，會導致浮在上面的文字沒有很好的對比，為了保護文字的可讀性，文字保護紗是這種設計感念便應用而生

　　這是我最近做的一款應用，我就是屬於那種上面說的獨立APP開發人員，沒有什麼好的UI資源，完全自己參考MD設計，完全自給自足，但是對於一個程式員，是不是不要要求太苛刻了呢，呵呵。

　　下面我就寫一下如何通過程式碼實現這個文字保護紗，不需要設計切圖哦，這多省錢。

 

　　必須是drawable

　　scrim_bottom.xml

　　

　　<?xml version="1.0" encoding="utf-8"?>
　　<shape xmlns:android="http://schemas.android.com/apk/res/android">
　　<gradient
　　　　android:angle="90"
　　　　android:startColor="@color/translucent_scrim_bottom"
　　　　android:centerColor="@color/translucent_scrim_bottom_center"
　　　　android:endColor="@android:color/transparent"/>
　　</shape>

　　很簡單對不對？就是一個漸層而已，那麼關鍵是漸層色值的選取，我引用一下原文：

　　暗紗(dark scrims)理想的透明度應當在 20％-40％ 之間,亮紗(light scrims)理想的透明度應當在 40％-60％ 之間，都要視具體內容來定。

　　我們知道在Android中表示顏色是用16進位值來表示，比如白色就是#ffffff，六位對不對，那麼如果給白色加透明度，就是在在開頭加上2位來表示透明度，前兩位：00表示完全透明，ff表示完全不透明，比如#33ffffff，有了透明度的色值就是八位的，對不對？

　　暗紗，就是黑色的20%-40%之間，我們將這個值換算成透明度色值（這個就是某些做UI的都不知道怎麼算呢，確切的說沒有這個概念，嘿嘿），那麼計算公式如下：

　　255 * % 轉換 16進位即可，例如要20%的透明度， 255 * 20% = 51， 51轉換為16進位為33。那麼一個20%透明度的黑的寫法為#33ffffff。

　　那麼計算公式會了，我們就可以按照自己的需求來定製透明度了，如果你的UI只會告訴你百分比，你也會自己計算的不是嗎？

　　數值我就不黏貼了，因為在實際的使用中20%到40%的百分比起不到很到的效果，要說明一點，不要照本宣科，要靈活運用，體會精神！

　　

　　

文字保護沙-Material Designw