猫猫学IOS(三十七)UI之CALayer

猫猫分享,必须精品

原创文章,欢迎转载。转载请注明:翟乃玉的博客

地址:http://blog.csdn.net/u013357243?viewmode=contents

CALayer

在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮、一个文本标签、一个文本输入框、一个图标等等,这些都是UIView。

其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层。

在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层。

@property(nonatomic,readonly,retain) CALayer *layer; 

当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView的显示。

换句话说,UIView本身不具备显示的功能,是它内部的CAlayer层才有显示功能。

CALayer的基本使用

通过操作CALayer对象,可以很方便地调整UIView的一些外观属性,比如:

边框宽度和颜色

    // 设置layer边框
    self.customView.layer.borderWidth = 10;
    // 设置layer边框颜色
    self.customView.layer.borderColor =[UIColor greenColor].CGColor;

圆角大小

    // 设置layer的圆角(设置主图层的圆角)
    self.customView.layer.cornerRadius = 10;

但是如果设置图片会是这样:四角上的色彩bug

  // 设置的image不是展示在主图层上的, 是展示在子图层上的
    self.customView.layer.contents = (id)[UIImage imageNamed:@"cat"].CGImage;

原因是我们设置的圆角是在layer上的主视图中,而放的图片会放到子视图中。

解决办法是:设置超出主图层的部分剪切掉

    // 设置超出主图层的部分剪切掉(两个方法都可以)
    //    self.customView.clipsToBounds = YES;
    //    self.customView.layer.masksToBounds = YES;

解决后:

效果:

四角上的白色不见了

代码:

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 设置layer边框
    self.customView.layer.borderWidth = 10;
    // 设置layer边框颜色
    self.customView.layer.borderColor =[UIColor greenColor].CGColor;
    // 设置layer的圆角(设置主图层的圆角)
    self.customView.layer.cornerRadius = 10;

    // 设置超出主图层的部分剪切掉
    self.customView.layer.masksToBounds = YES;

    // 设置的image不是展示在主图层上的, 是展示在子图层上的
    self.customView.layer.contents = (id)[UIImage imageNamed:@"cat"].CGImage;

}

阴影

效果:

这里出现边角是因为我把设置超出主图层的部分剪切掉的代码注释了。

因为阴影也是在主视图外的,如果不注释,阴影也显示不出来。

解决办法:

这个代码没办法,跟美工mm商量下把图片做做吧。。。

代码:

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 设置layer边框
    self.customView.layer.borderWidth = 10;
    // 设置layer边框颜色
    self.customView.layer.borderColor =[UIColor greenColor].CGColor;
    // 设置layer的圆角(设置主图层的圆角)
    self.customView.layer.cornerRadius = 10;

    // 设置超出主图层的部分剪切掉
    //self.customView.layer.masksToBounds = YES;

    // 设置的image不是展示在主图层上的, 是展示在子图层上的
    self.customView.layer.contents = (id)[UIImage imageNamed:@"cat"].CGImage;

    // 设置阴影颜色
    self.customView.layer.shadowColor = [UIColor purpleColor].CGColor;
    // 设置阴影偏移位
    // 如果为正数, 代表往右边偏移
    self.customView.layer.shadowOffset = CGSizeMake(10, 10);
    // 设置阴影透明的 0~1 1完全不透明 0 完全透明
    self.customView.layer.shadowOpacity = 1;

}

还可以给图层添加动画,来实现一些比较炫酷的效果

CALayer的基本属性

宽度和高度

@property CGRect bounds;

位置(默认指中点,具体由anchorPoint决定)

@property CGPoint position;

锚点(x,y的范围都是0-1),决定了position的含义

@property CGPoint anchorPoint;

背景颜色(CGColorRef类型)

@property CGColorRef backgroundColor;

形变属性

@property CATransform3D transform;

边框颜色(CGColorRef类型)

@property CGColorRef borderColor;

边框宽度

@property CGFloat borderWidth;

圆角半径

@property CGColorRef borderColor;

内容(比如设置为图片CGImageRef)

@property(retain) id contents;

XYZ轴

CALayer和UIView的关系

关于CALayer的疑惑

1,首先

CALayer是定义在QuartzCore框架中的

CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的

UIColor、UIImage是定义在UIKit框架中的

2,其次

QuartzCore框架和CoreGraphics框架是可以跨平台使用的,在iOS和Mac OS X上都能使用

但是UIKit只能在iOS中使用

为了保证可移植性,QuartzCore不能使用UIImage、UIColor,只能使用CGImageRef、CGColorRef

UIView和CALayer的选择

通过CALayer,就能做出跟UIImageView一样的界面效果

既然CALayer和UIView都能实现相同的显示效果,那究竟该选择谁好呢?

其实,对比CALayer,UIView多了一个事件处理的功能。也就是说,CALayer不能处理用户的触摸事件,而UIView可以

所以,如果显示出来的东西需要跟用户进行交互的话,用UIView;如果不需要跟用户进行交互,用UIView或者CALayer都可以

当然,CALayer的性能会高一些,因为它少了事件处理的功能,更加轻量级

position和anchorPoint的作用

CALayer有2个非常重要的属性:position和anchorPoint

@property CGPoint position;

用来设置CALayer在父层中的位置

以父层的左上角为原点(0, 0)

@property CGPoint anchorPoint;

称为“定位点”、“锚点”

