减少资源包中的图片,提高效率
开始
现在各种应用的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. 我更喜欢服务端的项目,真的!