UI进阶--CALayer的简单介绍和使用例子

CALayer:

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

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

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

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

当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView的显示。换句话说,UIView本身不具备显示的功能,是它内部的层才有显示功能。

关于CALayer细节:

首先
CALayer是定义在QuartzCore框架中的
CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
UIColor、UIImage是定义在UIKit框架中的
其次
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的性能会高一些,因为它少了事件处理的功能,更加轻量级

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 cornerRadius;
//内容(比如设置为图片CGImageRef)
@property(retain) id contents;

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)
图示说明:

anchorPoint

它的取值为0~1

红色图层的anchorPoint为(0,0)

红色图层的anchorPoint为(0.5,0.5)

红色图层的anchorPoint为(1,1)

红色图层的anchorPoint为(0.5,0)

position和anchorPoint

添加一个红色图层到绿色图层上,红色图层显示到什么位置,由position属性决定

假设红色图层的position是(100,100)

  到底把红色图层的哪个点移动到(100,100)的坐标位置,锚点。

  红色图层的锚点是(0,0)

红色图层的锚点是(0.5,0.5)

红色图层的锚点是(1,1)

红色图层的锚点是(0.5,0)

基本使用的代码例子:

 1 //
 2 //  UIImage+JW.h
 3 //  图层的基本使用
 4 //
 5 //  Created by xiaomoge on 15-1-5.
 6 //  Copyright (c) 2015年 xiaomoge. All rights reserved.
 7 //
 8
 9 #import <UIKit/UIKit.h>
10
11 @interface UIImage (JW)
12
13 //把一图片,裁剪成圆角的效果,圆角大小、边框、边框颜色的新图片
14 +(UIImage *)cornerImageWithImageName:(NSString *)imageName cornerRadius:(CGFloat)cornerRadius borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor;
15
16 @end
 1 //
 2 //  UIImage+JW.m
 3 //  图层的基本使用
 4 //
 5 //  Created by xiaomoge on 15-1-5.
 6 //  Copyright (c) 2015年 xiaomoge. All rights reserved.
 7 //
 8
 9 #import "UIImage+JW.h"
10
11 @implementation UIImage (JW)
12
13 +(UIImage *)cornerImageWithImageName:(NSString *)imageName cornerRadius:(CGFloat)cornerRadius borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor{
14
15     UIImage *sourceImage = [UIImage imageNamed:imageName];
16     //开启一个位图上下文
17     UIGraphicsBeginImageContextWithOptions(sourceImage.size, NO, 0.0);
18     //把图片画在 位图上下文
19
20     //图片要裁剪成有圆角
21     CALayer *layer = [CALayer layer];
22
23     //图层设置大小
24     layer.bounds = CGRectMake(0, 0, sourceImage.size.width, sourceImage.size.height);
25
26     //设置内容
27     layer.contents = (id)sourceImage.CGImage;
28
29     //设置圆角
30     layer.cornerRadius = cornerRadius;
31     //裁剪
32     layer.masksToBounds = YES;
33
34     //设置边框
35     layer.borderWidth = borderWidth;
36
37     //设置边框颜色
38     layer.borderColor = borderColor.CGColor;
39
40
41     [layer renderInContext:UIGraphicsGetCurrentContext()];
42
43     //从位图上下文 获取新图片
44     UIImage *newImg = UIGraphicsGetImageFromCurrentImageContext();
45
46     //结束位图的编辑
47     UIGraphicsEndImageContext();
48
49     //返回新图片
50     return newImg;
51 }
52 @end
 1 //
 2 //  ViewController.m
 3 //  图层的基本使用
 4 //
 5 //  Created by xiaomoge on 15-1-5.
 6 //  Copyright (c) 2015年 xiaomoge. All rights reserved.
 7 //
 8
 9 #import "ViewController.h"
10 #import "UIImage+JW.h"
11
12 @interface ViewController ()
13 @property (weak, nonatomic) IBOutlet UIImageView *imgView;
14 @property (weak, nonatomic) IBOutlet UIView *redView;
15
16 @end
17
18 @implementation ViewController
19
20 - (void)viewDidLoad {
21     [super viewDidLoad];
22     //获取圆角图片
23     UIImage *image = [UIImage cornerImageWithImageName:@"papa" cornerRadius:10 borderWidth:2 borderColor:[UIColor redColor]];
24
25     //autoLayout影响的尺寸设置
26     // 设置阴影颜色
27     self.redView.layer.shadowColor = [UIColor blackColor].CGColor;
28     // 阴影的透明度
29     self.redView.layer.shadowOpacity = 0.5;
30
31     // 阴影的位置
32     self.redView.layer.shadowOffset = CGSizeMake(150, 150);
33
34     // 设置内容 一般设置图片,并且的图片的数据类型为CGImageRef
35     self.redView.layer.contents = (id)image.CGImage;
36
37     /*
38      *设置了masksToBounds为YES,阴影是不出,原因,阴影也被切掉了
39      *如果想有圆角的效果,又想有阴影,图片本来就有圆角效果
40      *把图片转换成有圆角的图片,再显示
41      */
42 }
43 @end
时间: 2024-10-07 00:02:17

