UIView - 图层CALayer（裁边 & 改边角 & 加阴影）

最新推荐文章于 2023-12-29 10:33:20 发布
最新推荐文章于 2023-12-29 10:33:20 发布
阅读量2.8k 收藏
点赞数 4
CC 4.0 BY-SA版权
分类专栏： iOS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CatStarXcode/article/details/50495348
本文介绍了iOS开发中UIView与CALayer的关系，指出UIView的显示依赖于内部的CALayer。通过示例详细讲解了如何通过layer设置边框、圆角、添加图片和设置阴影，强调了masksToBounds属性对阴影显示的影响，并展示了通过KVC设置视图变形的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、简单介绍

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

其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层，在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层。

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

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

        换句话说，UIView本身不具备显示的功能，拥有显示功能的是它内部的图层。

 

二、简单使用

　　UIView之所以能够显示，完全是因为内部的CALayer对象。因此，通过操作这个CALayer对象，可以很方便地调整UIView的一些界面属性，比如：阴影、圆角大小、边框宽度和颜色等。

　　新建一个项目，在storyboard中添加一个view。

201905114573245.png



    1.通过layer设置边框的宽度和颜色

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;

@end

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //设置边框的宽度为20
    self.customView.layer.borderWidth=20;
    //设置边框的颜色
    self.customView.layer.borderColor=[UIColor greenColor].CGColor;
}

@end

201909286453252.png


    2.通过layer设置边框为圆角

//设置layer的圆角
self.customView.layer.cornerRadius=20;

201912413175680.png


    3.在layer上添加一张图片

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;

@end

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //设置边框的宽度为20
    self.customView.layer.borderWidth=5;
    //设置边框的颜色
    self.customView.layer.borderColor=[UIColor blackColor].CGColor;
    
    //设置layer的圆角
    self.customView.layer.cornerRadius=20;
    
    //在view的图层上添加一个image，contents表示接受内容
    self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
    
}
@end

201922157072093.png


说明：contents是id类型，可以接受内容，上面的实例让layer显示一张图片，仔细观察可以发现四个圆角的部分露了一个角出来。

产生的原因说明

201926236147763.png

customview上的根layer：

201927038793666.png

UIimage的图层

201927339118372.png

添加后

201929286767101.png

        那是因为设置的image不是展示在主图层上的，而是显示在子图层上的。可以通过设置一个范围，设置超出主图层的部分把它给剪切掉。

有以下两种方法，建议使用layer中的方法（第二种）self.customView.layer.masksToBounds=YES;

- (void)viewDidLoad
{
    [super viewDidLoad];
    //设置边框的宽度为20
    self.customView.layer.borderWidth=5;
    //设置边框的颜色
    self.customView.layer.borderColor=[UIColor blackColor].CGColor;
    
    //设置layer的圆角
    self.customView.layer.cornerRadius=20;
    //设置超过子图层的部分裁减掉
    //UI框架中使用的方法
//    self.customView.clipsToBounds=YES;
    self.customView.layer.masksToBounds=YES;
    
    //在view的图层上添加一个image，contents表示接受内容
    self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
}

201931451766603.png

注意：layer中不能直接接受UI框架中的东西


 　　4.设置阴影

　　设置阴影，不光需要设置阴影颜色，还应该设置阴影的偏移位和透明度。

　　因为如果不设置偏移位的话，那么阴影和layer完全重叠，且默认透明度为0（即完全透明）。

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //设置阴影的颜色
    self.customView.layer.shadowColor=[UIColor blackColor].CGColor;
    //设置阴影的偏移量，如果为正数，则代表为往右边偏移
    self.customView.layer.shadowOffset=CGSizeMake(15, 5);
    //设置阴影的透明度(0~1之间，0表示完全透明)
    self.customView.layer.shadowOpacity=0.6;
}

201940251456889.png


补充说明：如果设置了超过主图层的部分减掉，则设置阴影不会有显示效果。

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //设置边框的宽度为20
    self.customView.layer.borderWidth=5;
    //设置边框的颜色
    self.customView.layer.borderColor=[UIColor blackColor].CGColor;
    
    //设置layer的圆角
    self.customView.layer.cornerRadius=20;
    //设置超过子图层的部分裁减掉
    //UI框架中使用的方法
    //    self.customView.clipsToBounds=YES;
    self.customView.layer.masksToBounds=YES;
    
    //在view的图层上添加一个image，contents表示接受内容
    self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
    
    //设置阴影的颜色
    self.customView.layer.shadowColor=[UIColor blackColor].CGColor;
    //设置阴影的偏移量，如果为正数，则代表为往右边偏移
    self.customView.layer.shadowOffset=CGSizeMake(15, 5);
    //设置阴影的透明度(0~1之间，0表示完全透明)
    self.customView.layer.shadowOpacity=0.6;
}

