[WWDC][AppFramework]Session 121 Understanding UIKit Rendering

Session 121

Understanding UIKit Rendering


个人感觉是WWDC 2011里比较精品的Session,强烈建议各位同学反复看几遍视频,可以了解到许多iOS的实现机制

提要
  • UIView and CALayer
  • CATransaction and when views get rendered
  • Quality and Performance

     

    • Clipping and masking
    • Edge anti-aliasing
    • Group opacity
    • Shadows

UIView and CALayer

Geometry

iPhone 4
UIKit 左上为原点,320 x 480, 横屏原点不变 CoreAnimation 左上为原点,640 x 960

iPad 2
UIKit 左上原点 768 x 1024 CoreAnimation 左下为原点 1024 x 768

关于坐标问题直接参看官方文档就可以了

Drawing
  • view.layer.contents
  • UIImageView
  • drawRect

参考Practical Drawing for iOS Developers

UIImageView 与 drawRect 对比

放大一个图片,drawRect会占用更多内存,UIImageView只占原始图片所占内存,没有额外开销 用一个基础图片(tile)填充一个更大的区域,drawRect同样占用更多内存,UIImageView会在性能与最小内存占用之间选择一个平衡点(将多个tile拼成一个大一些的tile)

CATransaction

转换在runloop结束时生效

Performance
Avoid Offscreen Rendering

“正常"的渲染都直接在当前可视区域进行 屏幕外渲染,让显卡指向一个屏幕外的内存,alloc那段内存并开始绘图,渲染结束后,显卡指向主屏幕,使用之前在屏幕外渲染来在屏幕内绘图,这个过程需要消耗额外的内存,显卡从一个buffer切换到另一个buffer也需要消耗额外的时间,还需要刷新缓冲区,所以在屏幕内的和屏幕外的buffer之间切换代价是很昂贵的。 由于CoreAnimation是逐帧渲染的,所以屏幕外的渲染将会带来极大的开销, 每次屏幕刷新都会有屏幕外的渲染发生,比如一个scrollView,每次scroll的时候,都会在屏幕内进行一些渲染,屏幕外进行一些渲染,然后又将屏幕外的绘制到屏幕内。

Layer Rasterization

这个算是offscreen rendering的一种解决方法吧,屏幕外的渲染会被缓存起来,这样就不用每次都重新绘制一下屏幕外的buffer. ([CALayer setShouldRasterize:])
使用这个特性要保证你的内容是固定不变的,因为如果是个变化的内容,那么每一帧的内容都会与前一帧不同,缓存不能被重复利用,反而影响了性能。


比如要实现图中所示效果
CuriousFrog

Clipping and Masking

这里有两个技术点,一是圆角的实现,我们可以直接用CALayer的cornerRadius来达到这个效果,虽然很方,但是效率很低。二是倒影的实现,实现倒影的方法是首先取得上半部分原始View hierarchy的一个副本,y轴翻转绘制在下面,然后根据剃度来设置mask,但是这个mask开销是很大的,一方面要对整个View hierachy进行操作,另一方面需要进行Offscreen Render。

下面的方法效率都比较低,虽然很方便 * [CALayer cornerRadius] * [CALayer mask] * [UIView clipsToBounds] 或 [CALayer masksToBounds]

一些Trick * [CALayer contentsRect] 设置需要渲染的范围,本例中并不适用。 * [UIView drawRect:] 预先渲染好来防止每一帧都进行渲染 * Transparent overlay 比如圆角就可以通过覆盖黑色来让它看起来是圆的,但是本例中还要看到圆角后面的内容,所以不采用

Group Opacity

设置Group Opacity和没设置的区别

GroupOpacity

可以通过一下几个方法实现: * 在Info.plist里设置UIViewGroupOpacity键值 这样就又会产生offscreen rendering * 在drawRect:里预先渲染 * 设置shouldRasterize为YES

Shadowed text

使用CALayer的shadow属性很方便,但是开销也很昂贵

Demo

