開始
現在各種應用的UI越來越絢麗,連Ubuntu都開始注意美觀了。在你做完某個客戶端程序的時候,總會有人跳出來要你做一個好看的UI。
過多引入圖片帶來的問題
對於大公司來說,一般都有自己的UI庫和配套的開發工具。而對於一些小公司來說,想讓界面變得更加的漂亮,就不得不加入一張又一張的圖片。
過多引入圖片會帶來很多缺點,使你的應用變得笨重。
1. 很多時候,圖片在內存中比在硬盤中占用更多空間。(我說很多時候,不是全部。因為圖片在內存中不是壓縮的)
2. 處理不好,會嚴重拖累繪制效率。
3. 增加應用程序啟動時間。(這個其實還是比較明顯的,只不過現在輕便的應用越來越少,大家不注意罷了。 把一個華麗界面改成系統默認控件,啟動他,你真的會獲得驚喜)
4. 增加發行包的大小。(這條是湊數的)
一個簡單的例子
這里用簡單的按鈕控件舉例, 用cocoa舉例,因為cocoa的繪圖工具箱非常方便。
下面這個按鈕最少要用2張圖片:正常狀態和鼠標按下狀態。 如果要加鼠標懸浮效果的話,還要多一張

其實這個按鈕可以簡簡單單的用代碼繪制出來,
1. 一些參數
NSSize shadowOffset;
NSColor* shadowColor;
CGFloat shadowRadius;
NSColor* borderColor;
CGFloat borderWidth;
CGFloat cornerRadio;
NSColor* buttonColor;
2. 計算按鈕漸變色
這里@selector(buttonColorStart:) 和 @selector(buttonColorEnd:) 其實就是在buttonColor 的空間坐標系中進行位移, 計算出漸變的起始顏色和結束顏色
NSColor* startColor = [self buttonColorStart:buttonColor];
NSColor* endColor = [self buttonColorEnd:buttonColor];
3. 陰影
NSShadow* shadow = [[NSShadowalloc] init];
[shadow setShadowColor: [shadowColor colorWithAlphaComponent: 0.02]];
[shadow setShadowOffset: shadowOffset];
[shadow setShadowBlurRadius: shadowRadius];
4. 繪制按鈕
這部分代碼才是真正的繪制代碼,在OC的@selector(drawRect:)或這WIN的WM_PAINT中實現
NSBezierPath* roundedRectanglePath = [NSBezierPath bezierPathWithRoundedRect: bounds xRadius: cornerRadio yRadius: cornerRadio];
[NSGraphicsContextsaveGraphicsState];
[shadow set];
CGContextBeginTransparencyLayer(context, NULL);
[gradient drawInBezierPath: roundedRectanglePath angle: 90];
CGContextEndTransparencyLayer(context);
[NSGraphicsContextrestoreGraphicsState];
[borderColor setStroke];
[roundedRectanglePath setLineWidth: borderWidth];
[roundedRectanglePath stroke];
最終效果:
樣子和上圖還是有差別的,因為那些參數都是我隨便配的。 細微調一下,便可以得出你想要的效果。
更復雜的控件
也許你會覺得按鈕太簡單了。 其實,對於復雜的控件,原理是差不多的。
至今為止,我所做的幾乎所有UI。 其中80%的圖片資源,都是可以繪制的。 而且並不需要消耗過多的開發成本。
貝薩爾曲線
如果你掌握了貝薩爾曲線,那么你至少可以繪制一些簡單的空間。 Win和Mac上都有現成的貝薩爾函數。
如果沒有,或者你要更靈活的實現繪制。 那么去查一下貝薩爾曲線曲線的算法吧,幾個公式而已,很簡單的。
其他算法
一些簡單的渲染、濾波之類的,買本數字圖形學隨便看看。 不用知道那些公式是怎么來的,如何推倒計算。知道干什么的就行。
關於效率
我曾經因為在Win上用GDI+繪制被鄙視過,但其實GDI和GDI+的效率,並沒有那么的明顯。(純屬吐槽,心里不平而已)
關於DirectUI或OpenGL: 有現成的當然好,如果沒有,何必強求呢。 如果一個應用的UI淪落到必須要GPU去渲染,那么太重了
如果你界面重繪控制的很好,不論你用什么做, 都不會出現效率問題。
輔助工具
我在Win和Mac上都寫過一些簡單的UI輔助工具。 雖然做不到所見及所得,但能夠節省更多的時間。如果你打算在一個平台上長期做客戶端開發,這個是必須的。
所謂的磨刀不費砍柴功!!
希望多多的和我交流: liu.yuxi.canaan@gmail.com
到這里, 正文結束了。。。
吐槽
1. 我寫過一些UI,做過UI庫,但我TMD真的不是專業做UI的!!!!!!!
2. 如果你不喜歡某個項目,那么就用圖片吧。 簡簡單單,他好你也好!!!!!!!(腦力的損耗比開發時間更加重要,這個我深有體會)
3. 我更喜歡服務端的項目,真的!
