iOS开发UI篇—CALayer简介

一、简单介绍

在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.

 

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

复制代码
 1 #import "YYViewController.h"2 3 @interface YYViewController ()4 @property (weak, nonatomic) IBOutlet UIView *customView;5 6 @end7 8 @implementation YYViewController9 
10 - (void)viewDidLoad
11 {
12     [super viewDidLoad];
13     //设置边框的宽度为20
14     self.customView.layer.borderWidth=20;
15     //设置边框的颜色
16     self.customView.layer.borderColor=[UIColor greenColor].CGColor;
17 }
18 
19 @end
复制代码

　　

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

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

3.在layer上添加一张图片 

复制代码
 1 #import "YYViewController.h"2 3 @interface YYViewController ()4 @property (weak, nonatomic) IBOutlet UIView *customView;5 6 @end7 8 @implementation YYViewController9 
10 - (void)viewDidLoad
11 {
12     [super viewDidLoad];
13     //设置边框的宽度为20
14     self.customView.layer.borderWidth=5;
15     //设置边框的颜色
16     self.customView.layer.borderColor=[UIColor blackColor].CGColor;
17     
18     //设置layer的圆角
19     self.customView.layer.cornerRadius=20;
20     
21     //在view的图层上添加一个image，contents表示接受内容
22     self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
23     
24 }
25 @end
复制代码

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

产生的原因说明：

               

customview上的根layer

  

UIimage的图层

   

添加后

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

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

复制代码
 1 - (void)viewDidLoad2 {3     [super viewDidLoad];4     //设置边框的宽度为205     self.customView.layer.borderWidth=5;6     //设置边框的颜色7     self.customView.layer.borderColor=[UIColor blackColor].CGColor;8     9     //设置layer的圆角
10     self.customView.layer.cornerRadius=20;
11     //设置超过子图层的部分裁减掉
12     //UI框架中使用的方法
13 //    self.customView.clipsToBounds=YES;
14     self.customView.layer.masksToBounds=YES;
15     
16     //在view的图层上添加一个image，contents表示接受内容
17     self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
18 }
复制代码

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

 　　4.设置阴影

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

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

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

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

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

　　

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

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

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

在storyboard中新添加一张图片。

简单设置示例

复制代码
 1 #import "YYViewController.h"2 3 @interface YYViewController ()4 @property (weak, nonatomic) IBOutlet UIView *customView;5 @property (weak, nonatomic) IBOutlet UIImageView *iconView;6 7 @end8 9 @implementation YYViewController
10 
11 - (void)viewDidLoad
12 {
13     [super viewDidLoad];
14     
15     //设置图片layer的边框宽度和颜色
16     self.iconView.layer.borderColor=[UIColor brownColor].CGColor;
17     self.iconView.layer.borderWidth=5;
18     
19     //设置layer的圆角
20     self.iconView.layer.cornerRadius=20;
21     //设置超过子图层的部分裁减掉
22        self.iconView.layer.masksToBounds=YES;
23 }
复制代码

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

       

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

复制代码
 1 @implementation YYViewController2 3 - (void)viewDidLoad4 {5     [super viewDidLoad];6 }7 8 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event9 {
10 
11     //通过uiview设置（2D效果）
12 //    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
13     //通过layer来设置（3D效果,x，y，z三个方向）
14     self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
15 }
复制代码
通过uiview设置（2D效果）
       
通过layer设置（3D效果）
       
使用KVC进行设置
复制代码
 1 #import "YYViewController.h"2 3 @interface YYViewController ()4 @property (weak, nonatomic) IBOutlet UIView *customView;5 @property (weak, nonatomic) IBOutlet UIImageView *iconView;6 7 @end8 9 @implementation YYViewController
10 
11 - (void)viewDidLoad
12 {
13     [super viewDidLoad];
14 }
15 
16 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
17 {
18 
19     //通过uiview设置（2D效果）
20 //    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
21     //通过layer来设置（3D效果,x，y，z三个方向）
22 //    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
23     
24     //通过KVC来设置
25     NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];
26     [self.iconView.layer setValue:v forKeyPath:@"transform"];
27     //如果是只需要设置在某一个方向上的移动，可以参考下面的代码
28     //在x的方向上向左移动100
29     [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
30 }
复制代码

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

旋转一个弧度