首先给出检测offscreen rendering的方法:使用Instruments的Core Animation模板,选中Color Offscreen-Rendered Yellow就可以让所有的Offscreen rendering都染成黄色

首先使用

UIBezierPath *capsulePath = [UIBezierPath bezierPathWithRoundedRect:myBounds cornerRadius:myBounds.size.height / 2.0];
[[UIColor grayColor] set];
[capsulePath fill];

来绘制圆角的背景,免去setCornerRadius的开销。

接着使用

CGContextSetShadow(context, CGSizeMake(3.0f, 3.0f), 10.0f);
CGContextSetShadowWithColor(context, CGSizeMake(3.0f, 3.0f), 10.0f, [UIColor colorWithWhite:0 alpha:.4].CGColor);
 
[[UIColor blackColor] set];
[_labelTitle drawInRect:titleFrame withFont:[UIFont boldSystemFontOfSize:28]];

来代替setShadowOffset: 和 setShadowColor:,这里注意一点,CoreGraphics在你执行绘制的代码后立即就会进行绘制,所以要在绘制之前先把属性设置好;而Core Animation在Transaction commit之后才开始渲染,所以属性可以在之后设置。

倒影的绘制,预先绘制成一个图片来防止逐帧渲染

if (_isReflected) {
    // create mask image
 
    UIGraphicsBeginImageContext([self bounds].size);
    CGColorSpaceRef deviceGray = CGColorSpaceCreateDeviceGray();
    CGFloat locations[2] = {1.0, 0.0);
    NSArray *colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithWhite:0.0 alpha:0.0] CGColor], (id)[[UIColor colorWithWhite:0..0 alpha:0.5] CGColor], nil];
    CGGradientRef gradient = CGGradientCreateWithColors(deviceGray, (CFArrayRef)colors, locations);
 
    CGContextDrawLinearGradient(UIGraphicsGetCurrentContext(), gradient, CGPointMake(0, 0), CGPointMake(0, [self bounds].size.height), 0);
    CGGradientRelease(gradient);
    CGColorSpaceRelease(deviceGray);
    CGImageRef maskImage = [UIGraphicsGetImageFromCurrentImageContext() CGImage];
    UIGraphicsEndImageContext();
 
    CGContextClipToMask(context, myBounds, maskImage);
}
Edge Antialiasing

抗锯齿的实现有下面两个方法

  • Info.plist里设置UIViewEdgeAntialiasing键值 开销很大
  • 用一个像素的边来模拟

代码如下:

- (UIImageView *)createImageViewForImage:(UIImage *)image
{
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    [imageView setContentMode:UIViewContentModeScaleAspectFit];
 
    //Add a shadow around the image.
    [[imageView layer] setShadowOffset:CGSizeMake(10, 10)];
    [[imageView layer] setShadowColor:[[UIColor blackColor] CGColor]];
    [[imageView layer] setShadowOpacity:.5];
 
    //Rotate the image by some small random angle.
    [imageView setTransform:CGAffineTransformMakeRotation((((float)random() / RAND_MAX) * MAX_ROTATION) - MAX_ROTATION / 2)];
 
    //Rather than using Core Animation's edge antialiasing, which requires an off-screen rendering pass, we'll draw our image int own image with an empty 1px border on each side. That way, when it's rotated, the edges will appear smooth because the outermost pixels of the original image will be sampled with the clear pixels in the outer border we add. This sampling is much faster but not as high-quality.
 
    CGSize imageSizeWithBorder = CGSizeMake([image size].width + 2, [image size].height + 2);
    UIGraphicsBeginImageContext(imageSizeWithBorder);
    // The image starts off filled with clear pixels, so we don't need to explicitly fill them here.
    [image drawInRect:(CGRect){{1,1}, [image size]}];
    [imageView setImage:UIGraphicsGetImageFromCurrentImageContext()];
    UIGraphicsEndImageContext();
 
    // We no longer need CA's edge antialiasing on this layer
    [[imageView layer] setEdgeAntialiasingMask:0];
 
    return imageView;
}

阴影绘制:

