(轉(zhuǎn)) Material Designer的低版本兼容實現(xiàn)——View & Animation

很長一段時間沒寫東西了静稻,其實是因為最近在研究Material Designer這個東西,這回開的這個系列文章是講如何將Material Designer在程序中實現(xiàn)凶杖。作為一個程序員我們不需要關(guān)心太多的設(shè)計,我們只需要知道設(shè)計師給出的要求我們能否實現(xiàn)就行了。但盆耽,作為開頭,我們還是得來講講這個設(shè)計重點是什么扼菠。
Material Designer
宗旨:讓不同大小不同用途的設(shè)備上擁有同一種設(shè)計風(fēng)格

1.紙張

這種設(shè)計模式大量參考了紙墨的模式摄杂,將空間變得像紙張一樣,而用戶的手指就是毛筆循榆。用戶按到控件上就會產(chǎn)生墨暈效果析恢。這樣的好處是明確的告訴用戶是否點擊了控件,而且還能讓用戶一下子明白控件的布局思路秧饮。畢竟一張一張的紙疊加起來的控件是很容易讓人接受的映挂。這里還有一個詞“引喻”,雖然控件像紙張盗尸,但是它具有變大變小柑船,改變顏色等能力,所以完全可以不用拘泥于現(xiàn)實紙張泼各。

2.深度
新的設(shè)計中希望所有的控件都是現(xiàn)實世界中的隱喻鞍时,比如你按下按鈕,按鈕就應(yīng)該有被按下的狀態(tài),這里就要用到了漣漪(Ripple)效果了逆巍。其實漣漪效果是來表示你手指按上去后墨暈擴散的效果的及塘,下面的圖能很明白的說明這點。

3.動畫
動畫貫穿于Material Designer之中蒸苇,官方文檔中用了很大的篇幅來講解動畫效果磷蛹,希望讓設(shè)計的動畫效果很美觀。但我個人認為為了動畫而動畫是完全不可取的溪烤,比如下面的例子


這里的動畫看起來十分自然和美觀味咳,但是在實際中用戶切換activity是很常見的,如果經(jīng)常出現(xiàn)這個動畫用戶會覺得“很膩”檬嘀,十分不友好槽驶。動畫其實是一個畫龍點睛的東西,萬不可變?yōu)楫嬌咛碜阍蕖D敲吹囝恚蠄D的這個動畫應(yīng)該在什么時候使用呢?用在第一次用戶進入一個新的界面的時候揍异,我們?yōu)榱送癸@這個界面的某種特定功能全陨,就可以讓這個功能的圖標動起來,表現(xiàn)出一個點我試試的效果衷掷。

4.排版
新的設(shè)計里面很在意排版辱姨,里面列出了很多詳細的數(shù)據(jù)來支持我們的設(shè)計。對于留白也有了詳細的說明戚嗅。優(yōu)秀的排班會讓你的應(yīng)用看起來干凈雨涛,優(yōu)雅,這點十分重要懦胞。在之后的文章中我也會多少說到這方面的知識替久。

設(shè)計文檔(不用FQ)
http://design.1sters.com/
http://www.ui.cn/Material/

目錄
Material Designer的低版本兼容實現(xiàn)(二)—— Theme

Material Designer的低版本兼容實現(xiàn)(三)——Color

Material Designer的低版本兼容實現(xiàn)(四)—— ToolBar

Material Designer的低版本兼容實現(xiàn)(五)—— ActivityOptionsCompat

Material Designer的低版本兼容實現(xiàn)(六)—— Ripple Layout

Material Designer的低版本兼容實現(xiàn)(七)—— Rectange Button

Material Designer的低版本兼容實現(xiàn)(八)—— Flat Button

Material Designer的低版本兼容實現(xiàn)(九)—— Float Button & Small Float Button

Material Designer的低版本兼容實現(xiàn)(十)—— CheckBox & RadioButton

Material Designer的低版本兼容實現(xiàn)(十一)—— Switch

Material Designer的低版本兼容實現(xiàn)(十二)—— Slider or SeekBar

Material Designer的低版本兼容實現(xiàn)(十三)—— ProgressBar

Material Designer的低版本兼容實現(xiàn)(十四)—— CardView

