Mac平台Retina高分屏开发技术分享

  QQ for Mac V2.1版本支持了Retina,作为国内首个支持Retina高分屏的Mac OS X App,我们希望能够和大家分享一些在Retina支持方面的开发技术心得。欢迎Mac平台的开发朋友们与我们沟通交流。

一、基本概念和思想

1、和iOS的异同

   在系统对高分屏的支持上,Mac OS和iOS基本上是一的:都是两倍的Scale Factor,都是系来完成个Scaling。但Mac OS竟是电脑操作系,与iOS相比,多了以下几个方面的支持:

1)window和screen的关系

2)多示器

3示器分辨率的随更改

2、两种运行模式:Framework-Scaled和Magnified

   在高分屏的Mac中,App有两种运行模式: Framework-Scaled模式和Magnified模式。两种模式的差,在于Backing Store的大小。什么是Backing Store?我的App和示器之,其有一层buffer层这层就是Backing Store。在Framework-Scaled模式下,Backing Store的大小和示器一,而Magnified模式示器的四分之一(长宽二分之一),相当于同尺寸普通屏的大小。

   在Framework-Scaled模式下,因为Backing Store层的大小和示器一,所以我的App可以更精地做视觉处理。而与之相比,Magnified模式其是一个兼容而设计的模式。在Magnified模式下,因为Backing Store层的大小和普通屏一,App是以1x的形式运行,在,即Backing Store示器的转换时,系再把其拉伸到2x。这样,在Magnified模式下的App会保持和普通屏一致的表,当然,也会因拉伸而看上去有点模糊。

   非Cocoa的App只能以Magnified模式运行,而Cocoa App默是以Framework-Scaled模式运行。 如果Cocoa App得自己在Framework-Scaled模式下运行有大体验问题,也可以在程序中将自己成默以Magnified模式运行。 此外,用也可以通程序文件的“介”窗口手更改App的运行模式。

   毫无疑,要在高分屏上有细腻视觉感受,我的程序必运行在Framework-Scaled模式下。

3、Point和Pixel

   什么是Point?苹果的定是用的一个位。在普通屏上,Point和Pixel是一比一的关系,而在高分屏上,它的关系是一比四。点和iOS是一的。

者来,大部分情况下,我根本不需要去考虑Pixel,因程序中用到的坐基本上都是以Point为单位的。在写代码时,我可以这样:世界上根本就不存在高分屏的Mac,新的MacBook Pro其实还是原来的1440*900。这样,我就会都是以Point的方式去考,从而保持程序高分屏和普通屏表的一致性。也是苹果推荐的方式。

   那我什么候才需要考到Pixel呢?当我像素的候。主要有以下几个地方:

1)Core Graphics。也就是,当我用到CG开的API,我需要注意,它的坐大部分是以Pixel为单位的。

2)OpenGL。既然是制,自然要精确到像素

4、DPI和PPI

DPI:Dots Per Inch,每英寸点数,一般用来表示打印机或设备的精度。而在像中,一般使用PPI。PPI:Pixels Per Inch,每英寸像素数,一般用来表示像的精度。

   高分屏的DPI是144,是普通屏的两倍。此外,用系工具截取的片,其PPI也是144,同是普通屏的两倍。

二、支持高分屏,我需要做些什么?

1、们App运行在Framework-Scaled模式下

Cocoa App才能运行在Framework-Scaled模式下,所以于非Cocoa的App,如果要支持高分屏,需要做些修改了。

Cocoa App是以Framework-Scaled模式运行,所以里就不用做任何外的事情了。

2、增加两倍图资

   和iOS一,要支持高分屏,所有片,我都需要在其旁增加一个名字为“一倍名字+@2x”的两倍图资源。原来用数量就比多的程序来,如QQ,设计师的工作量毫无疑是巨大的。不如此,因为Mac窗体大小不像iOS那么一,了防止问题发生,切图时还要注意以下事

   两倍源,其分辨率最好是一倍图严格的两倍;PPI和一倍保持一是72。如果不这样做,不在高分屏上有可能出不符合我们预想的表,普通屏也是会受影响的。是因为这错误有可能会致系判断两倍关系失,从而使普通屏下直接取两倍致界面展示异常。

   如果程序中涉及到片的叠加,那么些用来叠加的片,内容上最好也是格的两倍。个例子,如果一倍中有根线的位置是第三行,那么两倍线的位置应该是第五行和第六行。否,会出在普通屏下对齐片在高分屏下却没有对齐的情况。

3、中的取方法

   要想帮我自适使用一倍和两倍,我最好尽量使用文档推荐的取方法:NSImage的imageNamed:方法和NSBundle的imageForResource:方法,分别对应main bundle和其他bundle中片的取。如果之前代中有使用其他取方法的地方,最好替掉。

4、认资不要

   和iOS一,如果我自适来使用一倍和两倍时传入的片名字就不能有后名,否则读取的是那指定名字的一倍。xib中也是一的情况。所以,搜索全程序确认这点。

5、之前涉及片size的代是否有问题

NSImage的size是以Point为单位的,所以无一倍图还是两倍,其size都是一的。而前面讲过CG层又是以Pixel为单位的,所以请详细检查转换时的代

6检查片拉伸的地方是否有异常

   首先注意一点, 拉伸,系会自使用两倍是因,NSImage是两幅时读入的,使用再根据目区域的大小决定使用哪张图。如果目区域的大小是介于一倍和两倍,那么系会使用两倍,然后将其到目区域大小。所以要注意,如果之前程序中有目区域比片大,那么赶下是否正常,因为这里会使用两倍的。

   当然,如果需要,我可以不么做。通过NSImage方法setMatchesOnlyOnBestFittingAxis: 定后,一倍和两倍格根据普通屏和高分屏来使用了。不需要注意,方法是10.7.4才有的。

   一般来,最好使用NSDrawThreePartImage和NSDrawNinePartImage来拉伸像。

