swift-UIView简单创建

文章讲解点

WechatIMG2873.jpeg

1.UIView 的 概述
2.UIView 的 外观属性 及 切边属性
3.UIView 的 几何属性
4.UIView 的 嵌套和层次关系
5.UIView 的 交互属性
6.UIView 的 变形操作
7.CALayer层

1.UIView的概述
UIView是UIKit框架里面最基础的视图类。UIView类定义了一个矩形的区域，并管理该矩形区域内所有屏幕显示。
在iOS应用程序中，每个视图对象都要负责渲染视图矩形区域中的内容，并响应该区域中发生的触碰(touch)事件,这一双重行为意味着视图是应用程序与用户交互的重要机制。
UIView类定义了视图的基本行为，但并不定义其为视觉表现，而是UIKit通过其子类来为文本框(textfile)、按键(button)等这样的标准界面元素定义具体的外观和行为。

如下图：

UIView.png

NSObject根类：NSObject 是一个根类，几乎所有的类都是从它派生而来。根类拥有所有类都有的方法，如 [alloc] 和 [init]。

UIResponsder响应者：UIResponsder 可以让继承它的类响应移动设备的触摸时间，由于可能有多个对象响应同一个时间，iOS将时间沿响应链向上传递。

UIWindow窗口类：UIWindow 提供了一个用于管理和显示视图的窗口。窗口提供一个描述内容的表面，是所有其他视图的根容器。每个应用程序通常都只有一个窗口。

UIView视图类：UIView 视图是所有控件的父类。控件用于响应用户的交互，而UIView则负责内容的显示和布局。

UIControl控件类: UIControl 类几乎是所有交互控件的父类，如按钮(Button)、文本框(TextFile)等。所以UIControl类负责根据触摸事件(Touch)触发相应的动作。

警告视图和动作表单： 警告视图和动作表单都可以用于提示用户。它们向用户显示一条消息和一个或多个可选的按键，用户通过这些选项来响应消息。

2.UIView的外观属性
UIView类的外观属性主要有背景颜色、透明度、显示与隐藏、切边

工程创建如下图

UIView1.jpeg UIView2.jpeg

swift中代码创建如下(1)-背景色backgroundColor

let view = UIView(frame:CGRect(x:40,y:80,width:240,height:240))
view.backgroundColor = UIColor.black
self.view.addSubview(view)

第一行代码中，创建了一个位置为(40,80)、宽度高度都为240的UIView视图
第二行代码中，设置该视图的背景颜色属性为黑色
最后一行代码中通过方法addSubView()，将设置背景颜色后的视图添加到当前的视图控制器的跟视图中

运行后如下图所示

UIView3.jpeg

swift中代码创建如下(2)-透明度alpha

 let view = UIView(frame:CGRect(x:40,y:80,width:240,height:240))
 view.backgroundColor = UIColor.black
 view.alpha = 0.5
 self.view.addSubview(view)

第三行代码中通过设置透明度0.1~1.0值范围来改变透明度显色

运行后如下图所示

UIView4.jpeg

swift中代码创建如下(3)-显示与隐藏isHidder

 let view = UIView(frame:CGRect(x:40,y:80,width:240,height:240))
 view.backgroundColor = UIColor.black
 view.alpha = 0.5
 view.isHidden = true
 view.isHidden = false
 self.view.addSubview(view)

第四行代码中通过设置ishidden的BOOL值为true或者false来改变视图的隐藏或显示
isHidden 默认值为false - (视图处于显示状态)

运行后如下图所示

UIView5.jpeg

swift中代码创建如下(4)-切边属性clipsToBounds

let view = UIView(frame:CGRect(x:40,y:80,width:240,height:240))
view.backgroundColor = UIColor.black
       
let subView = UIView(frame:CGRect(x:40,y:40,width:240,height:240))
subView.backgroundColor = UIColor.green
        
view.addSubview(subView)
self.view.addSubview(view)

首先创建2个UIView视图
第五行代码中将绿色背景的subView视图添加到view视图中，使subView视图作为黑色背景视图的子视图

