【iOS】CALayer的理解与简单使用


前言

在实现网易云音乐demo开发的过程中,通过查阅网上资料,发现了我们可以对我们的视图进行裁剪来实现美观的体现,例如这样:在这里插入图片描述

将原本矩形的视图裁剪成圆形,来更加贴合大众的审美,但是当查看视图层级时发现时视图似乎并未被裁减,但仍然显示出圆形的形状,经过查阅资料发现与视图创建时自带的图层CALayer有关

在这里插入图片描述

一、UIView与CALayer的关系

视图与图层是 iOS 应用程序中界面元素的两个关键概念,它们紧密相连并且密切合作。在 iOS 开发中,我们通常使用视图(UIView)来构建用户界面,而图层(CALayer)则是视图背后的实际绘制和渲染的基础。

  • 视图(UIView):
    视图是 iOS 应用程序中构建用户界面的基本元素。它们是 UIView 类的实例,是 UIKit 框架中的一部分。每个视图都是矩形区域,可以包含其他视图,并通过嵌套的方式形成视图层次结构。视图处理用户交互事件,响应触摸和手势,并可以添加动画和转换效果。
    视图是高级别的抽象,提供了方便的方法来管理界面元素,但是视图本身并不实际进行绘制和渲染。它的绘制和渲染工作是由对应的图层来完成的
  • 图层(CALayer):
    图层是视图背后的实际绘制和渲染引擎。每个视图都有一个关联的图层,可以通过 view.layer 属性访问。图层是 CALayer 类的实例,是 Core Animation 框架中的一部分。图层负责实际绘制视图的内容,并处理图形和动画效果。
    图层管理自己的内容,并且它可以包含其他子图层,形成图层树。图层提供了一组属性和方法,用于控制绘制、布局和动画等操作。使用图层,我们可以在视图上绘制图形、渐变、阴影等效果,以及应用动画和过渡效果。

简单来说,视图负责响应我们的操作,图层负责设计我们的UI

视图与图层之间的关系是一一对应的,每个视图都有一个关联的图层,它们共同构成了 iOS 应用程序的界面元素。视图是对图层的高级别封装,提供了更方便的界面管理功能,而图层是对视图绘制和渲染的实际执行者。

注意:视图的图层是由系统自动创建和管理的,一般情况下我们无需手动创建视图的图层。视图和图层之间的关系是一一对应的,每个视图都自带一个对应的图层,只是不在我们的层级上显示出来

二、CALayer的简单使用

我们先从CALayer的创建开始入手,我们知道UIView创建时会自动创建一个与之对应的CALayer,那么如果我们单独创建一个CALayer是否能够显示呢?给出代码我们试着运行一下
在这里插入图片描述
在这里插入图片描述

可以看到我们的CALayer成功显现了,我们来看一下我们的视图层级
在这里插入图片描述
发现其并没单独成为一个模块显示,这更能说明CALayer并不能响应我们的事件,而是用来绘制我们的视图


1.圆角与裁剪

在上面的代码中加入如下代码:在这里插入图片描述

在这里插入图片描述显示出的是一个圆形图案,这是因为我们是用了cornerRadius,用来裁减试图的角,它的中文意思是曲率,当为0时其为直角,通过对其进行变换可以用来裁减我们的视图。

曲率的出现常常伴随着masksToBounds,它的中文意思是裁减边框,只有我们将其设为yes,才可以允许我们的视图以CALayer为模型裁减我们的边框

我们回到我们最初的问题,如果我们视图的CALayer的masksToBounds为no(默认情况下为no),将不会出现裁减的效果,之所以我们上面的图形可以裁剪,是因为它本身就是被裁减后没有超出边框的部分,,我们需要裁减的是超出边框的部分,以下面代码为例,我们如果没有设置masksToBounds为yes
在这里插入图片描述
出现的就是一个矩形的效果
在这里插入图片描述
加上这段代码

在这里插入图片描述
就出现了我们需要的效果
实际上这个属性是用来裁减我们的子图层的,我们上面的头像实际上是UIButtom使用setimage方法后得到的,使用setimage方法时我们就自动将imageview作为一个子视图赋给buttom,因此可以理解为buttom的图层就是父图层,imageview 的图层就是子图层
在这里插入图片描述可以看到我实际上并没有点击到我的头像,而是点击到了图像之外的区域,但是按钮仍然响应,这也证明了我们的视图的大小是不变的,只是显示出来的部分被裁减了


基本代码原理:
NO:
在这里插入图片描述
在这里插入图片描述
Yes
在这里插入图片描述

masksToBounds: 这是 CALayer 类的属性,用于控制图层是否裁剪其子图层超出图层边界的部分。当设置为 YES 时,图层将会裁剪其子图层的内容,使其不会超出图层的边界范围。这与 UIView 中的 clipsToBounds 属性功能相同

2.contents

我们知道我们可以通过创建一个UIImageView,然后将其赋给我们的视图,来实现自定义背景图片,但是如果使用CALayer的contents属性,就不用那么麻烦
在这里插入图片描述
在这里插入图片描述
这里唯一需要注意的就是我们如果用image对齐进行赋值,编译可以通过,但是不会显现出图片,要使用其CGImage属性才会出现图片,用CALayer设置背景颜色也是如此,这里笔者还不是很理解,给出大佬的解释供大家理解

CALayer 有一个叫 contents 的属性,在 Mac OS 中,它对 CGImage 和 NSImage 类型的值都起到作用,但是在 iOS 中,你如果将 UIImage 的值赋于它,虽然可以通过编译,但是只能得到一个空白内容。不过好在 UIImage 有一个 CGImage 属性,它返回一个 “CGImageRef” 对象,它是一个 Core Foundation 类型,你需要使用 bridge 关键字将其转换为 Cocoa 类型


3.边框属性

这个属性在设计3GShare时用到了,他有宽度与背景颜色的设置
在这里插入图片描述
borderWidth用于设置边框宽度,borderColor用于设置颜色
呈现出来就是这样的效果

在这里插入图片描述

总结

事实上,CALayer还有很多属性,笔者还不甚理解,这里给出大佬的博客供大家参阅
iOS开发之CALayer
iOS CALayer介绍
iOS CALayer的理解与简单使用

猜你喜欢

转载自blog.csdn.net/weixin_72437555/article/details/131823694