视图UIView和层CALayer

1. UIView概述

UIView是UIKit框架里面最基础的视图类。UIView类定义了一个矩形区域,并管理改矩形区域内所有屏幕显示。 UIView类定义了视图的基本行为,但并不定义其视觉表现,而是UIKit通过其子类来为文本框,按键及工具条这样的标准界面元素定义具体的外观和行为。 UIView视图类如下所示:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
                                      |-- UIWindow   
                                      |-- UILabel 
                                      |-- UIPickerView
                                      |-- UIProgressView
                                      |-- UIScrollView
                                      |-- UIActivityIndicatorView
                                      |-- UIImageView ------------|-- UITableView/UITextView
NSObject ->  UIResponder -> UIView ---|-- UITabBar                        
                                      |-- UIToolbar
                                      |-- UINavigationBar
                                      |-- UIControl                   
                                      |-- UITableViewCell             
                                      |-- UIActionSheet ----------|-- UIButton/UIDatePicker/UIPageControl/UITextField/UISlider/UiSwitch
                                      |-- UIAlertView
                                      |-- UIWebView
                                      |-- UISearchBar

上记视图层次可以下面几个大类:

项目 说明
NSObject根类 NSObject是一个根类,几乎所有的类都是从它派生而来。根类拥有所有类都有的方法,如 alloc 和 init
UIResponsder响应者 UIResponsder可以让继承它的类响应移动设备的触摸事件,由于可能有多个对象响应同一个事件,iOS将事件沿响应链向上传递
UIWindow窗口类 UIWindow提供了一个用于管理和显示视图的窗口。窗口提供了一个描画内容的表面,是所有其他视图的根容器。每个应用程序通常都只有一个窗口
UIView视图类 UIView视图是所有控件的父类。控件用于响应用户的交互,而UIView则负责内容的显示布局
UIControl控件类 UIControl类几乎是所有交互控件的父类,如:按钮,滑块,文本框等。所以UIControl类负责根据触摸事件触发相应的动作
警告视图和动作表单 警告视图和动作表单都可以用于提示用户。它们向用户显示一条消息和一个或多个可选的按键,用户通过这些选项来响应消息

2. UIView的外观属性

UIView类的外观属性常用的主要又背景颜色,透明度,显示与隐藏,切边。

2.1 背景颜色 backgroundColor

1
2
 let view = UIView(frame: CGRect(x: 40, y: 80, width: 200, height: 200))
 view.backgroundColor = UIColor.black

2.2 透明度 alpha

1
2
3
 let view = UIView(frame: CGRect(x: 40, y: 80, width: 200, height: 200))
 view.backgroundColor = UIColor.black
 view.alpha = 0.5

2.3 隐藏属性 hidden

1
2
3
4
 let view = UIView(frame: CGRect(x: 40, y: 80, width: 200, height: 200))
 view.backgroundColor = UIColor.black
 view.alpha = 0.5
 view.isHidden = true

2.4 切边属性 clipsToBounds

在默认情况下,当向一个视图中添加一个子视图时,如果子视图的区域超出了父视图的范围,子视图超出的部分仍然会在屏幕上正常显示。 如果需要限制子视图的显示范围不超出父视图的显示区域,就需要设置父视图的clipsToBounds属性。首先观察clipsToBounds属性在默认状态下的显示效果。

1
2
3
4
5
6
7
8
9
 let view = UIView(frame: CGRect(x: 40, y: 80, width: 300, height: 300))
 view.backgroundColor = UIColor.black

 let subView = UIView(frame: CGRect(x: 40, y: 40, width: 300, height: 300))
 subView.backgroundColor = UIColor.black

 view.addSubview(subView)
 // view.clipsToBounds = true
 self.view.addSubview(view)

2.5 交互属性

在日常的操作中,用于经常要与控件进行交互,比如按钮触摸事件等。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
 // 1. 在viewDidLoad()添加在下记代码
    let touchView = UIView(frame: CGRect(x: 60, y: 60, width: 300, height: 300))
    touchView.backgroundColor = UIColor.black
    self.view.addSubview(touchView)

    let guesture = UITapGestureRecognizer(target: self, action: #selector(singleTap))
    touchView.addGestureRecognizer(guesture)

 // 2. 定义一个singleTap方法
    @objc func singleTap() {
        print("you touched me.")
    }

3. CALayer层

UIView是iOS系统中界面元素的基础,所有界面元素都继承自它,它本身完全由CoreAnimation来实现的。 而UIView真正的绘图部分,是由一个叫CALayer(Core Animation Layer)的类来管理的。 UIView本身更像是一个CALayer的管理器,访问它跟绘图和跟坐标有关的属性,例如:frame和bounds等,实际上内部都是在访问它多包含的CALayer相关属性。

3.1 CALayer边框

通过设置CALayer的borderWidth和borderColor属性,可以给视图添加边框效果:

1
2
3
4
5
 let view = UIView(frame: CGRect(x: 60, y: 60, width: 300, height: 300))
 view.backgroundColor = UIColor.black
 view.layer.borderWidth = 20
 view.layer.borderColor = UIColor.lightGray.cgColor
 self.view.addSubview(view)

3.2 CALayer阴影

通过设置CALayer的几个阴影属性,可以给视图添加阴影效果。

1
2
3
4
5
6
7
8
 let view = UIView(frame: CGRect(x: 60, y: 60, width: 300, height: 300))
 view.backgroundColor = UIColor.black

 view.layer.shadowColor = UIColor.black.cgColor
 view.layer.shadowOffset = CGSize(width: 5.0, height: 5.0)
 view.layer.shadowOpacity = 0.5
 view.layer.shadowRadius = 5.0
 self.view.addSubview(view)

3.2 CALayer圆角

通过设置CALayer的cornerRadius属性,可以给视图添加圆角效果。

1
2
3
4
5
 let view = UIView(frame: CGRect(x: 60, y: 60, width: 300, height: 300))
 view.backgroundColor = UIColor.black

 view.layer.cornerRadius = 50
 self.view.addSubview(view)