iOS开发实战:从入门到上架App Store(第2版) (移动开发丛书)
上QQ阅读APP看书,第一时间看更新

2.14 通过CALayer对视图进行修饰

CALayer已经不属于UIKit框架中的内容,事实上任何一个UIView的子类中都包含一个CALayer的属性。Layer是视图中专门用来渲染UI的一个层级,而View层除了UI的展现外,还封装了与用户交互的相关功能,并且View层的UI展现也是通过Layer渲染的。因此,在iOS开发中,很多动画的效果都是通过CALayer实现的,这些后面会专门讲解,本节将通过操作Layer层的一些简单属性对基本系统控件的UI表现进行渲染。

2.14.1 创建圆角的控件

UIKit中的大多数控件创建时的尺寸都是规则矩形。在实际项目中,开发者可能会需要使用圆角的控件,以UIButton控件为例,使用Xcode创建一个名为CALayerTest的工程,在ViewController类的viewDidLiad方法中添加如下代码来设置UIButton控件的圆角。

Swift语言版本:

            override func viewDidLoad() {
                super.viewDidLoad()
                let btn = UIButton(type: .custom)
                btn.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
                btn.backgroundColor = UIColor.red
                btn.layer.masksToBounds = true
                btn.layer.cornerRadius = 10
                self.view.addSubview(btn)
            }

Objective-C语言版本:

        - (void)viewDidLoad {
            [super viewDidLoad];
            UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
            btn.frame=CGRectMake(100, 100, 100, 100);
            btn.backgroundColor=[UIColor  redColor];
            btn.layer.masksToBounds = YES;
            btn.layer.cornerRadius = 10;
            [self.view addSubview:btn];
        }

CALayer对象的masksToBounds属性设置为YES,对视图的边界进行修饰的效果才会显现。cornerRadius属性设置圆角的半径,如果控件的形状为矩形,当这个值设置为控件边长的一半时,控件的形状就会变成圆形。运行工程,效果如图2-40所示。

图2-40 圆角控件

2.14.2 创建带边框的控件

在iOS 7系统之前,系统风格的UIButton控件支持一种带边框的风格,在iOS 7之后,系统不再支持创建带边框的UIButton控件了,但是开发者可以根据需要在Layer层做相关修饰来使UIButton控件带边框。

使用如下代码创建带边框的UIButton控件。

Swift语言版本:

            override func viewDidLoad() {
                super.viewDidLoad()
                let btn = UIButton(type: .custom)
                btn.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
                btn.backgroundColor = UIColor.red
                btn.layer.borderColor = UIColor.green.cgColor
                btn.layer.borderWidth = 5
                self.view.addSubview(btn)
            }

Objective-C语言版本:

        - (void)viewDidLoad {
            [super viewDidLoad];
            UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
            btn.frame=CGRectMake(100, 100, 100, 100);
            btn.backgroundColor=[UIColor  redColor];
            btn.layer.borderColor = [UIColor greenColor].CGColor;
            btn.layer.borderWidth = 5;
            [self.view addSubview:btn];
        }

borderColor属性设置边框的颜色,这个属性需要设置为一个CGColor类型的对象,UIColor对象可以通过调用CGColor方法转换成CGColor对象。borderWidth属性设置边框的宽度。运行工程,效果如图2-41所示。

图2-41 带边框的控件

2.14.3 为控件添加阴影效果

通过CALayer的属性还可以为控件添加一个立体的阴影效果,使控件的展示有一定的3D视觉效果,使用如下代码为控件添加阴影。

Swift语言版本:

            override func viewDidLoad() {
                super.viewDidLoad()
                  let btn = UIButton(type: .custom)
                  btn.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
                  btn.backgroundColor = UIColor.red
                  btn.layer.shadowColor = UIColor.gray.cgColor
                  btn.layer.shadowOffset = CGSize(width: 10, height: 10)
                  btn.layer.shadowOpacity = 1
                  self.view.addSubview(btn)
              }

Objective-C语言版本:

        - (void)viewDidLoad {
            [super viewDidLoad];
            UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
            btn.frame=CGRectMake(100, 100, 100, 100);
            btn.backgroundColor=[UIColor  redColor];
            btn.layer.shadowColor = [UIColor grayColor].CGColor;
            btn.layer.shadowOffset = CGSizeMake(10, 10);
            btn.layer.shadowOpacity =1;
            [self.view addSubview:btn];
        }

shadowColor属性设置阴影的颜色必须为CGColor对象;shadowOffset属性设置阴影的位置与原控件位置间的相对偏移;shadowOpacity属性设置阴影的透明度,如果不设置,就默认为全透明,在界面上将看不到任何效果。运行工程,效果如图2-42所示。

图2-42 带阴影效果的控件