UI进阶--CALayer的简单介绍和使用例子的相关文章

Android Interface(UI) 界面控件简单介绍01

1.TextView:显示文本 常用的属性设置:android:textIsSelectable="true" 设置文本内容可选(触发系统的复制粘贴功能)android:drawableLeft="@mipmap/ic_launcher" 设置文本内容的图标其它包括drawableRight, drawableTop, drawableBottom, drawableStart, drawableEndandroid:text="Hello World!&

UI进阶--UITabBarController简单介绍

UITabBarController跟UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型例子就是QQ.微信等应用.UITabBarController简单介绍中也有说过,为了便于管理控制器,iOS提供了2个比较特殊的控制器:UITabBarController控制器以及UINavigationController控制器. UITabBarController添加控制器的方式有2种: 添加单个子控制器:

iOS开发——UI精选OC篇&amp;UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍

UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍 一:UIApplication:单例(关于单例后面的文章中会详细介绍,你现在只要知道,单例在应用程序的整个生命周期中只有一个对象). App的启动过程 打开程序之后-> 1:Main函数 2:UIapplicationMain函数 3:初始化UIApplication(创建) 4:设置UIApplication代理和相应的代理属性 5:开启事件循环,监听系统事件 6监测info.p

UI进阶 即时通讯之XMPP好友列表、添加好友、获取会话内容、简单聊天

这篇博客的代码是直接在上篇博客的基础上增加的,先给出部分代码,最后会给出能实现简单功能的完整代码. UI进阶 即时通讯之XMPP登录.注册 1.好友列表 初始化好友花名册 1 #pragma mark - 管理好友 2 // 获取管理好友的单例对象 3 XMPPRosterCoreDataStorage *rosterStorage = [XMPPRosterCoreDataStorage sharedInstance]; 4 // 用管理好友的单例对象初始化Roster花名册 5 // 好友操

WeX5的简单介绍及UI的简单讲解

WeX5的简单介绍及UI的简单讲解 (2016-01-13 14:49:05) 标签: it 分类: WeX5的初步自学 一.WeX5的简单讲解 1.WeX5是前端快速开发框架,可开发跨端运行应用.是移动App/微信/WebApp开发利器,一次开发多平台运行. 二.WeX5平台了解 1.菜单和工具栏 :查看API:启动Tomcat:搜索:首选项:复位透视图 2.透视图 :导入java项目:使用svn 3.模型资源 :文件对比 :新建.复制.删除:重命名文刷件新及文件夹:模型编译 切换到资源管理器

iOS开发UI篇-UIWindow简单介绍

iOS开发UI篇—UIWindow简单介绍 一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWindow,接着创建控制器的view,最后将控制器的view添加到UIWindow上,于是控制器的view就显示在屏幕上了 一个iOS程序之所以能显示到屏幕上,完全是因为它有UIWindow.也就说,没有UIWindow,就看不见任何UI界面 补充:UIWindow是创建的第一个视图控件(创建的第一个

iOS开发UI篇—简单介绍静态单元格的使用

iOS开发UI篇-简单介绍静态单元格的使用 一.实现效果与说明 说明:观察上面的展示效果,可以发现整个界面是由一个tableview来展示的,上面的数据都是固定的,且几乎不会改变. 要完成上面的效果,有几种方法: (1)可以直接利用代码,返回三组,在判断每组有多少行,展示些什么数据,这样写"死"的代码建议绝不要使用. (2)稍微灵活一些的,可以把plist文件一懒加载的方式,加载到程序中,动态获取.但是观察界面结构,很容易看出这样需要进行模型嵌套,很麻烦. (3)storyboard提

iOS开发UI篇—DatePicker和UIToolBar控件简单介绍

iOS开发UI篇—DatePicker和UIToolBar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何改成中文的? (1)查看当前系统是否为中文的,把模拟器改成是中文的 (2)属性,locale选择地区 如果默认显示不符合需求.时间有四种模式可以设置,在model中进行设置 时间可以自定义(custom). 设置最小时间和最大时间,超过就会自动回到最小时间. 最大的用途在于自定义键盘:弹出一个日期选择器

ios开发UI基础—Kvc简单介绍

一.KVC简单介绍 KVC key valued coding 键值编码 KVC通过键值间接编码 补充: 与KVC相对的时KVO,即key valued observer 键值观察.监听某一个模型的属性,只要模型属性的值一变化就通知你. 二.使用KVC 1.KVC基本使用介绍 (1)代码示例: 新建一个命令行项目,用以演示KVC的用法 完成之后为项目添加一个Person类. 为Person类添加两个属性(name和age),注意这两个属性的类型. 1 #import <Foundation/Fo