留著以后真正用到了再寫的東東
沒寫真的不是因為我懶,主要是東西太多了躏尉,還是請大家參考下面的項目MaterailCenter來看開源庫吧蚯根。自己真正用到的時候就可以拿來用了。
Material Designer的低版本兼容實現(xiàn)(XX)—— EditText & Typography
MaterialEditText:https://github.com/rengwuxian/MaterialEditText(一中國大神做的胀糜,感覺很棒)
Android 5.0更新了Roboto樣式稼锅,不論多大的text,展示起來都會美觀和簡潔僚纷。
添加了一種新的中等高度屬性(android:fontFamily=”sans-serif-medium”) 和新的AppAppearance樣式為了平衡內(nèi)容密度和閱讀的舒適感,實現(xiàn)了推薦的打印式縮放的矩距。比如你可以簡單的通過 android:textAppearance=”@android:style/TextAppearance.Material.Title” 設(shè)置 “Title"風(fēng)格。在舊的版本中可以使用AppCompat support library的樣式: “@style/TextAppearance.AppCompat.Title”.

Material Designer的低版本兼容實現(xiàn)(XX)—— Dialog
MaterialDialog:https://github.com/drakeet/MaterialDialog(國人做的)
L—Dialog:https://github.com/lewisjdeane/L-Dialogs

Material Designer的低版本兼容實現(xiàn)(XX)—— Drawer
L-Drawer:https://github.com/ikimuhendis/LDrawer
MaterialNavigationDrawer:https://github.com/neokree/MaterialNavigationDrawer

Material Designer的低版本兼容實現(xiàn)(XX)—— Animation
Transitions-Everywhere:https://github.com/andkulikov/transitions-everywhere
Android-UI:https://github.com/markushi/android-ui
CircularReveal:https://github.com/ozodrukh/CircularReveal

參考項目:https://github.com/lightSky/MaterialDesignCenter(這個項目就是下面文章作者做的)
參考文章:http://blog.csdn.net/xushuaic/article/details/40627389
http://blog.csdn.net/xushuaic/article/details/40627389

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末怖竭,一起剝皮案震驚了整個濱河市锥债,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖哮肚,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件登夫,死亡現(xiàn)場離奇詭異,居然都是意外死亡允趟,警方通過查閱死者的電腦和手機恼策,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來潮剪,“玉大人涣楷,你說我怎么就攤上這事】古觯” “怎么了狮斗?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長弧蝇。 經(jīng)常有香客問我碳褒,道長,這世上最難降的妖魔是什么看疗? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任沙峻,我火速辦了婚禮,結(jié)果婚禮上两芳,老公的妹妹穿的比我還像新娘摔寨。我一直安慰自己,他們只是感情好盗扇,可當(dāng)我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布斯议。 她就那樣靜靜地躺著夺脾,像睡著了一般。 火紅的嫁衣襯著肌膚如雪糕韧。 梳的紋絲不亂的頭發(fā)上翼闹,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天斑鼻,我揣著相機與錄音,去河邊找鬼猎荠。 笑死坚弱,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的关摇。 我是一名探鬼主播荒叶,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼输虱!你這毒婦竟也來了些楣?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎愁茁,沒想到半個月后蚕钦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡鹅很,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年嘶居,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片促煮。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡邮屁,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出污茵,到底是詐尸還是另有隱情樱报,我是刑警寧澤,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布泞当,位于F島的核電站迹蛤,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏襟士。R本人自食惡果不足惜盗飒,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望陋桂。 院中可真熱鬧逆趣,春花似錦、人聲如沸嗜历。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽梨州。三九已至痕囱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間暴匠,已是汗流浹背鞍恢。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留每窖,地道東北人帮掉。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像窒典,于是被迫代替她去往敵國和親蟆炊。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,506評論 25 707
  • afinalAfinal是一個android的ioc瀑志,orm框架 https://github.com/yangf...
    passiontim閱讀 15,401評論 2 45
  • “我知道大家覺得我個子很矮盅称,年紀又小肩祥,不配當(dāng)市長∷跸ィ”面對質(zhì)疑混狠,市長輕輕一笑,“就像所有的人類都覺得疾层,我們老鼠太小将饺,...
    唐路小鎮(zhèn)閱讀 178評論 3 9
  • 問題 本地使用maven編譯和運行時一切都正常,但是通過ci的方式痛黎,編譯予弧、打包、發(fā)布到部署環(huán)境湖饱,運行時拋出了一條顯...
    lambeta閱讀 11,131評論 0 8
  • (本故事純屬虛構(gòu)如有雷同純屬巧合) 好像圣耙锤颍克蘇佩里遇到小王子,我遇到丸子小朋友的時候是我最傷心的時候井厌。 丸子小朋...
    馨馨閱讀 381評論 0 1