- (void)layoutImageView:(UIImageView *)imageView inFrame:(CGRect)celFrame withAnimationDuration:(NSTimeInterval)duration
{
    // The image view may be rotated, so set its frame in terms of the identity transform and then reapply the transform.
    CGAffineTransform imageViewTransform = [image View transform];
    [imageView setTransform:CGAffineTransformIdentity];
    [imageView setFrame:CenteredRectInRect(CGRectMake(0, 0, [imageView image].size.width, [imageView image].size.height), celFrame)];
    [imageView setTransform:imageViewTransform];
 
    // Save Core Animation a pass to figure out where the transparent pixels are by informing it explicitly of the contents's shape.
    CGPathRef oldPath = CGPathRetain([[imageView layer] shadowPath]);
    [[imageView layer] setShadowPath:[[UIBezierPath bezierPathWithRect:[imageView bounds]] CGPath]];
 
    // Since the layer's delegate (its UIView) will not create an action for this change (via the CALayerDelegate method actionForLayer:forKey:), we must explicitly create the animation between these values.
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"shadowPath"];
    [pathAnimation setFromValue:(id)oldPath];
    [pathAnimation setToValue:(id)[[imageView layer] shadowPath]];
    [pathAnimation setDuration:duration];
    [pathAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    [pathAnimation setRemovedOnCompletion:YES];
 
    [[imageView layer] addAnimation:pathAnimation forKey:@"shadowPath"];
    CGPathRelease(oldPath);
}

以上就是这个session中个人觉得比较精髓的部分了,一些地方用中文表达的也不是太好,代码都是手打的,难免有错误,如有问题还请留言指正 对这篇文章涉及的内容感兴趣的同学也看看这篇文章(在墙外,如有需要我可以帮忙做个pdf传上来)

—以上—

XCode 4.2 地点模拟技巧

XCode 4.2终于支持地点模拟了,不用忍受真机调试的各种不便了,模拟方法也很简单(恕我盗用几个别人的图):

当Debug一个需要地理位置信息的App时,在Debug栏默认就会有地点模拟的图标,如下图所示:

Xcode simulator location services3

这个有一个前提:必须是iOS5的模拟器.

默认只提供了几个地点,但是可以通过GPX文件来添加.你可以选择到网上找现成的GPX,但是Apple还是很为广大开发者考虑的,提供了GPX的模版,创建方法 新建>>Resource>>GPX File 如下图:

Xcode simulator location services2

其实所谓的GPX就是一XML文件,默认的内容如下:

<?xml version="1.0"?>

<gpx version="1.1" creator="Xcode">

    <wpt lat="37.331705" lon="-122.030237">

         <name>Cupertino</name>

    </wpt>

</gpx>

只要改下经纬度,改下名字,就是你想要的地点了,经纬度可以用GoogleEarth获取.

添加了GPX文件后就可以在之前选择地点那里看到你的GPX文件了.

—以上—

[WWDC 2011 Summary & Practice] [AppFramwork] Session 100

What’s New in Cocoa Touch


WWDC 2011的视频真心不错,身为iOS开发者必看,但是光看也记不住什么,就发个博文一方面当做笔记,一方面与懒得看视频的人分享一下其中的部分内容.

虽然很久以前就把Session 100看完了,但还是决定先用这个练练手,内容我尽量覆盖全,并且提供一些我测试的例子,也会贴些图.写过博客的都知道贴图是很繁琐的,所以请原谅的我的懒惰,我真的没有那么充裕的时间去截很多图.

WWDC 2011视频以及 Keynote(PDF格式)下载详见这里http://developer.apple.com/videos/(需要注册个开发者账号,但是不是交$99那种,“野生"开发者即可)


UIStepper

UIStepper

一个新控件,附带很少的属性,和UIButton用法差不多:

UIStepper *stepper = [[UIStepper alloc] initWithFrame:CGRectMake(44, 44, 100, 44)];
[self.view addSubview:stepper];
[stepper addTarget:self action:@selector(stepperTouched:) forControlEvents:UIControlEventTouchUpInside];
 