复制代码
 1 @implementation YYViewController2 3 - (void)viewDidLoad4 {5     [super viewDidLoad];6 }7 8 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event9 {
10 
11     //通过uiview设置（2D效果）
12 //    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
13     //通过layer来设置（3D效果,x，y，z三个方向）
14 //    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
15     
16     //通过KVC来设置
17 //    NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];
18 //    [self.iconView.layer setValue:v forKeyPath:@"transform"];
19 //    //如果是只需要设置在某一个方向上的移动，可以参考下面的代码
20 //    //在x的方向上向左移动100
21 //    [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
22     
23     //旋转
24     self.iconView.layer.transform=CATransform3DMakeRotation(M_PI_4, 1, 1, 0.5);
25 }
复制代码

补充：三维坐标系

 

原文地址：http://www.cnblogs.com/wendingding/p/3800010.html

转载于:https://www.cnblogs.com/SimonGao/p/4531372.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/460152.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

php 多进程 常驻内存,PHP 多进程与信号中断实现多任务常驻内存管理 [Master/Worker 模型]...

php 多进程 常驻内存,PHP 多进程与信号中断实现多任务常驻内存管理 [Master/Worker 模型]...

本文章基于pcntl扩展做的多进程测试。进程调度策略父子进程的调度由操作系统来负责，具体先调度子进程还是父进程由系统的调度算法决定，当然可以在父进程加上延时或是调用进程回收函数pcntl_wait可以先让子进程先运行，进程回收的目的是释放进程…
阅读更多...
RPG的错排

RPG的错排

RPG的错排 Time Limit : 1000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Submission(s) : 25 Accepted Submission(s) : 14 Problem Description今年暑假杭电ACM集训队第一次组成女生队,其中有一队叫RPG,但做为集训队成员之一的野骆驼竟然不知道…
阅读更多...
读取properties

读取properties

为什么80%的码农都做不了架构师？>>> //db 是文件名为db.properties private static final ResourceBundle bundle ResourceBundle.getBundle("db");public static String getProperties(String key){return bundle.getString(key);} 转载于:…
阅读更多...
Java 8新特性（二）

Java 8新特性（二）

2019独角兽企业重金招聘Python工程师标准>>> 集合类的批处理： Java8除了Lambda表达式外还提供了另一个重要的特性，即集合的批处理操作，集合类的批处理操作API的目的是实现集合类的“内部迭代”，并期望充分利用现代多核…
阅读更多...
Python 支付宝支付代码

Python 支付宝支付代码

2019独角兽企业重金招聘Python工程师标准>>> #!/usr/bin/env python # encoding: utf-8Created on 2011-1-5 author: codebackgmail.comimport hashlib import urllib2verfyURL{"https":"https://www.alipay.com/cooperate/gateway.do?servicenotif…
阅读更多...
Linux驱动开发必看详解神秘内核（完全转载）

Linux驱动开发必看详解神秘内核（完全转载）

Linux驱动开发必看详解神秘内核完全转载-链接：http://blog.chinaunix.net/uid-21356596-id-1827434.htmlIT168 技术文档】在开始步入Linux设备驱动程序的神秘世界之前，让我们从驱动程序开发人员的角度看几个内核构成要素，熟悉一些基本的内核概…
阅读更多...
python计算机视觉2：图像边缘检测

python计算机视觉2：图像边缘检测

我是一名初学者，如果你发现文中有错误，请留言告诉我，谢谢 如果需要检测到图像里面的边缘，首先我们需要知道边缘处具有什么特征。 对于一幅灰度图像来说，边缘两边的灰度值肯定不相同，这样我们才能分辨出哪里…
阅读更多...
oracle12c多个pdb,ProxmoxVE 之 oracle12C 多CDB和PDB

oracle12c多个pdb,ProxmoxVE 之 oracle12C 多CDB和PDB

上面左边是我的个人微信，如需进一步沟通，请加微信。 右边是我的公众号“Openstack私有云”，如有兴趣，请关注。继上次在PVE环境上搭建了oracle12C RAC环境(请参考博文“ProxmoxVE 之 安装oracle12C rac集群”)并且安装使用CDB和PD…
阅读更多...
postgresql调优

postgresql调优

http://blog.pgaddict.com/posts/performance-since-postgresql-7-4-to-9-4-pgbench硬件和系统配置操作系统Ubuntu13.04系统位数64CPUIntel(R) Core(TM)2 Duo CPU内存4G硬盘Seagate ST2000DM001-1CH164测试工具PostgreSQL-9.1.11测试工具工具名称pgbench数据量200W（…
阅读更多...
操作系统--进程状态切换以及cpu调度（转）

操作系统--进程状态切换以及cpu调度（转）

http://www.cnblogs.com/coder2012/p/3204730.html 进程的状态转换 进程在运行中不断地改变其运行状态。通常，一个运行进程必须具有以下三种基本状态。 进程状态 执行态run：进程正在使用CPU等待态wait：进程正在等待I/O完成，不在使…
阅读更多...
在Exchange 2010中重建Exchange安全组