7、增加Point与Pixel的转换

   之前因普通屏下Point与Pixel是一比一的关系,所以有些代无意中会将两种坐弄混。所以,最好确方面的代,特是和屏幕相关的地方。

   需要Point与Pixel之的坐标转换时,使用Backing Coordinate System。NSView、NSWindow和NSScreen都有与其坐标转换的方法,尽量不要直接使用Scale Factor算。

8、增加分辨率的响

   前面提,与iOS相比,Mac是支持多示器和随分辨率。当一个窗体在两个不同示模式的示器里来回拖拽个窗体的示模式和分辨率同也在生着化。不过别担心,一旦化,系会自帮我窗体,一倍和两倍的也会自帮我。不,我最好是确下,在化的情况下,我的表是否是正常的。

   如果需要在示模式切换时做些,我可以听NSWindowDidChangeBackingPropertiesNotification。如果是自定义NSView,可以重载viewDidChangeBackingProperties方法,在里面做理。

9、注意高分屏截取的像其PPI是144

   当我工具或QQ在高分屏中行截图时,就会发现截取后的像,其PPI是144,是普通屏的两倍。并不理解,因高分屏位距离的像素数就是普通屏的两倍。所以程序中使用截的地方,要注意点。

10、换API

1)Base Coordinate System相关

   之前我常使用Base Coordinate System来表示在window中的坐,而个坐系因高分屏将被抛弃。所以,和个坐系相关的API,我最好都要替掉。

NSView

convertPointToBase:成convertPoint:toView:(view为nil

convertSizeToBase:成convertSize:toView:

convertRectToBase:成convertRect:toView:

convertPointFromBase: 成convertPoint:fromView:

convertSizeFromBase: 成convertSize:fromView:

convertRectFromBase: 成convertRect:fromView:

NSWindow:

convertBaseToScreen:成convertRectToScreen:

convertScreenToBase:成convertRectFromScreen:

2制相关

NSImage的两个方法compositeToPoint:和dissolveToPoint:因涉及到Base Coordinate System,所以被建成drawAtPoint:fromRect:operation:fraction:。

   此外,lockFocus方法也建用imageWithSize:flipped:drawingHandler:替。前面提到,NSImage其是同时拥有一倍和两倍的,会根据目区域来使用哪一,而lockFocus其理了一

有,建使用NSGraphicsContext来像,因它会自帮我们处理Scale Factor。

3)Scale Factor相关

   因高分屏Scale Factor的介入,旧Scale Factor相关的需要修改:

a)NSScreen和NSWindow的userSpaceScaleFactor;

b)HIGetScaleFactor方法需用HIWindowGetBackingScaleFactor替

c)NSWindow的NSUnscaledWindowMask常量将被抛弃;

11、一些Trick

1)如何往NSTextView中添加高清gif

了支持高清表情,我更改了在NSTextView中添加gif实现方法,采用了NSFileWrapper的方式,通过NSFileWrapper的setIcon:方法将NSImage设进去。但修改后运行我们发现表情都不会了。怎么回事?我跟踪了好一会,途中尝试了几种不同的方法,于在做了以下理后使表情运行正常:

a)将表情源文件的.gif后改成.png;

b)高分屏和普通屏分开片,普通屏只取一倍,高分屏采用不使用后名的方式取。

种做法确解,但是我们经过多次尝试后找到的解决法。之后我们还继续研究问题,希望能找到更好的解决法。

2)如何在制作dmg包时让其finder背景也支持retina

Apple没有在高分屏指南的文档中提到任何与dmg相关的内容,也没有之增加任何新的方法来做件事。但在其文档中有提到,使用tiffutil来制作复合型的tiff格式片。在此格式的片中,同着普通与高清版本像。事经过测试种tiff格式片是可以被用作dmg背景的。具体命令是:

tiffutil -cathidpicheck 普通图 高清图 -out 标图片名称

   需要注意的是:

a)DropDMG暂时不支持将tiff作背景,可以通修改后为png的方式绕过此限制。

b)用种方法生成的dmg,在会在左有一道奇怪的白。可能是Apple的实现问题

三、工具推荐

1、高分屏模工具

   新的MacBook Pro出来,缺,在不好到。担心,Xcode的Graphics Tools可以高分屏。Graphics Tools可以到developer.apple.com下

   如何模高分屏:

1)将Graphics Tools中的Quartz Debug打开;

2选择UI Resolution

3)在出来的窗口中选择“Enable HiDPI display modes”

4)注并重新登

5)在系偏好置的示器面板中,选择后面有HiDPI志的分辨率。

这样,系就会模高分屏的示模式。略感不足的是,模后的分辨率只有原来的四分之一,操作各种不习惯。没法,竟是一比四的关系啊。

2、两倍图检查工具

   一下子那么多,哪些地方的两倍图显示正确,哪些地方,我等肉眼凡胎,检查时难漏。没关系,系提供了自动标红的功能,帮助我找出些地方。

   打开方式:在端中,敲入以下命令

defaults write com.mycompany.myapp CGContextHighlight2xScaledImages YES

   ( com.mycompany.myapp就是我需要检查的App名,如果是想检查所有的App,用-g替换  

   打开后,没有成两倍的地方,都会被出来,非常方便。

3、UI用工具

1) Layer Cake,直接从psd生成切文件,甚至可以从普通psd直接生成高清版本的切,在件增加高清支持尤其方便。

2)IconKit,支持生成高清版本的icns文件。

3)PaintCode,矢量绘图并直接生成Objective-C代,自然支持高清,大大减少UI和开的工作。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值