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


时间: 2025-01-04 23:03:43

IOS Layer的"自动布局"的相关文章

(翻译)开始iOS 7中自动布局教程(二)

这篇教程的前半部分被翻译出来很久了,我也是通过这个教程学会的IOS自动布局.但是后半部分(即本篇)一直未有翻译,正好最近跳坑翻译,就寻来这篇教程,进行翻译.前半部分已经转载至本博客,后半部分即本篇.学习IOS自动布局的朋友可以看看.自动布局很强大. 这篇教程绝对的最好的学习IOS自动布局的文章,没有之一 原文地址:Beginning Auto Layout Tutorial in iOS 7: Part 2 正文如下: 请注意: 团队成员Matthijs Hollemans (IOS学徒系列的作

【转】开始iOS 7中自动布局教程(一)

原文网址:http://www.cocoachina.com/industry/20131203/7462.html 原文:Beginning Auto Layout Tutorial in iOS 7: Part 1 感谢翻译小组成员@answer-huang(博客)热心翻译.如果您有不错的原创或译文,欢迎提交给我们,更欢迎其他朋友加入我们的翻译小组(联系qq:2408167315). ======================================================

开始iOS 7中自动布局教程(一)

你是否曾经想让你的app在横竖屏方向上看起来都表现良好而受挫?是否在做支持iPhone和iPad屏幕布局界面时几近大小便失禁?今天我将给你带来好消息! 一直为大小相同的屏幕设计一个用户界面并不难,但如果屏幕的尺寸改变的话,UI元素的位置和大小也需要相应的做出改变. 到目前为止,如果你的设计相当的复杂,那么你必须编写大量的代码来适应这样的布局.你应该很高兴,现在这样的情况再也不存在了--iOS6为iPhone和iPad带来了一个极好的新特性:自动布局.Xcode 5和 iOS7中对自动布局做出了改

ios layer 动画-(transform.scale篇)

x轴缩放:CABasicAnimation *theAnimation;theAnimation=[CABasicAnimation animationWithKeyPath:@"transform.scale.x"];theAnimation.duration=8;theAnimation.removedOnCompletion = YES;theAnimation.fromValue = [NSNumber numberWithFloat:1];theAnimation.toVal

IOS Layer的使用(阴影)

CALayer(层)是屏幕上的一个矩形区域,在每一个UIView中都包含一个根CALayer,在UIView上的所有视觉效果都是在这个Layer上进行的. CALayer外形特征主要包括: 1.层的大小尺寸 2.背景色 3.内容(可以填充图片或者使用Core Graphics绘制的内容) 4.矩形是否使用圆角 5.矩形是否有阴影 Layer有很多种,最常用也是最基本的是CALayer,当然还包括其他的子类: CAScrollerLayer 简化显示层的一部分 CATextLayer    文本层

iOS中AutoLayer自动布局流程及相关方法

关于UIView的Layer,IOS提供了三个方法: 1.layoutSubviews 在iOS5.1和之前的版本,此方法的缺省实现不会做任何事情(实现为空),iOS5.1之后(iOS6开始)的版本,此方法的缺省实现是使用你设置在此view上面的constraints(Autolayout)去决定subviews的position和size. UIView的子类如果需要对其subviews进行更精确的布局,则可以重写此方法.只有在autoresizing和constraint-based beh

iOS中AutoLayer自动布局流程及相关方法【转】

转自:http://my.oschina.net/w11h22j33/blog/208574 关于UIView的Layer,IOS提供了三个方法: 1.layoutSubviews 在iOS5.1和之前的版本,此方法的缺省实现不会做任何事情(实现为空),iOS5.1之后(iOS6开始)的版本,此方法的缺省实现是使用你设置在此view上面的constraints(Autolayout)去决定subviews的position和size. UIView的子类如果需要对其subviews进行更精确的布

ElegantSnap 一个优雅的,易用的iOS/tvOS/macOS自动布局框架, 超级详细的使用教程,多视图水平等宽/垂直等高排列

ElegantSnap ElegantSnap(Base on SnapKit) to make Auto Layout easy and elegant on both iOS and OS X. 基于SnapKit, 用法简洁优雅,可运行在iOS.tvOS.macOS上自动布局库 Requirements / 使用条件 iOS 10.0+ / Mac OS X 10.12+ / tvOS 10.0+ Xcode 9.0+ Swift 5.0+ Installation / 安装 CocoaP

IOS开发之自动布局显示网络请求内容

在上一篇博客中详细的介绍了IOS开发中的相对布局和绝对布局,随着手机屏幕尺寸的改变,在App开发中为了适应不同尺寸的手机屏幕,用自动布局来完成我们想要实现的功能和效果显得尤为重要.本人更喜欢使用相对布局.在下面要学习的例子中暂且先用我们的StoryBoard来设置我们组件的约束,以后会在代码中给我们的元素新建约束.iPhone4,5和将要发布的iPhone6的屏幕的大小都不一样,所以屏幕的适配是我们搞App开发必须要考虑的问题. 我们要完成一个什么例子呢,先上两张程序运行最终的结果图,之后看着图