- (void)stepperTouched:(id)sender {
NSLog(@"stepper touched");
}

UIAlertView

终于可以在AlerView里输入文字了,真是佩服iOS5之前那些牛人怎么想到AlertView的各种使用技巧的.

typedef enum {
      UIAlertViewStyleDefault = 0,
      UIAlertViewStyleSecureTextInput,
      UIAlertViewStylePlainTextInput,
      UIAlertViewStyleLoginAndPasswordInput
  } UIAlertViewStyle;
@property(nonatomic,assign) UIAlertViewStyle alertViewStyle;
- (UITextField *)textFieldAtIndex:(NSInteger)textFieldIndex

UIScreenOverscanCompensation

跟外接屏幕有关,本人目前为止还没遇到使用这个功能的情景,不多评论

typedef enum {
     UIScreenOverscanCompensationScale,
     UIScreenOverscanCompensationInsetBounds,
     UIScreenOverscanCompensationInsetApplicationFrame
 } UIScreenOverscanCompensation;
 @property(nonatomic) UIScreenOverscanCompensation
 overscanCompensation;

UIScreen

可以像iOS一样调节亮度了,两个新属性:

@property (nonatomic) CGFloat brightness;
@property (nonatomic) BOOL wantsSoftwareDimming;

结合之前的UIStepper使用:

UIStepper *stepper = [[UIStepper alloc] initWithFrame:CGRectMake(44, 44, 100, 44)];
[stepper setMaximumValue:2.0];
[stepper setMinimumValue:-2.0];
[stepper setStepValue:0.1];
[self.view addSubview:stepper];
[stepper addTarget:self action:@selector(stepperTouched:) forControlEvents:UIControlEventTouchUpInside];
[[UIScreen mainScreen] setWantsSoftwareDimming:YES];
 
- (void)stepperTouched:(id)sender {
    NSLog(@"stepper touched with value %f", [(UIStepper *)sender value]);
    [[UIScreen mainScreen] setBrightness:[(UIStepper *)sender value]];
}

brightness范围在0.0-1.0,wantsSoftwareDimming是使用软件模拟来获得更低的亮度,但是开启会损失性能,本人实测似乎没有效果,或许是方法不对.鉴于不太实用,暂且搁置.

 

继续阅读[WWDC 2011 Summary & Practice] [AppFramwork] Session 100

创建没有nib文件的App

本文针对Cocoa Touch,Cocoa可能略有区别

首先说为什么不用Nib,其实也没什么太令人信服理由,大概就是以下几点吧

  • 代码重用比较方便
  • 用Interface Builder多多少少有丢三落四的毛病
  • 感觉自己写出来的代码更有存在感一些
  • 没事闲的

至于性能上是否有区别我还不太清楚,查了一会儿也没什么结果,如果各位对这方面有了解还请回复一下.

进入正题,以下几步搞定MainWindow

  • 删除Info.plist里面Main nib file base name这一条,或者把后面的MainWindow清空也行
  • main.m里有一句
    int retVal = UIApplicationMain(argc, argv, nil, nil);
    改成:
    int retVal = UIApplicationMain(argc, argv, nil, @"YOUR_APPDELEGATE_CLASS");
    如:
    int retVal = UIApplicationMain(argc, argv, nil, @"TestAppDelegate");
  • XXXAppDelegate.m里面,删除原来的一些内容,添加类似如下代码,这里就不细说了,相信都能明白
    – (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        _window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; //一定要initWithFrame,否则不响应触摸事件
        _mainTabBarController = [[MainTabBarController alloc] init];
        _window.rootViewController = _mainTabBarController;
        [_window makeKeyAndVisible];
        
        return YES;
    }
MainWindow搞定了,其他ViewController就比较简单了,可以重写init,也可以在viewDidLoad等方法里添加一些控件.创建ViewController就直接alloc init就行,不用管frame的问题.
 
没有了nib是不是感觉整个项目清爽了一些呢?不过要写的代码也变多了.
 
–以上–