运行后如下图所示

UIView6.jpeg

接下来设置view视图的clipsToBounds属性

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

clipsToBounds 默认值为false

运行后如下图所示

UIView7.jpeg

3.UIView的几何属性

swift中代码创建如下

 let frame1 = CGRect(x:0,y:0,width:250,height:250)
 let view = UIView(frame:frame1)
 view.backgroundColor = UIColor.black
        
 let frame2 = CGRect(x:0,y:0,width:200,height:200)
 let subView = UIView(frame:frame2)
 subView.backgroundColor = UIColor.green
        
 view.addSubview(subView)
 self.view.addSubview(view)

首先创建2个UIView视图

运行后如下图所示

UIView8.jpeg

接下来修改父视图view的bounds属性

view.backgroundColor = UIColor.black
view.bounds = CGRect(x:-50,y:-50,width:250,height:250)

运行后如下图所示

UIView9.jpeg

接下来继续修改父视图view的bounds属性

view.backgroundColor = UIColor.black
view.bounds = CGRect(x:-50,y:-50,width:200,height:200)

运行后如下图所示

UIView10.jpeg

4.UIView的嵌套和层次关系
视图可以通过嵌套的方式 ，组成复杂的层次结构

视图的这种布局方式被称为视图层次，一个视图可以包含任意数量的子视图，通过为子视图添加子视图的方式，可以实现任意深度的嵌套

视图在视图层次中的组织方法决定了在屏幕上显示的内容，原因是子视图总是被显示在其父视图的上方；这个组织方法还决定了视图如何响应事件和变化。每个父视图都负责管理其直接的子视图，即根据需要调整它们的位置和尺寸，以及响应它们没有处理的事件

insertSubview(view:,at:) 在指定的位置上插入视图
insertSubview(view:,aboveSubview:) 将视图添加到指定视图的上方
insertSubview(view:,belowSubview:) 将视图添加到指定视图的下方
bringSubview(toFront:) 将指定的子视图移动到最前面
bringSubview(toBack:) 将指定的子视图移动到最后面
exchangeSubview(at:,withSubviewAt:) 交换两个指定位置的子视图在父视图中的位置
rermoveFromSuperview 将子视图从父视图中删除

swift中代码创建如下

let firstView = UIView(frame:CGRect(x:20,y:40,width:200,height:200))
firstView.backgroundColor = UIColor.black
        
let secondView = UIView(frame:CGRect(x:50,y:70,width:200,height:200))
secondView.backgroundColor = UIColor.green
        
let thirdView = UIView(frame:CGRect(x:80,y:100,width:200,height:200))
thirdView.backgroundColor = UIColor.red
        
self.view.addSubview(firstView)
self.view.addSubview(secondView)
self.view.addSubview(thirdView)

首先创建3个UIView视图
运行后如下图所示

UIView11.jpeg

观察三个视图的层次关系，然后使用insertSubview(view:,belowSubview)方法，调整thirdView 和 secondView 两个视图在父视图中的层次

调用insertSubview(view:,belowSubview:)方法 - 将第三个视图插入到第二个视图的下方

self.view.insertSubview(thirdView, belowSubview: secondView)

运行后如下图所示

UIView12.jpeg

调用bringSubview(toFront:)方法 - 将第一个视图放置在其父视图的最顶部位置

self.view.bringSubview(toFront: firstView)

运行后如下图所示

UIView13.jpeg

调用removeFromSuperview()方法 - 删除指定视图

 firstView.removeFromSuperview()
 secondView.removeFromSuperview()

运行后如下图所示

UIView14.jpeg

5.UIView的交互属性
通过设置UIView 的 userInteractionEnabled 属性，可以激活用户的交互特性。该属性值为BOOL类型，由属性本身的名称可知，该属性决定UIView是否接受并响应用户的交互。

当该属性的值为false时，UIView会忽略那些发生在其自身的如触摸和键盘等用户时间，并将这些事件从消息队列中移除出去；当值为true时，这些用户事件会正常派发至UIView本身，UIView会按照之前注册的时间处理方法来响应这些事件。

