减少资源包中的图片,提高效率

 

开始

现在各种应用的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. 我更喜欢服务端的项目,真的!

 

posted on 2013-10-11 14:30  Yuxi Liu  阅读(1469)  评论(8编辑  收藏  举报

导航