解决因删除xib(nib)文件所导致的错误

用XCode编写程序,如果你由于各种原因需要删除一个xib文件,在删除文件后就可能遇到一些稀奇古怪的问题,首先说下解决方法

尝试做以下工作:

  • 粗暴地删除真机/模拟器上对应的App (这个一般就能解决问题了)(注意看后文,有更温和的解决方法)
  • 对整个工程Clean一下,至于Clean在哪,建议到Help下面搜索一下
  • XCode 3可能还有个Empty Caches… -> Empty

原因我想大家已经猜到了,编译一个新版本的应用只是把要修改的部分替换成新的,似乎并不会对删除多余的东西,比如你之前建立的xib(nib),这也就导致了虽然你的代码已经不在依靠那个nib运行了,但是原来的nib还是残留在那里,并且会在运行时加载,这就可能造成一些问题.

同样,如果你错误地删除了一个nib而没有"刷新"一下你的应用,这个错误就会被掩盖起来,等你的应用编译或安装到其他机器上时就可能产生各种错误.

了解了原理也就知道了替换第一步的放法:

  • 找到xxx.app,显示包内容,删除你不想要的nib文件

–以上–

XCode 4连接gitolite服务器的方法

XCode 4终于支持git了,但是要连接一个gitolite服务器还是稍微有点麻烦,不能通过orgnizer直接添加,需要执行以下几步(关于gitolite的搭建参考这篇"

  • 编辑 gitolite-admin/config/gitolite.conf
    仿照已有的内容,添加一个repository
  • git add config/   (假设在gitolite-admin目录下)
    git commit -m "MESSAGE"
    git push
  • 从返回的信息中我们可以看到添加了那个repository
  • git clone 下来新添加的repository
  • 在Xcode中新建项目,然后保存进clone下来的文件夹内,注意别添加本地的git
  • 再次add commit push
  • 接着用XCode打开项目就可以在Orgnizer的repository标签里看到了

–以上–

在XCode 4中使用TODO FIXME等标记

在XCode 3,我们可以用类似这样的注释来方便我们标记需要修改的部分:

// TODO:
// FIXME:
// !!!:
// ???:

XCode 4不知为何不支持这一功能了,网上有一种解决方法,可以在编译后的Warning里面看到我们标记的TODO, FixME等,原文在此,转发过来:

  • 进入项目属性设置那个页面
  • 选择一个Target
  • 选择Build Phases标签
  • 点击右下角的Add Build Phase
  • 展看上面刚出现那一栏Run Script,输入以下内容
    KEYWORDS="TODO:|FIXME:|\?\?\?:|\!\!\!:"
    find "${SRCROOT}" \( -name "*.h" -or -name "*.m" \) -print0 | xargs -0 egrep --with-filename --line-number --only-matching "($KEYWORDS).*\$" | perl -p -e "s/($KEYWORDS)/ warning: \$1/"

–以上–

XCode 4免证书真机调试

本文转载总结自世界各地,如有侵权还请见谅.

目前可以保证是最简便的方法

方法如下:

  • 创建证书,这里不多说了,直接参考这里创建证书的步骤,不要做除创建证书以外的工作
  • 终端: sudo /usr/bin/sed -i .bak 's/XCiPhoneOSCodeSignContext/XCCodeSignContext/' /Developer/Platforms/iPhoneOS.platform/Info.plist (其实就是把这个Info.plist中所有XCiPhoneOSCodeSignContext改成XCCodeSignContext,手动替换也可以)
  • 修改项目配置里面的TARGETS:选择ALL找到Code Signing Identity,选择iPhone Developer (这里说的不太明白,大家试一下就知道了)

此时你应当重启下XCode尝试一下是否可以通过真机运行(此时应当是app能装到真机上但是会出现一个错误不能debug,程序也没运行,但是可以像正常应用一样点击运行了,要想可以debug应当做最后一步的工作)

  • Xcode的File菜单上,File >> New >>New File >> iOS >> Code Signing >> Entitlements 新建一个Entitlements.plist,然后在之前修改TARGETS的地方找到Code signing Entitlements,键入:  ./你的项目名/Entitlements.plist(这个路径取决于Entitlements.plist的位置) ,接着运行试试吧!

PS. 如果仍未成功,回复中的内容可能对你有帮助。

–以上–

[UIView beginAnimations:context:]与[UIView animateWithDuration:animations:]值得注意的一个区别

看过官方文档的都知道,官方推荐在iOS4以后使用[UIView animateWithDuration:animations:],而不是原来的[UIView beginAnimations:context:],来完成动画,虽然二者功能几乎完全相同,但使用前者在一些情况下会方便不少,这些内容可以参考官方文档View Programming Guide For iOS的Animation一节.

二者有一个值得新手注意的区别就是[UIView animateWithDuration:animations:]默认会禁止触摸,手势等的响应,这可以通过设置option选项来解决(直接引用StackOverFlow的一段了):

 

UIViewAnimationOptions options = UIViewAnimationCurveLinear | UIViewAnimationOptionAllowUserInteraction;

[UIView animateWithDuration:0.2 delay:0.0 options:options animations:^
 {
     highlightView.alpha = 1.0;

 } completion:nil];

 

就是这么一点事儿,害我走了不少弯路(我也是新手哈),在这里写一下,提示一下有可能遇到同样问题的人.

–以上–

在iPhone/iPad/iPod上查看iOS文档

7.26更新:iPad基本不用看了,拿模拟器试了下发现官方文档对iPad支持甚好,而离线版缺少对iPad的支持,无法通过Safari打开

苹果的官方文档甚是强大,对开发的各个方面都进行了及其详尽的介绍,作为开发者当然要时常翻看,本地的文档只能在电脑上看,要想用我们的iDevices查看文档只好连网看在线版的,但由于网速限制不够有效率,官方文档虽然支持转换成PDF,但是转换速度很慢,转换后一堆超链接也失效了.另外我找了好久也没有一个叫"Procket Documentation"或者类似的App,实在有些遗憾.

这里有一个不太完美的解决方案:官方文档虽然都是docset格式的,但其实右键显示包内容一看就是一堆html,css啥的,和在线版的文档一样完全可以用浏览器解决,所以只要把docset里面的Documents文件夹拖到你的iDevices里面就行了,如果你没有越狱就用GoodReader啥的看吧,不过我用iPhone 4测试效果不太理想,文档首页加载奇慢,而且显示不全,那个搜索不知道好不好使,太卡没法测试,iPad 2不知道效果能怎么样,有iPad 2的同学试验下最好在评论中说下效果,别的页面也可以直接浏览,不过效果没有桌面版的Safai那样好,排版似乎有些问题(不是大问题,试下就知道了),但是不影响看.

如果越狱了,可以在Cydia里搜索下lighttpd,安装,最好也安装一下Lighttpd SBSetting Toggle,安装后重启,然后就可以用Safari访问127.0.0.1了.(这里只介绍下安装那个Toogle后的使用方法,Lighttpd SBSetting Toggle的说明中提到webroot地址是/var/www,配置文件是/etc/lighttpd2.cong,用默认的配置文件访问127.0.0.1就可以直接看到/var/www下的目录.只要把之前提到的Document文件夹放这里就行了,接下来怎么做就不用说了吧.) 用自带Safari打开文档,文档首页依旧很卡,但是比GoodReader强多了,而且搜索也勉强可以用(iPhone 4测试,其他不知效果如何),其他页面和GoodReader浏览效果一样,都是排版有点问题,不影响效果.

目前为止也没做太多测试,现在正考虑用其他浏览器看看效果是否能好些(Operamini试了下根本不行),如果有发现就会更新这篇文章,没有就这样了.

其实这个方法也可以用来查看Android文档什么的.

–以上–

PS:搜狗输入法Mac版真TM2(Ver 1.1),中文标点那个选项没有记忆,切个输入法就又回到默认值了,写这篇文章净折腾全角半角的问题了.另外所谓的词库也就那回事,跟Win版没法比.