201942525046242.png


把剪切超出主图层部分的代码注释掉之后的显示效果

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //设置边框的宽度为20
    self.customView.layer.borderWidth=5;
    //设置边框的颜色
    self.customView.layer.borderColor=[UIColor blackColor].CGColor;
    
    //设置layer的圆角
    self.customView.layer.cornerRadius=20;
    //设置超过子图层的部分裁减掉
    //UI框架中使用的方法
    //    self.customView.clipsToBounds=YES;
//    self.customView.layer.masksToBounds=YES;
    
    //在view的图层上添加一个image，contents表示接受内容
    self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
    
    //设置阴影的颜色
    self.customView.layer.shadowColor=[UIColor blackColor].CGColor;
    //设置阴影的偏移量，如果为正数，则代表为往右边偏移
    self.customView.layer.shadowOffset=CGSizeMake(15, 5);
    //设置阴影的透明度(0~1之间，0表示完全透明)
    self.customView.layer.shadowOpacity=0.6;
}

201944510829200.png


    5.只要继承自uiview的都有layer属性，下面以图片为例进行说明。

    在storyboard中新添加一张图片。

201949538645069.png


简单设置示例

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;

@end

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //设置图片layer的边框宽度和颜色
    self.iconView.layer.borderColor=[UIColor brownColor].CGColor;
    self.iconView.layer.borderWidth=5;
    
    //设置layer的圆角
    self.iconView.layer.cornerRadius=20;
    //设置超过子图层的部分裁减掉
       self.iconView.layer.masksToBounds=YES;
}

201957320045668.png


设置bounds属性，在设置时需要去除掉storyboard中的自动布局属性。


201958352864600.png

202001157078975.png

设置图片的形变属性（transform）

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    //通过uiview设置（2D效果）
//    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
    //通过layer来设置（3D效果,x，y，z三个方向）
    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
}



通过uiview设置（2D效果）

202012404425600.png



通过layer设置（3D效果）

202015446761052.png


使用KVC进行设置

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;

@end

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    //通过uiview设置（2D效果）
//    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
    //通过layer来设置（3D效果,x，y，z三个方向）
//    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
    
    //通过KVC来设置
    NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];
    [self.iconView.layer setValue:v forKeyPath:@"transform"];
    //如果是只需要设置在某一个方向上的移动，可以参考下面的代码
    //在x的方向上向左移动100
    [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
}



查看苹果的官方文档，下面的属性都可以通过KVC进行设置。

202019143016393.png



旋转一个弧度

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    //通过uiview设置（2D效果）
//    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
    //通过layer来设置（3D效果,x，y，z三个方向）
//    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
    
    //通过KVC来设置
//    NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];
//    [self.iconView.layer setValue:v forKeyPath:@"transform"];
//    //如果是只需要设置在某一个方向上的移动，可以参考下面的代码
//    //在x的方向上向左移动100
//    [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
    
    //旋转
    self.iconView.layer.transform=CATransform3DMakeRotation(M_PI_4, 1, 1, 0.5);
}

202023184265675.png


补充：三维坐标系


202024559261462.png