swift中代码创建如下

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let touchView = UIView(frame:CGRect(x:60,y:60,width:200,height:200))
        touchView.backgroundColor = UIColor.red
        self.view.addSubview(touchView)
        
        let guesture = UITapGestureRecognizer(target:self,action:#selector(ViewController.SingleTap))
        touchView.addGestureRecognizer(guesture)
        
    }
    
    @objc func SingleTap()
    {
        print("you touched me")
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
       
    }


}

创建一个UIView视图，并且创建一个UITapGestureRecognizer手势对象
通过addGestureRecognizer方法，将手势对象指定给视图对象。当用户点击该视图时，将调用手势定义的回调方法SingleTap()

运行后如下图所示

UIView15.jpeg

点击图片后如下图所示

UIView16.jpeg

6.UIView的变形操作
CGAffineTransform 仿射转换结构体代表了一种用于仿射变换的矩阵。
结构体的参数指定了从一个坐标系的点转换成另外一个坐标系的点的规则。
仿射变换是一种特殊类型的映射，保留在一个路径中的平行线，但不一定保留长度或角度。缩放、旋转、平移是最常用的仿射变换。

CGAffineTransformMakeTranslation 通过指定的x,y值，创建一个平移矩阵
CGAffineTransformTranslate 对已存在的矩阵进行平移
CGAffineTransformMakeRotation 通过指定角度来创建一个旋转矩阵
CGAffineTransformRotate 对已存在的矩阵进行旋转
CGAffineTransformMakeScale 通过指定的x,y缩放因子，创建一个缩放矩阵
CGAffineTransformfromScale 对已存在的矩阵进行缩放
CGAffineTransformInvert 反转矩阵，将值与反转矩阵相乘得到原先的值
CGAffineTransformConcat 对仿射效果进行叠加操作

swift中代码创建如下

let view = UIView(frame:CGRect(x:0,y:0,width:200,height:50))
view.center = self.view.center
view.backgroundColor = UIColor.red
self.view.addSubview(view)

创建一个UIView视图，将视图的center属性设置为与当前视图控制器根视图的center相同的位置。由于仿射变换是以视图的center为基点的，所以讲视图放置在屏幕的中心位置，方便对仿射变换操作效果进行观察。

运行后如下图所示

UIView17.jpeg

调用transform。translateBy(x:,y:)方法，对视图的仿射矩阵进行平移操作

let transform = view.transform
view.transform = transform.translatedBy(x: 0, y: 200)

运行后如下图所示

UIView18.jpeg

接下来调用transform.scaleBy(x:,y:)方法，对视图的仿射矩阵进行缩放操作

view.transform = transform.scaledBy(x: 1.5, y: 1.5)

运行后如下图所示

UIView19.jpeg

接下来调用transform.rotate(angle)，对视图的仿射矩阵进行旋转操作

view.transform = transform.rotated(by: 3.14/4)

运行后如下图所示

UIView20.jpeg

斜切仿射变换
在上面进行的平移、缩放、旋转操作中，都是采用系统封装好的方法。
系统并没有提供类似于CGAffineTransformMake(CGFloat sx,CGFloat shx,CGFloat shy,CGFloat sy,CGFloat tx,CGFloat ty)方法，自定义视图的变换。

sx 水平方向上的缩放因子
sy 垂直方向上的缩放因子
shx 水平方向上的斜切因子
shy 垂直方向上的斜切因子
tx 水平方向上的位移因子
ty 垂直方向上的位移因子

swift 3.0中CGAffineTransformMake方法已经被取消
但是CGAffineTransform包含的6个属性a、b、c、d、tx、ty
对应CGAffineTransformMake方法中的sx、shx、shy、sy、tx、ty6个参数

view.transform.a = 1.0
view.transform.b = 0.5
view.transform.c = 0.5
view.transform.d = 1.0
view.transform.tx = 0.0
view.transform.ty = 0.0

运行后如下图所示

UIView21.jpeg