决定着CALayer身上的哪个点会在position属性所指的位置

以自己的左上角为原点(0, 0)

它的x、y取值范围都是0~1,默认值为(0.5, 0.5)

添加一个红色图层到绿色图层上

红色图层显示到什么位置,由position属性决定

CALayer隐式动画

每一个UIView内部都默认关联着一个CALayer,我们可用称这个Layer为Root Layer(根层)

所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画

什么是隐式动画?

当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果

而这些属性称为Animatable Properties(可动画属性)

列举几个常见的Animatable Properties:

bounds:用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画

backgroundColor:用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画

position:用于设置CALayer的位置。修改这个属性会产生平移动画

可以通过动画事务(CATransaction)关闭默认的隐式动画效果

[CATransaction begin];
[CATransaction setDisableActions:YES];
self.myview.layer.position = CGPointMake(10, 10);
[CATransaction commit];
时间: 2024-08-29 12:20:21

猫猫学IOS(三十七)UI之CALayer的相关文章

猫猫学IOS(十七)UI之纯代码自定义Cell实现新浪微博UI

猫猫分享,必须精品 素材代码地址:http://blog.csdn.net/u013357243/article/details/44976175 原文地址:http://blog.csdn.net/u013357243?viewmode=contents 先看效果图 编程思路 代码创建Cell的步骤 1> 创建自定义Cell,继承自UITableViewCell 2> 根据需求,确定控件,并定义属性 3> 用getter方法完成控件的实例化,只创建并添加到contentView,不处理

(素材源码)猫猫学IOS(十七)UI之纯代码自定义Cell实现新浪微博UI

猫猫分享,必须精品 素材代码地址:http://download.csdn.net/detail/u013357243/8580249 原文地址:http://blog.csdn.net/u013357243?viewmode=contents 先看效果图 编程思路 代码创建Cell的步骤 1> 创建自定义Cell,继承自UITableViewCell 2> 根据需求,确定控件,并定义属性 3> 用getter方法完成控件的实例化,只创建并添加到contentView,不处理位置 4&g

猫猫学IOS(四)UI之半小时搞定Tom猫

话不多说 先上效果 项目源码素材下载地址: Tom猫游戏代码iOS 素材http://blog.csdn.net/u013357243/article/details/44457357 效果图 曾经风靡一时的tom猫其实制作起来那是叫一个相当的easy啊 功能全部实现,(关键是素材,没有素材的可以加我微信) 新手也可以很快的完成tom这个很拉轰的ios应用哦 做过android的我表示,android党默哀下把,那个做起来真心痛苦.... 然后呢你需要准备这些素材... 拖拽控件吧,因为这一个项

(素材_源码) 猫猫学IOS(五)UI之360等下载管理器九宫格UI

猫猫分享,必须精品 先看效果 代码学习地址: 猫猫学IOS(五)UI之360等下载管理器九宫格UI 猫猫学IOS(五)UI之360等下载管理器九宫格UI http://blog.csdn.net/u013357243/article/details/44486609 下载地址:http://download.csdn.net/detail/u013357243/8516817 ps1:有想要源码的可以加猫猫微信znycat QQ也可以:1764541256 --视频学习资料素材免费分析,哎自己一

猫猫学IOS(十三)UI之UITableView学习(下)汽车名牌带右侧索引

猫猫分享,必须精品 素材代码地址:http://blog.csdn.net/u013357243/article/details/44727225 原文地址:http://blog.csdn.net/u013357243?viewmode=contents 先看效果图 代码 ViewController //ps:新建iOS交流学习群:304570962 可以加猫猫QQ:1764541256 或则微信znycat 让我们一起努力学习吧. 原文:http://blog.csdn.net/u0133

猫猫学iOS 之微博项目实战(2)微博主框架-自己定义导航控制器NavigationController

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents 一:加入导航控制器 上一篇博客完毕了对底部的TabBar的设置,这一章我们完毕自己定义导航控制器(NYNavigationController). 为啥要做自己定义呢.由于为了更好地封装代码,而且系统的UINavigationController不能满足我们的需求了,所以得自己定义. 首先,我们在NYTabBarViewCon

猫猫学iOS 之微博项目实战(2)微博主框架-自定义导航控制器NavigationController

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents 一:添加导航控制器 上一篇博客完成了对底部的TabBar的设置,这一章我们完成自定义导航控制器(NYNavigationController). 为啥要做自定义呢,因为为了更好地封装代码,并且系统的UINavigationController不能满足我们的需求了,所以得自定义. 首先,我们在NYTabBarViewContro

猫猫学iOS之最近的反思

其实很早以前就想写点了,虽然猫猫现在还是学生,但是就自学方面,猫猫觉得自己水平还可以--注意,我不是大神,我只是一名小小的菜猫... 首先简单说一下自己吧,本人猫猫,真名看博客名字,目前大四,自学编程两年半多了,学习路线: 易语言 –> 啊哈 –> java –> javaWeb(jstl,html,js,css-..) –> android –> c –> objective-c –> iOS.作为一名体育生表示不务正业的学了这么多程序猿的东东...不多说了 言

猫猫学IOS(三十九)UI之核心动画之CABasicAnimation(基础动画)

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents 一.CABasicAnimation简介 CAPropertyAnimation的子类 属性解析: fromValue:keyPath相应属性的初始值 toValue:keyPath相应属性的结束值 随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值从fromValue渐渐地变为toValue 如