【iOS开发-图层】图层的获取与一些属性
沸沸腾的专栏
06-10 1397
图层每一个控件都有自己的一个图层，这个空间的所有东西就是显示在这个图层上面的，控件本身没有显示东西的功能，只有拥有了图层才能显示东西图层的获取CALayer *layer = self.testView.layer;使用UIView的图层为例UIView本身只有一个图层，主图层self.testView.layer.borderWidth = 10;//设置边框大小 self.testVie
UIView 设置阴影
u011248221的博客
06-22 657
// view背景色不能为[UIColor clearColor]，否则阴影不显示 view.backgroundColor = [UIColor whiteColor]; // 阴影颜色 view.layer.shadowColor = [UIColor blueColor].CGColor; // 阴影半径，默认是3 view.layer.shadowRadius = 3; // 阴影偏移，默认是CGSizeMake(0, 3)。 // C...
ios-UIView设置局部阴影，左右上下，左右底部阴影.zip
07-11
文章简介：http://www.jianshu.com/p/f18eb84e213f 最新代码地址：https://github.com/liuxinixn/LXViewShadowPath
UIView设置阴影
weixin_30569033的博客
03-22 80
//UIView设置阴影 [[viewTest layer] setShadowOffset:CGSizeMake(1, 1)]; [[viewTest layer] setShadowRadius:5]; [[viewTest layer] setShadowOpacity:1]; [[viewTest layer] setShadowColor:[UIC...
CALayer设置阴影以及裁剪图片
agp49315的博客
08-15 341
在子视图上面显示图片,让父视图作为子视图的阴影,但是当设置圆角之后,图片的四周需要裁剪,当裁剪之后就会连同阴影一起裁剪掉了,这里实现的方法是当裁剪的时候任然保留原先的父视图,也就是保留阴影效果,具体思路是这样的,请参考以下代码可以帮助好好理解。 //设置阴影和圆角 //1 父图层(负责显示阴影) CALayer *shadowLayer = [[CALayer alloc...
CALayer的阴影添加以及抖动效果构建
陈思宇个人主页 欢迎大家讨论学习
11-07 764
#define angle2Radian(angle) ((angle)/180.0*M_PI) CALayer *cyanLayer = [CALayer layer]; cyanLayer.frame=CGRectMake(100, 100, 200, 200); cyanLayer.backgroundColor=[UIColor redColor].CGColor;
深入解析iOS CALayer层动画及核心原理
- cornerRadius：定义图层边角的圆滑程度。 - transform：提供缩放、旋转和倾斜等变换操作。 **动画的本质** 动画是一种视觉上的错觉，通过快速连续地显示一系列图像（帧）来模拟物体的移动、变化等效果。在计算机...
iOS OC & Swift控件圆角处理方法详解
- **CALayer**：CALayer为视图层提供了一个核心的动画和图形基础设施。它负责给视图渲染内容，包括边框、阴影、圆角等。 - **Category/Extension**：Category是Objective-C中的一个特性，允许在不访问类的源代码的...
高效裁剪iOS ImageView圆角技巧
- 采用`CALayer`的`mask`属性或者`CAShapeLayer`来创建圆角，然后将这个裁剪图层应用到原图层上。 - 在需要显示大量圆角图片的视图中，比如UITableView或UICollectionView，重用图片并只对可见的图片执行裁剪操作，...
iOS Core Animation 教程
- **改变UIView的图层类**：通过继承和自定义CALayer，可以创建具有特殊行为的图层。 - **改变NSView的图层类**：在Mac OS X中，可以使用类似的方法改变NSView的图层类。 - **图层宿主（Layer Hosting）**：在OS X...
iOS为UIView设置阴影效果
01-04
UIView的阴影设置主要通过UIView的layer的相关属性来设置 阴影的颜色 imgView.layer.shadowColor = [UIColor blackColor].CGColor; 阴影的透明度 imgView.layer.shadowOpacity = 0.8f; 阴影的圆角 imgView.layer.shadowRadius = 4.f; 阴影偏移量 imgView.layer.shadowOffset = CGSizeMake(4,4); imgView.layer.shadowOffset = CGSizeMake(0,0); 其实从偏移量上可
自定义 UIView的阴影效果
05-05
自定义 UIView的阴影效果自定义 UIView的阴影效果
UIView设置阴影效果
热门推荐
CrazyDuang的博客
12-23 1万+
UIView的阴影效果主要是通过UIView的layer的相关属性来设置 阴影的颜色 shadowView.layer.shadowColor = [UIColor blackColor].CGColor; 阴影的透明度 shadowView.layer.shadowOpacity = 0.8f; 阴影的圆角 shadowView.layer.shadowRadius = 4.0f;
给uiview增加阴影效果的代码
a377943483的博客
10-09 1297
iPhone之为UIView设置阴影(CALayer的shadowColor，shadowOffset，shadowOpacity，shadowRadius,shadowPath属性) 2013-08-22 14:27 50558人阅读 评论(7) 收藏 举报 分类： iphone（100） 版权声明：本文为博主原创文章，未经博主允许不得转载
给view添加单边阴影
weixin_43205520的博客
11-29 1809
-(void)addSingleSidesShadowToView:(UIView *)theView withColor:(UIColor*)theColor{ //阴影颜色 theView.layer.shadowColor = theColor.CGColor; //阴影偏移 theView.layer.shadowOffset = CGSizeMake(0, theView.frame.size.height ); //阴影透明度，默认0 theVie
UIView top 边的阴影
bravegogo的专栏
04-28 805
     self.bottomBarView.layer.shadowColor = UIColorFromRGB(0x282D3B).CGColor;     self.bottomBarView.layer.shadowOffset = CGSizeMake(0.0f, -2.0f); //[水平偏移, 垂直偏移]     self.bottomBarView.layer.shadowOpa...
UIView同时设置圆角与阴影
最新发布
qq_43441647的博客
12-29 660
UIView同时设置圆角与阴影，新建一个单独的UIView在下层作为阴影，上层原来的UIView设置圆角。
IOS UIView圆角,阴影,边框,渐增光泽
weixin_33955681的博客
06-12 563
为什么80%的码农都做不了架构师？>>> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值