7.CALayer层
UIView是iOS系统中界面元素的基础，所有的界面元素都继承自它，它本身完全是由CoreAnimation来实现的
而UIView真正的绘图部分，是由一个叫CALayer(Core Animation Layer)的类来管理的

swift中代码创建如下(1)-CALayer边框

 let view = UIView(frame:CGRect(x:60,y:60,width:200,height:200))
 view.backgroundColor = UIColor.red
 view.layer.borderWidth = 20
 view.layer.borderColor = UIColor.green.cgColor
        
 self.view.addSubview(view)

设置层的边缘宽度borderWidth为20
设置层的边缘颜色borderColor为绿色

运行后如下图所示

UIView22.jpeg

swift中代码创建如下(2)-CALayer阴影

 let view = UIView(frame:CGRect(x:60,y:60,width:200,height:200))
 view.backgroundColor = UIColor.red
       
 view.layer.shadowColor = UIColor.green.cgColor
 view.layer.shadowOffset = CGSize(width:10.0,height:10.0)
 view.layer.shadowOpacity = 0.45
 view.layer.shadowRadius = 5.0
        
 self.view.addSubview(view)
        

设置shadowColor阴影颜色为绿色
设置shadowOffset阴影的偏移值为10.0
设置shadowOpacity阴影的不透明值为0.45
设置shadowRadius模糊半径为5.0

运行后如下图所示

UIView23.jpeg

swift中代码创建如下(3)-CALayer圆角

let view = UIView(frame:CGRect(x:60,y:60,width:200,height:200))
view.backgroundColor = UIColor.purple
view.layer.cornerRadius = 40
        
let subView = UIView(frame:CGRect(x:0,y:0,width:200,height:100))
subView.backgroundColor = UIColor.green
        
view.addSubview(subView)
self.view.addSubview(view)

设置cornerRadius圆角半径为40.当该属性被设置为大于0的值时，将会在层的四周绘制指定半径的圆角

运行后如下图所示

UIView24.jpeg

从效果图中可以看出，虽然给紫色视图添加了圆角效果，但是由于子视图的存在，无法看到上房两个定点的圆角效果。这是因为圆角效果只对视图的背景颜色和层的边框起作用，而不会对层中的内容起作用。不过系统提供了一个属性masksToBounds，将该属性的值设置为true就可以实现上下都有圆角效果了。

view.layer.masksToBounds = true

运行后如下图所示

UIView25.jpeg

如果想效果图运行完后出现一个正圆形，只需要将cornerRadius设置为正方向宽度的一半

view.layer.cornerRadius = 100

运行后如下图所示

UIView26.jpeg

继续改变

view.layer.cornerRadius = 200

运行后如下图所示

UIView27.jpeg

swift中代码创建如下(4)-CALayer渐变

let firstView = CGRect(x:20,y:60,width:240,height:240)
let secondView = UIView(frame:firstView)
        
let secondLayer = CAGradientLayer()
secondLayer.frame = secondView.frame
        
let firstColor = UIColor.yellow.cgColor
let secondColor = UIColor.blue.cgColor
let  thirdColor = UIColor.red.cgColor
        
secondLayer.colors = [firstColor,secondColor,thirdColor]
secondLayer.startPoint = CGPoint(x:0,y:0)
secondLayer.endPoint = CGPoint(x:1,y:1)
secondLayer.locations = [0,0.3,1]
        
secondView.layer.addSublayer(secondLayer)
self.view.addSubview(secondView)

创建一个CAGradientLayer渐变层，并设置渐变层的frame属性与视图的frame属性相同
依次创建三个颜色黄色、蓝色、红色，这三个颜色将作为渐变线上的颜色
startPoint设置渐变层的起点位置为(0,0)
endPoint设置渐变成的结束位置为(1,1)
locations设置渐变线颜色的所占位置
依次将渐变层添加到视图对象的跟层中，最后将视图对象添加到当前视图控制器的根视图中

运行后如图所示

UIView28.jpeg

总结如下图

WechatIMG2872.jpeg