IOS Layer的"自动布局"

原创Blog，转载请注明出处

http://blog.csdn.net/hello_hwc?viewmode=list

前言：今天在stackoverflow上给一个外国友人回答问题的时候，遇到了Layer的自动布局的问题。这里写出来，分享给需要的人。

Layer支持autolayout吗？

ios 的CALayer到目前为止不支持AutoLayout也不支持autoresizingMask。

举个例子

如果，要绘制一个渐变的颜色，作为背景色。定义一个配置函数

-(void)setupCAGradientLayer:(CAGradientLayer *)gradient{
    UIColor *colorOne = [UIColor colorWithRed:(120/255.0) green:(135/255.0) blue:(150/255.0) alpha:1.0];
    UIColor *colorTwo = [UIColor colorWithRed:(57/255.0)  green:(79/255.0)  blue:(96/255.0)  alpha:1.0];
    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil];
    NSNumber *stopOne = [NSNumber numberWithFloat:0.0];
    NSNumber *stopTwo = [NSNumber numberWithFloat:1.0];
    NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, nil];
    gradient.colors = colors;
    gradient.locations = locations;
}

不使用图片作为背景的话，一种直接的方式就是使用Layer进行绘制

很简单的绘制

#import "ViewController.h"
@interface ViewController ()
@property (strong,nonatomic) CAGradientLayer * gradient;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.gradient = [CAGradientLayer layer];
    [self setupCAGradientLayer:self.gradient];
    self.gradient.frame = self.view.frame;
    [self.view.layer addSublayer:self.gradient];
}

效果图



但是，横屏后就发现不对了

粗糙的解决方案

最直观的解决方案就是，在进行view的bounds改变的时候，进行layer的大小调整。

代码很简单，由于在view的bounds改变的时候，在对应的controller会调用viewDidLayoutSubviews

所以，在上面的viewController中加入如下代码，

-(void)viewDidLayoutSubviews{
    [super viewDidLayoutSubviews];
    self.gradient.frame = self.view.bounds;
}

则横屏正常




但是，我们都知道，在横竖屏切换的时候，IOS会自动生成一个动画，如果用粗糙的解决方案，只是在动画结束后改变了frame，动画的过程中仍然能够看淡空白

如图

较好的解决方案

由于IOS对view的支持较好，不管是使用auto layout，还是autoresizingmask，都很方便。所以，一种比较好的解决方案就是使用view来处理。

把layer绑定到view

定义一个view，把他的layer的class设置为CAGradientClass

#import <UIKit/UIKit.h>

@interface BackgrundView : UIView

@end

#import "BackgrundView.h"
@interface BackgrundView()

@end
@implementation BackgrundView

+(Class)layerClass{
    return [CAGradientLayer class];
}

@end

然后，使用这个view，设置autoresizingmask

#import "ViewController.h"
#import "BackgrundView.h"
@interface ViewController ()
@property BackgrundView * backgroundview;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.backgroundview = [[BackgrundView alloc] initWithFrame:self.view.frame];
    self.backgroundview.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    [self.view addSubview:self.backgroundview];
    [self setupCAGradientLayer:(CAGradientLayer*)self.backgroundview.layer];   
}
@end

再看看切换的动画(生成的gif有点水印，谅解)



欢迎关注我的IOS－SDK详解专栏

http://blog.csdn.net/column/details/huangwenchen-ios-sdk.html

我自己写的一个下拉刷新库

https://github.com/wenchenhuang/WCPullRefreshControl