在Exchange 2010中重建Exchange安全组

问题:有时候，重新安装Exchange 2010会corrupt掉Exchange安全组，或者出现重复的组。用户在这种情况下会出现访问被拒的情况。分析:我们可以删掉这些安全组，然后最这些安全组进行重建：当你prepare ad的时候，由于OtherWel…
阅读更多...
带弹出列表的EditText

带弹出列表的EditText

最近做的一个Andriod里有一个这个要求，一个东西需要输入，但同时可以在列表直接选择。看到这个需求，瞬间想到了QQ的登录界面，那个账号输入的控件正式我所需要的。 这个账号输入框右边有一个按钮，点击可以显示一个下拉列…
阅读更多...
获取win7时区所有信息

获取win7时区所有信息

打开命令行工具： tzutil /l# 或者输入到文件中tzutil /l > data.txt 1 # -*- utf-8 -*-2 3 """获取win7所有时区信息，并写入到sql语句中4 5 Usage: python data.py -f data.txt -o data.sql6 """7 8 if __name__ &quo…
阅读更多...
linux kill命令信号,Linux kill 命令详解

linux kill命令信号,Linux kill 命令详解

Linux kill 命令很容易让人产生误解，以为它仅仅就是用来杀死进程的。我们来看一下 man page 对它的解释：kill - send a signal to a process.从官方的解释不难看出，kill 是向进程发送信号的命令。当然我们可以向进程发送一个终止运行的信号&a…
阅读更多...
VSTO学习笔记（二）Excel对象模型

VSTO学习笔记（二）Excel对象模型

原文:VSTO学习笔记（二）Excel对象模型上一次主要学习了VSTO的发展历史及其历代版本的新特性，概述了VSTO对开发人员的帮助和效率提升。从这次开始，将从VSTO 4.0开始，逐一探讨VSTO开发中方方面面，本人接触VSTO…
阅读更多...
zen-coding for notepad++，前端最佳手写代码编辑器

zen-coding for notepad++，前端最佳手写代码编辑器

zen-Coding是一款快速编写HTML,CSS（或其他格式化语言）代码的编辑器插件，这个插件可以用缩写方式完成大量重复的编码工作，是web前端从业者的利器。 zen-Coding插件支持多种编辑器，如UltraEdit，Notepad等。 温…
阅读更多...
red hat linux 远程,Red Hat Linux 远程桌面 – 如何设置

red hat linux 远程,Red Hat Linux 远程桌面 – 如何设置

远程访问 RHEL 计算机。运行 RHEL 7.3-8.1 的 Linux 计算机的远程桌面。从任何计算机、平板电脑或移动设备进行访问。立即免费试用！如果您是在家中或在旅途中工作，则可能需要一段时间才能在办公室或在家中访问台式计算机。如果该桌面恰巧在 Linux 操作系…
阅读更多...
通过boundingRectWithSize:options:attributes:context:计算文本尺寸

通过boundingRectWithSize:options:attributes:context:计算文本尺寸

转：http://blog.csdn.net/jymn_chen/article/details/10949279 之前用Text Kit写Reader的时候，在分页时要计算一段文本的尺寸大小，之前使用了NSString类的sizeWithFont:constrainedToSize:lineBreakMode:方法，但是该方法已经被iOS…
阅读更多...
移动后端支持平台Parse将API由Ruby迁移到Go

移动后端支持平台Parse将API由Ruby迁移到Go

Charity Majors是移动后端支持平台Parse的工程师。近日，他撰文介绍了他们将API从Ruby迁移到Go的过程。\\2011年，Parse借助Ruby on Rails快速推出了第一个版本。他们用Unicorn作为HTTP服务器，用Capistrano部署代码，用RVM管理环境&a…
阅读更多...
linux 虚拟钢琴程序,基于 Linux 与 VS1003 的 MIDI 电子节拍器的设计与实现，为乐器演奏（如钢琴、吉他）...

linux 虚拟钢琴程序,基于 Linux 与 VS1003 的 MIDI 电子节拍器的设计与实现，为乐器演奏（如钢琴、吉他）...

基于 Linux 与 VS1003 的 MIDI 电子节拍器的设计与实现，为乐器演奏(如钢琴、吉他)2016-08-22 0 0 0 4.0分其他1积分下载如何获取积分？基于 Linux 与 VS1003 的 MIDI 电子节拍器的设计与实现，为乐器演奏(如钢琴、吉他)提供稳定，丰富…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023