UIkit的基本框架

使用语言：swift
在Xcode的mian文件中查找控件：command + shift + L

UILabel

//创建一个label
let label:UILabel = UILabel(frame: CGRectMake(20, 100, 280, 100))
// let label = UILabel(frame: CGRect(x: 100, y: 100, width: 150, height: 40))
label.text = "i am a label,i like ios,i like phone"
//设置字体
label.font = UIFont.boldSystemFont(ofSize: 20)
//设置字体颜色
label.textColor = UIColor.red
//设置label的背景颜色
label.backgroundColor = UIColor.blue
//设置文字的居中
label.textAlignment = NSTextAlignment.center
//设置label的阴影
// label.shadowColor = UIColor.orange
// label.shadowOffset = CGSizeMake(10, 10)//向右向下偏移10像素
//设置label行数:在label的尺寸内将长句换行
// 0表示无限行
label.numberOfLines = 2

self.view.addSubview(label)//把标签和视图关联

1.文本的常用字体样式：

2.背景常用的颜色样式：

3.常用颜色构造：

1.UIColor(white:alpha:)：是一种快速创建灰度颜色的方法，white 是亮度值（0 是黑，1 是白），适合创建背景、灰色文字等
2.UIColor(red:green:blue:alpha:)：通过 RGB 值创建自定义颜色

UIButton

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//创建并设置button类型
/*
case custom = 0 //自定义，无类型
@available(iOS 7.0, *)
case system = 1 //标准的系统类型
case detailDisclosure = 2
case infoLight = 3
case infoDark = 4 //详情的按钮样式
case contactAdd = 5 //添加的按钮样式
*/
let button:UIButton = UIButton(type: .system)
button.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
button.backgroundColor = UIColor.orange

//添加事件
//而 addTarget 传递的 selector 不支持带外部标签的写法，所以必须用 _ 省略标签
button.addTarget(self, action: #selector(click(_:)), for: .touchUpInside)

//设置按钮标题
button.setTitle("an niu", for: .normal)

self.view.addSubview(button)
}
//必须声明这个方法，前面加 @objc才能被Selector调用
//按钮的点击事件需要 Objective-C runtime 支持
@objc func click(_ btn:UIButton){
print("按钮被点击了")
btn.backgroundColor = UIColor.blue
}

常用按钮样式

UIImageView

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//创建一个imageview对象
let imageView = UIImageView(frame: CGRectMake(100, 100, 200, 200))
//给imageview设置图片
imageView.image = UIImage(named: "p1.jpg")
//设置imageview的背景颜色
imageView.backgroundColor = UIColor.red

self.view.addSubview(imageView)

//设置imageView的动画效果
var array:Array<UIImage?> = Array()
for i in 1…4 {
let image:UIImage? = UIImage(named: "p\\(i).jpg")

array.append(image)
}
//设置动画数组
imageView.animationImages = array as? [UIImage]
//设置动画的播放次数
// 0表示循环播放
imageView.animationRepeatCount = 0
//设置播放一轮的时间
imageView.animationDuration = 3
//开始播放动画
imageView.startAnimating()

}

contentMode

contentMode 是 UIImageView 的属性，用来控制图片如何在 UIImageView 的 frame 内缩放、对齐。

控件的layer属性

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
//layer层专门对控件的视图进行渲染

let imageView:UIImageView = UIImageView(frame: CGRectMake(100, 100, 100, 100))
imageView.backgroundColor = UIColor.red

//设置圆角
//imageView.layer.masksToBounds = true
//imageView.layer.cornerRadius = 50 //此时为圆形了
//设置边框
imageView.layer.borderWidth = 2
imageView.layer.borderColor = UIColor.green.cgColor
//设置阴影
imageView.layer.shadowColor = UIColor.brown.cgColor
imageView.layer.shadowOffset = CGSizeMake(10,10)
imageView.layer.shadowOpacity = 1 //设置为不透明

self.view.addSubview(imageView)

}

searchBar

1.相关属性和UI方面

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
//搜索框控件

//创建一个搜索框
let searchBar:UISearchBar = UISearchBar(frame: CGRect(x: 20 ,y: 100 ,width: 320 ,height: 180))

//设置输入框上的默认提示语
searchBar.placeholder = "请输入关键字"
//设置搜索框上显示的默认文字
searchBar.text = "你好"
//设置搜索框风格
searchBar.barStyle = UIBarStyle.default
//设置搜索框背景文字
searchBar.prompt = "这是背景文字"
//设置相应功能按键的显示与否
// searchBar.showsBookmarkButton = true
searchBar.showsSearchResultsButton = true
//设置渲染颜色
searchBar.tintColor = UIColor.red
//设置搜索框颜色
searchBar.barTintColor = UIColor.blue

// 刷新布局，必写
//让控件根据内部子控件内容，自动重新计算、适配自身宽高尺寸，覆盖你手动设置的frame宽高。
searchBar.sizeToFit()

self.view.addSubview(searchBar)

}

2.与用户交互方面

import UIKit

class ViewController: UIViewController,UISearchBarDelegate {
//创建一个搜索框
var searchBar:UISearchBar = UISearchBar(frame: CGRect(x: 20 ,y: 100 ,width: 320 ,height: 180))

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
//搜索框控件

//设置附件视图
searchBar.scopeButtonTitles = ["1","2","3","4"]
//展示附件视图
searchBar.showsScopeBar = true
searchBar.selectedScopeButtonIndex = 0

//设置输入框上的默认提示语
searchBar.placeholder = "请输入关键字"
//设置搜索框上显示的默认文字
// searchBar.text = "你好"
//设置搜索框风格
searchBar.barStyle = UIBarStyle.default
//设置搜索框背景文字
// searchBar.prompt = "这是背景文字"
//设置相应功能按键的显示与否
searchBar.showsBookmarkButton = true
// searchBar.showsSearchResultsButton = true
//设置渲染颜色
// searchBar.tintColor = UIColor.red
//设置搜索框颜色
// searchBar.barTintColor = UIColor.blue

//设置代理
searchBar.delegate = self

self.view.addSubview(searchBar)

}
//我们点击输入框时会弹出系统键盘，但是默认收不回去了
//点击屏幕时系统键盘收起
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
searchBar.resignFirstResponder()//注销第一响应
}

//代理回调函数
//点击附件视图代理方法的回调
func searchBar(_ searchBar: UISearchBar, selectedScopeButtonIndexDidChange selectedScope: Int) {
print(selectedScope)
}
//当输入框文字变化时调用的方法
func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
// print(searchText)
}
//点击图书按钮时触发的方法
func searchBarBookmarkButtonClicked(_ searchBar: UISearchBar) {
print("点击了图书按钮")
}
//点击结果按钮时触发的方法
func searchBarResultsListButtonClicked(_ searchBar: UISearchBar) {

}
//将要进入编辑状态时触发的方法
//false不能进入编辑状态
func searchBarShouldBeginEditing(_ searchBar: UISearchBar) -> Bool {
return true
}
///将要结束编辑状态时触发的方法
func searchBarShouldEndEditing(_ searchBar: UISearchBar) -> Bool {
return true
}
//检测用户的输入文字
func searchBar(_ searchBar: UISearchBar, shouldChangeTextInRanges ranges: [NSValue], replacementText: String) -> Bool {
print(replacementText)
return true
}
//点击取消按钮时触发的方法
func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {

}
//点击"搜索"按钮时触发的方法
func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {

}
}

UISwitch

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//创建一个开关控件
//大小是系统固定的，影响的只有位置
let mySwitch:UISwitch = UISwitch(frame: CGRect(x: 100, y: 100, width: 100, height: 100))

//添加触发事件
mySwitch.addTarget(self, action: #selector(click(_:)), for: .valueChanged)

//设置滑块的颜色
mySwitch.thumbTintColor = UIColor.red
//设置开关开启的颜色
mySwitch.onTintColor = UIColor.blue
//开关的渲染颜色
mySwitch.tintColor = UIColor.green

self.view.addSubview(mySwitch)
}

@objc func click(_ sw:UISwitch){
if sw.isOn{
self.view.backgroundColor = UIColor.gray
}else{
self.view.backgroundColor = UIColor.brown
}
}
}

对绑定事件和执行回调的理解

//……

//添加触发事件
mySwitch.addTarget(self, action: #selector(click(_:)), for: .valueChanged)

//回调方法
@objc func click(_ sw:UISwitch){
if sw.isOn{
self.view.backgroundColor = UIColor.gray
}else{
self.view.backgroundColor = UIColor.brown
}
}

1.语法解释

上面的绑定事件：
1、#selector()
Swift 语法：编译期校验方法是否存在，写错函数名 Xcode 直接报错（老式Selector(“字符串”)写错要运行才崩溃）。
2.、click（_ :）
click：绑定的方法名；
_ : 冒号代表这个函数需要接收 1 个参数（对应下面click(_ sw:UISwitch)的入参），有几个参数就写几个:：

• 无参函数：#selector(click)
• 1 个参数：#selector(click（_ :）)（现在的写法）
• 2 个参数：#selector(click（_ :）)

下面的回调函数：
1、@objc
Swift 的 addTarget 底层依赖 Objective-C 运行时，不加 @objc，OC 找不到这个 Swift 方法，点击 / 切换开关就找不到函数、直接崩溃。
作用：把 Swift 函数暴露给 OC 运行环境识别。

2、_ sw:UISwitch

• _ ：省略外部参数标签，调用时不用写参数名，直接 click(控件)，对应 selector 写法必须带_:
• sw：形参名，系统自动把触发事件的 UISwitch 控件传进来，sw.isOn 就是读取开关当前开 / 关状态；
• UISwitch：限定参数类型只能是开关控件。

2.回调逻辑步骤

第 1 步：你注册 “我要监听这个控件的事件”

switch.addTarget(
self, // 目标：事件来了交给“当前控制器”处理
action: #selector(click(_:)), // 用哪个方法来响应
for: .valueChanged // 监听什么事件：开关“值变了”
)

你在这里没有调用 click，只是告诉系统：将来发生事时帮我调它。

第 2 步：用户动手（滑动开关）

• 用户手指滑开关 → 开关内部检测到 “值变了”
• 开关内部触发 UIControlEvent.valueChanged 事件

第 3 步：系统自动执行回调（核心！）
等价于系统帮你写了一句：

self.click(switch)

所以：click（_ :） 是系统调用的，不是你手动调用的。

第 4 步：你的 click（_ :）执行

UISegementControl

1.相关属性和UI方面

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//创建分段控制器控件
let seg:UISegmentedControl = UISegmentedControl(frame: CGRectMake(20, 100, 280, 40))

//设置按钮
seg.insertSegment(withTitle: "第一第一第一第一第一第一个按钮", at: 0, animated: true)
seg.insertSegment(withTitle: "第二个按钮", at: 1, animated: true)

//添加点击事件
seg.addTarget(self, action: #selector(click(_:)), for: .valueChanged)
//设置分段控制器是否保持选中状态
//true表示无法选中
seg.isMomentary = false
//设置宽度的自适应
// seg.apportionsSegmentWidthsByContent = true
//手动设置某个item的宽度
seg.setWidth(60, forSegmentAt: 0)
//设置内容区域的偏移量
seg.setContentOffset(CGSizeMake(10, 10), forSegmentAt: 1)
//手动设置默认选中item
seg.selectedSegmentIndex = 0
//设置渲染映射
seg.tintColor = UIColor.red

self.view.addSubview(seg)
}

@objc func click(_ seg:UISegmentedControl){
print(seg.selectedSegmentIndex,"按钮被点击")
}

2.切换视图方面

先在Main文件中拖取Navigation Controller视图

import UIKit

class ViewController: UIViewController {

//创建两个视图
let viewBlue:UIView = UIView(frame: CGRectMake(0,0,320, 568))
let viewRed:UIView = UIView( frame: CGRectMake(0,0, 320, 568))

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

let seg: UISegmentedControl = UISegmentedControl(items:
["blue", "red"])

seg.addTarget(self, action: #selector(change(_:)),
for: .valueChanged)

self.navigationItem.titleView = seg
viewBlue.backgroundColor = UIColor.blue
viewRed.backgroundColor = UIColor.red

self.view.addSubview(viewBlue)
self.view.addSubview(viewRed)

//先把蓝色的放在上面，就会把红色挡住
self.view.bringSubviewToFront(viewBlue)
seg.selectedSegmentIndex = 0

}
@objc func change(_ seg:UISegmentedControl){
if seg.selectedSegmentIndex == 0 {
self.view.bringSubviewToFront(viewBlue)
}else{
self.view.bringSubviewToFront(viewRed)
}
}
}

UITextField

1.相关属性和UI方面

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

let textField:UITextField = UITextField(frame:
CGRectMake (20, 100, 280, 40))
//设置输入框风格为line
// textField.borderStyle = UITextField.BorderStyle.line

//设置输入框风格为bezel
textField.borderStyle = UITextField.BorderStyle.bezel
//设置输入框的提示文字
textField.placeholder = "请输入文字"
//设置输入字体颜色
textField.textColor = UIColor.red
//设置输入字体样式
textField.font = UIFont.italicSystemFont(ofSize: 15)
//设置文字的对齐方式
textField.textAlignment = NSTextAlignment.center
//设置背景颜色
// textField.backgroundColor = UIColor.red
//是否每次进入编辑状态时都清空输入框中的文字
textField.clearsOnBeginEditing = true
//是否字体大小自适应
textField.adjustsFontSizeToFitWidth = true
//设置输入框为无效
// textField.isEnabled = false
//设置输入框的左视图
let viewLeft:UIView = UIView(frame: CGRectMake (0,0,40,40))
let viewRight:UIView = UIView(frame: CGRectMake(0,0, 40,40))
viewLeft.backgroundColor = UIColor.blue
viewRight.backgroundColor = UIColor.green
textField.leftView = viewLeft
textField.rightView = viewRight
//设置左右视图的显示模式
textField.leftViewMode = UITextField.ViewMode.always
textField.rightViewMode = UITextField.ViewMode.always

//设置弹出的交互键盘
let board:UIView = UIView(frame: CGRectMake (0,0,320,80))
board.backgroundColor = UIColor.orange
// textField.inputView = board
//设置附键盘视图
textField.inputAccessoryView = board

self.view.addSubview(textField)
}
}

2.与用户交互方面

import UIKit

class ViewController: UIViewController,UITextFieldDelegate {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

let textField:UITextField = UITextField(frame:
CGRectMake (20, 100, 280, 40))
//设置输入框风格为line
// textField.borderStyle = UITextField.BorderStyle.line

//设置输入框风格为bezel
textField.borderStyle = UITextField.BorderStyle.bezel
//设置输入框的提示文字
textField.placeholder = "请输入文字"
//设置输入字体颜色
textField.textColor = UIColor.red
//设置输入字体样式
textField.font = UIFont.italicSystemFont(ofSize: 15)
//设置文字的对齐方式
textField.textAlignment = NSTextAlignment.center
//设置背景颜色
// textField.backgroundColor = UIColor.red
//是否每次进入编辑状态时都清空输入框中的文字
textField.clearsOnBeginEditing = true
//是否字体大小自适应
textField.adjustsFontSizeToFitWidth = true
//设置输入框为无效
// textField.isEnabled = false
//设置输入框的左视图
let viewLeft:UIView = UIView(frame: CGRectMake (0,0,40,40))
let viewRight:UIView = UIView(frame: CGRectMake(0,0, 40,40))
viewLeft.backgroundColor = UIColor.blue
//viewRight.backgroundColor = UIColor.green
textField.leftView = viewLeft
textField.rightView = viewRight
//设置左右视图的显示模式
textField.leftViewMode = UITextField.ViewMode.always
textField.rightViewMode = UITextField.ViewMode.always

//设置弹出的交互键盘
let board:UIView = UIView(frame: CGRectMake (0,0,320,80))
board.backgroundColor = UIColor.orange
// textField.inputView = board
//设置附键盘视图
textField.inputAccessoryView = board

//设置代理
textField.delegate = self
//设置文本框清除按钮的显示模式
textField.clearButtonMode = UITextField.ViewMode.always

self.view.addSubview(textField)
}
//代理方法
//当输入改变时调用的方法
func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
print(string)
return true
}
//已经进入编辑状态时调用的方法
func textFieldDidBeginEditing(_ textField: UITextField) {
print("didBegin")
}
//结束编辑状态时调用的方法
func textFieldDidEndEditing(_ textField: UITextField) {
print("didEnd")
}
//将要进入编辑状态时调用的方法
//false表示不能进入编辑状态
func textFieldShouldBeginEditing(_ textField: UITextField) -> Bool {
print("shouldBegin")
return true
}
//将要结束编辑状态时调用的方法
//false表示不能进入结束编辑状态
func textFieldShouldEndEditing(_ textField: UITextField) -> Bool {
print("shouldEnd")
return true
}
//设置清除键模式是否生效
func textFieldShouldClear(_ textField: UITextField) -> Bool{
return true
}
//点击键盘中return键触发的方法
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
textField.resignFirstResponder()
return true
}
}

UISlider

import UIKit

class ViewController: UIViewController {
//创建一个滑块对象
let slider:UISlider = UISlider(frame: CGRectMake(20,100, 280, 40))
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
//滑块控件UISlider

//添加一个控制方法
slider.addTarget(self, action: #selector(slider(_:)), for: .valueChanged)
//设置滑块的取值范围
slider.maximumValue = 100
slider.minimumValue = 1
//设置是否在滑动时持续触发方法
//false代表停止滑动时才触发方法
slider.isContinuous = true
//设置滑动轴的颜色
slider.minimumTrackTintColor = UIColor.red
slider.maximumTrackTintColor = UIColor.yellow

self.view.addSubview(slider)
}

@objc func slider(_ mysl:UISlider){
print(mysl.value)
}
//点击屏幕滑块到任意位置
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
slider.setValue((Float)(arc4random()%99+1), animated: true)
}
}

UISlider的实操

实现通过滑块的滑动改变图片的大小

import UIKit

class ViewController: UIViewController {
let imageView: UIImageView = UIImageView(frame: CGRectMake(0, 0, 320,400))

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

let slider:UISlider = UISlider(frame: CGRectMake(20, self.view.frame.size.height – 60,280, 20)) ;
self.view.addSubview(slider);

slider.addTarget(self, action: #selector(slider(_:)),
for: .valueChanged)

slider.maximumValue = 100
slider.minimumValue = 0

imageView.image = UIImage(named:"p1.jpg")
self.view.addSubview( imageView)
}

@objc func slider(_ mysl:UISlider){
let value:Float = 1–mysl.value/100

imageView.bounds = CGRectMake(0, 0,320*(CGFloat) (value), 400*(CGFloat) (value))
}
}

UIActivityIndicatorView

import UIKit

class ViewController: UIViewController {
//创建一个活动提示控件
let act:UIActivityIndicatorView = UIActivityIndicatorView(frame: CGRect(x: 320/2–10, y: 568/2, width: 20, height: 20))
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

// UIActivityIndicatorView — 加载时出现的小圈圈

self.view.backgroundColor = UIColor.gray

//设置提示圈颜色
act.color = UIColor.red

//使用时要设置开始动画
act.startAnimating()

self.view.addSubview(act)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
//停止活动
act.stopAnimating()
}
}

UIProgressView

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//进度条控件

let progress:UIProgressView = UIProgressView(progressViewStyle: UIProgressView.Style.default)

progress.frame = CGRect(x: 20, y: 100, width: 280, height: 20)

//设置进度条进度 0-1
progress.progress = 0.5
//设置走过的进度颜色
progress.progressTintColor = UIColor.red
//设置没走过的进度颜色
progress.trackTintColor = UIColor.green

self.view.addSubview(progress)
}
}

UIPageControl

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//创建一个分页控制器
let page:UIPageControl = UIPageControl(frame: CGRect(x: 150, y: 100, width: 100, height: 30))

self.view.backgroundColor = UIColor.red

//设置分页页数
page.numberOfPages = 4
//设置当前页码,下标从0开始
page.currentPage = 3
//设置只有一页时，是否自动隐藏
//true代表会自动隐藏
page.hidesForSinglePage = false
//设置分页控制器的当前页颜色
page.currentPageIndicatorTintColor = UIColor.blue
//设置分页点颜色
page.pageIndicatorTintColor = UIColor.purple

//添加方法
page.addTarget(self, action: #selector(change(_:)), for: .valueChanged)

self.view.addSubview(page)
}

@objc func change(_ pg:UIPageControl){
print(pg.currentPage) //打印当前页号
}

}

UIStepper

import UIKit

class ViewController: UIViewController {

let label:UILabel = UILabel(frame: CGRect(x: 100, y: 300, width: 100, height: 100))

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//创建一个Stepper步进控制器
let steper:UIStepper = UIStepper(frame: CGRect(x: 100, y: 100, width: 100, height: 40))

label.text = String(format: "%f", steper.value)

//设置最大值和最小值。默认是[0,100]
steper.maximumValue = 10
steper.minimumValue = 0

//设置步长
steper.stepValue = 2
//是否连续触发响应函数
steper.isContinuous = false
//值是否持续改变
//false表示长按后松手值不会改变
steper.autorepeat = false
//设置到达最值后是否可以循环触发
steper.wraps = true

//设置控件的颜色
steper.tintColor = UIColor.red //err

//添加方法
steper.addTarget(self, action: #selector(change(_:)), for: .valueChanged)

self.view.addSubview(steper)
self.view.addSubview(label)
}

@objc func change(_ steper:UIStepper){
//改变值时显示在标签里
label.text = String(format: "%f", steper.value)
}
}

UIAlertController

1.UIAlertController = 弹窗本身
就是你看到的那个白色框、标题、消息。
2.UIAlertAction = 弹窗里的按钮
就是 “确定”“取消”“删除” 这些可点击的按钮。
3.addAction = 把按钮加到弹窗里

1.AlertView

import UIKit

class ViewController: UIViewController,UIAlertViewDelegate {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//使用旧方法创建警告框
// let alertView:UIAlertView = UIAlertView(title: "alert", message: "look me", delegate: self, cancelButtonTitle: "cancel", otherButtonTitles: "sure")
//
// //设置alertView的风格
// alertView.alertViewStyle = UIAlertViewStyle.loginAndPasswordInput
//
// alertView.show()

}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
//使用新方法创建警告框
//UIAlertController不用代理，靠闭包 handler 接收点击事件。
let alertView:UIAlertController = UIAlertController(title: "alert", message: "look me", preferredStyle: UIAlertController.Style.alert)
//添加了一个封装了操作逻辑的按钮
let alertActionOne:UIAlertAction = UIAlertAction(title: "cancel", style: UIAlertAction.Style.destructive, handler: {
(alert) -> Void in print("cancel")
})
//添加一个输入框
alertView.addTextField(configurationHandler: {
(textField) -> Void in textField.placeholder = "hello world"
})
alertView.addAction(alertActionOne)
//弹出警告框
self.present(alertView, animated: true)
}

//代理回调方法
// func alertView(alertView:UIAlertView, clickedButtonAtIndex buttonIndex:Int){
// print(buttonIndex)
// }
}

为什么使用新方法创建警告框要重写在touchesBegan里，不能直接写在viewDidLoad？
1、viewDidLoad 阶段页面还没渲染、控制器还没完成挂载到屏幕上，不能执行 present 弹窗；
2、touchesBegan 是点击屏幕后、页面已经完全加载完毕，此时可以正常弹窗。

2.ActionSheet

import UIKit

class ViewController: UIViewController ,UIActionSheetDelegate{

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//警告弹窗

//使用旧的方法创建actionSheet
// let sheet: UIActionSheet = UIActionSheet(title: "actionSheet",delegate: self, cancelButtonTitle: "cancel",
// destructiveButtonTitle: "delete")
//
// sheet.show(in: self.view

}
//使用xin的方法创建actionSheet
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
//创建一个警告弹窗
let actionSheet:UIAlertController = UIAlertController(title:"actionSheet", message: "look me", preferredStyle:
UIAlertController.Style.actionSheet)

let actionAction:UIAlertAction = UIAlertAction(title:"one",style: UIAlertAction.Style.default) {(action) -> Void in
print("helle world")
}

let actionActionOther:UIAlertAction = UIAlertAction(title:"cancel", style: UIAlertAction.Style.cancel) { (action) -> Void in print("cancel")
}

actionSheet.addAction(actionAction)
actionSheet.addAction (actionActionOther)

//弹出警告框
self.present(actionSheet, animated: true)
}

//代理方法,点击按钮时触发
// func actionSheet(actionSheet: UIActionSheet, clickedButtonAtIndex buttonIndex: Int) {
// print(buttonIndex)
// }
}

UIScrollView

一共包含两个部分：
相关属性和UI方面+与用户交互方面(代理方法)

import UIKit

class ViewController: UIViewController,UIScrollViewDelegate {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//滚动视图
let scrollView:UIScrollView = UIScrollView(frame: self.view.frame )

let view:UIView = UIView(frame:
CGRectMake (100,100,100, 100))
view.backgroundColor = UIColor.red
scrollView.addSubview(view)
//设置scrollerView的内容尺寸
scrollView.contentSize = CGSizeMake(self.view.frame.size.width*2, self.view.frame.size.height*2)
//设置回弹效果
scrollView.bounces = true
//设置指示条的位置
scrollView.scrollIndicatorInsets = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 20.0, right: 20.0)
//设置指示条是否显示
scrollView.showsHorizontalScrollIndicator = true
//设置是否翻页效果
scrollView.isPagingEnabled = true

//设置拉伸和缩放的比值
scrollView.minimumZoomScale = 0.5
scrollView.maximumZoomScale = 2;

//设置代理
scrollView.delegate = self

self.view.addSubview(scrollView)
}
//设置拉伸和缩放操作，返回进行缩放的视图
func viewForZooming(in scrollView: UIScrollView) -> UIView?
{
return scrollView.subviews.first
}
//scrollView减速结束时触发的代理方法
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {

}
//scrollView停止拖拽时触发的方法
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {

}
//scrollView停止动画的时候触发的方法
func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {

}
//scrollView停止缩放效果时触发的方法
func scrollViewDidEndZooming(_ scrollView: UIScrollView, with view: UIView?, atScale scale: CGFloat) {

}
//scrollView进行缩放效果时触发的方法
func scrollViewDidZoom(_ scrollView: UIScrollView) {

}
//scrollView开始滑动时触发的方法
func scrollViewDidScroll(_ scrollView: UIScrollView) {

}
//scrollVie滑动到顶部时触发的方法
func scrollViewDidScrollToTop(_ scrollView: UIScrollView) {

}
//scrollVie将要滑动到顶部时触发的方法
//false代表不能进行回到顶部的操作
func scrollViewShouldScrollToTop(_ scrollView: UIScrollView) -> Bool {
return true
}
}

UITableView

UITableView的创建流程+头尾视图的创建+编辑状态的变化+相关代理方法。

1.UITableView的创建的步骤

1.控制器遵守两个协议（必加）
dataSource：提供单元格数据；delegate：处理点击，缺少就空白
2.绑定数据源与代理
3.数据源的三个核心方法
设置分区，设置每个分区的行数，设置每行单元格

2.头尾视图的创建的步骤

首先说明，plain 样式默认没有 Header/Footer 视图。
1.设置头视图的高度
2.必须返回一个view视图，空白占位也要创建View，nil=系统默认空白不生效

3.改变编辑状态的两个步骤

1.设置具体的编辑状态
2.点击左侧删除圆圈触发

import UIKit

//1. 控制器遵守两个协议（必加）
//dataSource：提供单元格数据；delegate：处理点击，缺少就空白
class ViewController: UIViewController ,UITableViewDataSource, UITableViewDelegate{

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//创建tableView 风格可以是普通和分组两种
let tableView:UITableView = UITableView(frame: self.view.frame,style: UITableView.Style.grouped)
//2.绑定数据源与代理
tableView.dataSource = self
tableView.delegate = self

//重新刷新数据
tableView.reloadData()

//设置tableView的回弹效果
tableView.bounces = false

//设置tableView的编辑状态
tableView.isEditing = true

self.view.addSubview(tableView)
}
//3.数据源的三个核心方法
//分区数
func numberOfSections(in tableView: UITableView) -> Int {
return 2
}
// 行数
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 10 // 一共10行
}
// 每行单元格
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = UITableViewCell(style: .default, reuseIdentifier: "cell")
cell.textLabel?.text = "第\\(indexPath.row)行"
return cell
}

//plain 样式默认没有 Header/Footer 视图
//必须同时实现【高度方法 + 返回 header 视图】
//1.设置头视图的高度
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 100
}
//2.必须返回一个view，空白占位也要创建View，nil=系统默认空白不生效
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = UIView()
header.backgroundColor = UIColor.red //上色就能直观看到高度
return header
}
//设置尾视图的高度
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return 100
}
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
let footer = UIView()
footer.backgroundColor = UIColor.blue
return footer
}
//设置cell的高度，默认时44
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 60
}

//相关代理方法
//点击cell触发的方法
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
print("%d, %d", indexPath.section, indexPath.row)
}
//取消选中某个cell触发的方法
func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {

}

//1.设置具体的编辑状态
func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCell.EditingStyle {
return UITableViewCell.EditingStyle.delete
}
//2.点击左侧删除圆圈触发
func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
if editingStyle == .delete {
//1.先删除数据源
//xxxx.remove(at: indexPath.row)
//2.再删除单元格
//xxxx.deleteRows(at: [indexPath], with: .automatic)
}else if editingStyle == .insert{
//xxx.append()
}
}

//设置tableView的移动
func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
// let str = dataArray?[sourceIndexPath.row]
// dataArray?. removeAtIndex(sourceIndexPath.row)
// dataArray?.insert(str!, atIndex: destinationIndexPath.row)
}
}

UITextView

特点：文字链接化，还包括电话，地址，日历等类型

import UIKit

class ViewController: UIViewController,UITextViewDelegate {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

let textVew:UITextView = UITextView(frame: CGRectMake(20, 100,280, 100))
textVew.backgroundColor = UIColor.gray

//设置字体
textVew.font = UIFont.systemFont(ofSize: 25)
//设置文字颜色
textVew.textColor = UIColor.red
//设置对齐模式
textVew.textAlignment = NSTextAlignment.center
//设置是否可编辑
textVew.isEditable = true
//设置内容
// textVew.text = "你好，我是textView\\n 网址：www.baidu.coml"
//设置链接化类型
textVew.dataDetectorTypes = UIDataDetectorTypes.link

//设置代理
textVew.delegate = self

self.view.addSubview(textVew)
}
//输入字符时调用
//false代表此时不能输入
func textView(_ textView: UITextView, shouldChangeTextInRanges ranges: [NSValue], replacementText text: String) -> Bool {
return false
}
//开始编辑时调用
func textViewDidBeginEditing(_ textView: UITextView) {

}
//结束编辑时调用
func textViewDidEndEditing(_ textView: UITextView) {

}
//输入改变时调用
func textViewDidChange(_ textView: UITextView) {

}
//改变选中文字时调用
func textViewDidChangeSelection(_ textView: UITextView) {

}
//将要开始编辑时调用
func textViewShouldBeginEditing(_ textView: UITextView) -> Bool {
return true
}
//将要结束编辑时调用
func textViewShouldEndEditing(_ textView: UITextView) -> Bool {
return true
}

}

UIPickerView

import UIKit

class ViewController: UIViewController,UIPickerViewDelegate,UIPickerViewDataSource {
var dataArray:Array<String>?
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//UIPickerView类似于UITableView，只不过UIPickerView的表现形式是滚动形式
let pickerView:UIPickerView = UIPickerView(frame: CGRect(x: 100, y: 100, width: 200, height: 150))

//设置数据源和代理
pickerView.delegate = self
pickerView.dataSource = self

dataArray = ["one","two","three","four","five"]

self.view.addSubview(pickerView)
}
//设置分区数
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 2
}
//设置每个分组的行数
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return dataArray!.count
}
//设置每一行的内容
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
return dataArray?[row]
}
//设置每个分区的宽度
func pickerView(_ pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat {
return 100
}
}

UIDatePicker

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//系统帮我们封装好的有关时间的操作

let datePicker:UIDatePicker = UIDatePicker(frame:
CGRectMake (100, 100, 200, 200))
//设置显示模式
datePicker.datePickerMode = UIDatePicker.Mode.dateAndTime

//继承了UIControl，可以添加绑定方法
datePicker.addTarget(self, action: #selector(changeDate(_:)), for: .valueChanged)

self.view.addSubview(datePicker)

}
@objc func changeDate(_ sp:UIDatePicker){
let date = sp.date
print(date)
}

}

UIWebView

要导入头文件 import WebKit

import UIKit
import WebKit

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//网页视图，类似于一种简洁的网页浏览器
let webView:WKWebView = WKWebView(frame:self.view.bounds)
// 规范URL写法：https（现在苹果禁用http明文）
guard let url = URL(string: "https://www.baidu.com") else { return }

let req = URLRequest(url: url)
webView.load(req)

self.view.addSubview(webView)
}
}

UICollectionView

1.UICollectionView创建的步骤

1.控制器遵守协议
UICollectionViewDataSource：提供 item 个数、创建 cell；
UICollectionViewDelegateFlowLayout：布局、尺寸、边距、头尾部尺寸
布局类：必须搭配UICollectionViewFlowLayout（流式布局，格子排布规则）

2.绑定代理、注册 Cell
创建布局对象
创建collectionView
绑定数据源、代理
注册cell（必填，复用标识）

3.数据源的三个核心数据源方法
设置分区，设置每个分区的行数，设置每行单元格

import UIKit

class ViewController: UIViewController,UICollectionViewDelegateFlowLayout,UICollectionViewDataSource {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//有点类似于UITableView，但是比UITableView更强大，不仅仅能设计表格类的布局，还能自定义布局(元素的大小，元素的排列方式)

let layout:UICollectionViewFlowLayout =
UICollectionViewFlowLayout()
//设置布局方向
layout.scrollDirection = UICollectionView.ScrollDirection.horizontal
//设置每个元素的大小
layout.itemSize = CGSizeMake (80, 80)
//设置元素间距
layout.minimumInteritemSpacing = 10
//设置行间距
layout.minimumLineSpacing = 30

let collectionView:UICollectionView = UICollectionView(frame:
self.view.frame, collectionViewLayout: layout)

collectionView.delegate = self
collectionView.dataSource = self

//注册普通 Item 单元格
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cellID")

self.view.addSubview(collectionView)
}

func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 100
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell:UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellID", for: indexPath)

cell.backgroundColor = UIColor.red

return cell
}

//可以自定义色块的大小
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let tmp = indexPath.row%3 //0 1 2
if tmp == 0{
return CGSize(width: 50, height: 50)
}else if tmp == 1{
return CGSize(width: 100, height: 100)
}else{
return CGSize(width: 50, height: 50)
}
}
}

其他代理方法：
didSelectItemAt：
它是 UICollectionViewDelegate 协议的核心方法，当用户点击相册中的某张照片 / 视频单元格时，系统会自动调用这个方法。这段代码的核心逻辑是：根据用户点击的资源，调用 toggleSelection 方法来切换选中状态。

trailingSwipeActionsConfigurationForRowAt：处理单元格左滑操作。

contextMenuConfigurationForRowAt：处理单元格长按弹出菜单

2.UICollectionView的实操

做出来一个随机颜色的UICollectionView布局

自定义布局类MyLayout

import UIKit

class MyLayout: UICollectionViewFlowLayout {

var itemCount:Int? //元素个数
var attributeArray:Array<UICollectionViewLayoutAttributes>? //存放layout中的布局属性

override func prepare(){
super.prepare()
attributeArray = Array()
//计算每个元素的宽度
let Width = (UIScreen.main.bounds.size.width – self.minimumInteritemSpacing) / 2
//循环设置每个元素的布局属性
var l = 0 //左边 列高
var r = 0 //右边 列高
for i in 0..<itemCount!{
let indexPath = NSIndexPath(item: i, section: 0)
let atti = UICollectionViewLayoutAttributes(forCellWith: indexPath as IndexPath)
//哪一个列高更小元素放在那一边
let height = (Int)(arc4random()%140 + 50) //随机高度
var tmp = 0//记录元素放在哪一列，0是第一列，1是第二列
var H = 0
if(l <= r){
H = l
l += (height + (Int)(self.minimumLineSpacing))
tmp = 0

}else{
H = r
r += (height + (Int)(self.minimumLineSpacing))
tmp = 1

}
//每个元素块的放置位置和大小
atti.frame = CGRect(x: Int((CGFloat)(tmp) * (Width + self.minimumInteritemSpacing)), y: (Int)(H), width: (Int)(Width), height: height)
attributeArray?.append(atti)
}
if l <= r{
self.itemSize = CGSize(width: Width, height: CGFloat((r * 2 / itemCount!)) – self.minimumLineSpacing)
}else{
self.itemSize = CGSize(width: Width, height: CGFloat((l * 2 / itemCount!)) – self.minimumLineSpacing)
}
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
return attributeArray
}
}

ViewController.swift

import UIKit

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

let myLayout = MyLayout()
myLayout.itemCount = 100

let collectionView:UICollectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: myLayout)

collectionView.delegate = self
collectionView.dataSource = self

collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cellID")

self.view.addSubview(collectionView)

}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 100
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellID", for: indexPath)

//给cell设置随机色
cell.backgroundColor = UIColor(red: CGFloat((CFloat)(arc4random()%255)/255.0), green: CGFloat((CFloat)(arc4random()%255)/255.0), blue: CGFloat((CFloat)(arc4random()%255)/255.0), alpha: 1)

return cell
}
}

UIStackView

用来垂直排列所有卡片的容器，它的好处是自动处理间距，不用手动给每个卡片加垂直约束。

一、核心布局属性（最常用）

1.axis：排列方向（主轴）

可选值：
.horizontal：水平排列（默认）
.vertical：垂直排列
作用：决定子视图是一行排开，还是一列排开。

stackView.axis = .vertical

2.distribution：主轴方向分布方式
主轴：axis 指定的方向（水平 / 垂直）。
可选值（5 种）：

.fill（默认）
拉伸子视图填满主轴空间
按 Content Hugging/Compression Resistance 决定谁被拉伸
.fillEqually
所有子视图等宽 / 等高（平分空间）
.fillProportionally
按子视图固有内容大小比例分配空间
.equalSpacing
子视图尺寸不变，间距自动相等
首尾也有空白间距
.equalCentering
子视图中心间距相等
视图不拉伸，适合图标 + 文字均匀分布

3.alignment：交叉轴对齐方式
交叉轴：与 axis 垂直的方向。

可选值：
.fill（默认）：子视图填满交叉轴
.leading / .top：靠起始边（水平→上对齐；垂直→左对齐）
.trailing / .bottom：靠结束边
.center：居中对齐

// 水平stackView，子视图垂直居中
stackView.alignment = .center

4.spacing：子视图之间的间距

单位：pt
默认：0
作用：相邻子视图之间的最小间距Apple Developer
注意：distribution = .equalSpacing 时，spacing 是最小间距，实际会更大。

stackView.spacing = 10

二、边距与基线相关（常用）

5.isLayoutMarginsRelativeArrangement
核心作用：

• 控制 StackView 的子视图是否以 layoutMargins 作为边界来布局。
• 默认值：false，子视图直接贴着 StackView 的边缘排列，不会留出内边距。

开启 true 时的效果：

• 子视图会自动和 layoutMargins 保持距离，不会顶到边缘；
• 你可以通过 stackView.layoutMargins 设置上下左右的内边距，子视图会自动适应。

典型用法：

stackView.isLayoutMarginsRelativeArrangement = true
stackView.layoutMargins = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)

开启后，子视图就会和 StackView 边缘保持 16pt 的边距，不用再给每个子视图单独设置 leading/trailing 约束。

6.isBaselineRelativeArrangement
核心作用：

• 控制 垂直方向 子视图之间的间距，是按「视图顶部」计算，还是按「文字基线」计算。
• 默认值：false，间距是按子视图的 frame 边界计算的。

开启 true 时的效果

• 垂直 StackView 中，两个带文字的控件（比如两个 UILabel）之间的间距，会从上一行文字的基线，算到下一行文字的基线，而不是从控件的顶部 / 底部计算。
• 这样多行文本的排版会更整齐，视觉上的间距也更均匀。

举个直观例子
比如两个高度不同的 UILabel：

• false：间距按控件底部到下一个控件顶部计算，文字可能看起来挤在一起；
• true：间距按文字基线计算，两行文字的距离会更一致，排版更舒服。

适用场景：

• 垂直排列多行文本、标签、按钮，希望文字对齐更自然。
• 表单、说明文字、多行列表等排版场景。

小建议：

• 做卡片 / 列表：isLayoutMarginsRelativeArrangement = true 基本是必开的；
• 做多行文本：isBaselineRelativeArrangement = true 能让排版好看很多。

三、子视图管理属性

7.arrangedSubviews

var arrangedSubviews: [UIView] { get }

只读数组：当前被 StackView 管理的子视图。
区别：

• addArrangedSubview(view)：加入 arrangedSubviews，自动布局
• addSubview(view)：仅添加到视图层级，不自动布局

8.addArrangedSubview（_ :） / removeArrangedSubview（_ :）

func addArrangedSubview(_ view: UIView)
func removeArrangedSubview(_ view: UIView)

• 添加 / 移除受管理的子视图
• removeArrangedSubview 不会把 view 从父视图移除（只是不再管理布局）

UIViewController

Controller是将view和逻辑结合的控制器层。
本节学习的是ViewController的生命周期的相关方法。

先在main文件里再拖拽一个ViewController2界面，创建一个ViewController2.swift文件与这个界面关联，在第一个ViewController界面中放入一个“跳转”按钮，与第二个界面关联。

下面代码是在ViewController2.swift文件里写的：

import UIKit

class ViewController2: UIViewController {

var tmp:Int = 0

override func loadView() {
super.loadView()
tmp += 1
print(tmp, "loadView")
}

override func viewDidLoad() {
super.viewDidLoad()
tmp += 1
print(tmp, "viewDidLoad")

// Do any additional setup after loading the view.
}
//视图将要展示时调用的方法
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
tmp += 1
print(tmp, "viewWillAppear")
}
//将要布局子视图
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
tmp += 1
print(tmp, "viewWillLayoutSubviews")
}
//已经布局子视图完成
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
tmp += 1
print(tmp, "viewDidLayoutSubviews")
}
//视图已经展示
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
tmp += 1
print(tmp, "viewDidAppear")
}
//视图将要消失
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
tmp += 1
print(tmp, "viewWillDisappear")
}
//视图已经消失
override func viewDidDisappear(_ animated: Bool) {
super.viewDidDisappear(animated)
tmp += 1
print(tmp, "viewDidDisappear")
}

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
//返回上一个controller
self.dismiss(animated: true, completion: nil)
}

从点击“跳转”到结束过程如下：

UINavigationController

UINavigationController 就是一个 “栈管理器”。
它用 栈（先进后出）结构 来管理一堆 UIViewController，是层级结构，负责：
1.压入页面（push）
2.弹出页面（pop）
3.显示顶部页面
4.自动生成导航栏（返回按钮、标题）

main文件准备

拖拽到导航界面

把View Controller界面与ViewController类关联

ViewController.swift文件

1、NavigationController页面与ViewController的切换
2、导航栏设置
导航栏标题规则：导航栏永远读取当前栈顶控制器的 title

• 首页在栈顶 → 显示首页
• push 新页面后新 VC 变成栈顶 → 显示新 VC 的 title（没赋值就空白）

iOS15之后的导航栏不显示且无色，要强制显示并设置背景颜色。
3、导航栏按键的自定义

import UIKit

//导航栏标题规则：导航栏永远读取当前栈顶控制器的 title
//-首页在栈顶 → 显示首页
//-push 新页面后新 VC 变成栈顶 → 显示新 VC 的 title（没赋值就空白）

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

// 内容自动从导航栏下方开始
edgesForExtendedLayout = []
// 强制显示导航栏
navigationController?.setNavigationBarHidden(false, animated: false)
// iOS15+强制显示导航栏底色（默认导航栏透明无底色）
let app = UINavigationBarAppearance()
app.backgroundColor = .gray
navigationController?.navigationBar.standardAppearance = app
navigationController?.navigationBar.scrollEdgeAppearance = app

self.title = "首页"

let label:UILabel = UILabel(frame: CGRect(x: 100, y: 100, width: 100, height: 30))
label.backgroundColor = UIColor.red
label.text = "hello world"

let button:UIButton = UIButton(frame: CGRect(x: 100, y: 200, width: 100, height: 30))
button.backgroundColor = UIColor.green
button.setTitle("切换", for: .normal)
button.addTarget(self, action: #selector(changeController(_:)), for: .touchUpInside)

//自定义导航栏按钮
let barButtonItem:UIBarButtonItem = UIBarButtonItem(title: "返回", style: .plain, target: self, action:#selector(back))

//只能对UI方面进行修改，无法触发方法
//self.navigationItem.backBarButtonItem = barButtonItem

self.navigationItem.leftBarButtonItem = barButtonItem
//使用系统的左右按键样式
let barR1 = UIBarButtonItem(barButtonSystemItem:
UIBarButtonItem.SystemItem.bookmarks, target:self, action:#selector(action1))

let barR2 = UIBarButtonItem(barButtonSystemItem:
UIBarButtonItem.SystemItem.camera, target: self, action:#selector(action2))
self.navigationItem.rightBarButtonItems = [barR1, barR2]

//系统的工具栏
//self.navigationController?.isToolbarHidden = false
//self.toolbarItems = [barR1, barR2]

self.view.addSubview(label)
self.view.addSubview(button)
}
@objc func changeController(_ bnt:UIButton){
let viewController:UIViewController = UIViewController()
//给新添加的页面设背景色
viewController.view.backgroundColor = UIColor.white
viewController.title = "标题2"
// 关键：自定义返回按钮文字（在上一页设置，不是新页面）
let backItem = UIBarButtonItem(title:"首页", style:.plain, target:nil, action:nil)
navigationItem.backBarButtonItem = backItem

self.navigationController?.pushViewController(viewController, animated: true)
}
@objc func back(){
print("返回")
}
@objc func action1() {
print("action1")
}
@objc func action2 () {
print("action2")
}

}

NavigationController的常用属性

一、最最常用

1.navigationBar
导航条本身（顶部那一条）

navigationController?.navigationBar

你可以设置它的颜色、字体、背景、高度、隐藏分割线等。
2.viewControllers
栈里所有控制器（数组）

navigationController?.viewControllers

• 第一个 = 根控制器
• 最后一个 = 当前显示的控制器

3.topViewController
当前最顶部的控制器

navigationController?.topViewController

4.visibleViewController
当前正在显示的控制器（和 top 基本一样）

二、显示 / 隐藏导航栏

5.isNavigationBarHidden
隐藏 / 显示导航条

navigationController?.isNavigationBarHidden = true // 隐藏
navigationController?.isNavigationBarHidden = false // 显示

带动画隐藏：

navigationController?.setNavigationBarHidden(true, animated: true)

三、导航栏外观（最常用）

6.navigationBar.tintColor

导航条上按钮颜色（返回键、文字图标）

navigationController?.navigationBar.tintColor = .red

7.navigationBar.barTintColor
导航条背景颜色

navigationController?.navigationBar.barTintColor = .white

8.navigationBar.titleTextAttributes
导航标题字体、颜色

navigationController?.navigationBar.titleTextAttributes = [
.foregroundColor: UIColor.black,
.font: UIFont.systemFont(ofSize: 17, weight: .bold)
]

9.isTranslucent
导航条半透明（默认 true）

navigationController?.navigationBar.isTranslucent = false

• true：内容会从导航栏底下穿过
• false：内容从导航栏底部开始

10.去掉导航栏底部分割线（超级常用）

navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)

四、手势（侧滑返回）

11.interactivePopGestureRecognizer
侧滑返回手势

// 关闭侧滑返回
navigationController?.interactivePopGestureRecognizer?.isEnabled = false

五、页面切换（方法）

12.pushViewController 进入下一页

navigationController?.pushViewController(vc, animated: true)

13.popViewController 返回上一页

navigationController?.popViewController(animated: true)

14.popToRootViewController 回到根控制器

navigationController?.popToRootViewController(animated: true)

UITabBarController

UITabBarController = 底部导航栏容器控制器

• 它是一个容器，专门管理多个并列页面
• 屏幕底部那一排可点击的按钮，就是它自带的 UITabBar
• 点击按钮 → 自动切换不同页面

关键点：

• 永远只显示一个子页面（当前选中的）
• 子页面之间是并列关系，不是栈
• 每个子页面最好套一层导航控制器（UINavigationController），这样才能 push 跳转

/////////////////////////////////////////////////////////////////////////////////////////////

UIStoryboard

UIStoryboard(name:bundle:) 是 iOS 中用来加载 Storyboard 文件的初始化方法。
参数：
name:要加载的 Storyboard 文件名（不带 .storyboard 后缀）
bundle:要从哪个「资源包」里找这个文件，一般传 nil 表示从当前 App 的主 Bundle 中加载

约束constraint

在 iOS 里，AutoLayout（自动布局）= 用 “约束公式” 代替 frame。

1.写法

piece.leadingAnchor.constraint(equalTo: cornerContainer.leadingAnchor, constant: x)
piece.topAnchor.constraint(equalTo: cornerContainer.topAnchor, constant: y)
piece.widthAnchor.constraint(equalToConstant: …)

这叫 Layout Anchors（锚点约束），是苹果推荐的、最简洁的写法。

最容易混的：equalTo 到底 “等于” 谁？

【谁.锚点】.constraint(equalTo:【和谁.锚点】, constant: 偏移)
左边：我自己（要布局的控件）
equalTo 右边：参照物（父 view 或别的控件）
constant：我相对于参照物的偏移

1.位置约束：leadingAnchor / topAnchor

piece.leadingAnchor.constraint(equalTo: cornerContainer.leadingAnchor, constant: x)

• leadingAnchor = 左边那条线
• equalTo: 父视图的 leadingAnchor = 和父视图左边对齐
• constant: x = 向右偏移 x 个点（x 为负就向左）

同理：

• topAnchor = 上边那条线，constant: y 就是向下偏移 yApple Developer。

一句话：

• leading + top 就是用来定 “左上角坐标” 的。

2.大小约束：widthAnchor / heightAnchor

piece.widthAnchor.constraint(equalToConstant: length)
piece.heightAnchor.constraint(equalToConstant: width)

• equalToConstant: 数值 = 固定宽 / 高，不依赖别的 view。
• 横线：width = 长，height = 粗
• 竖线：width = 粗，height = 长

一句话：

• width + height 就是用来定 “矩形尺寸” 的。

2.关键点

1.关掉 autoresizing（必须！）

piece.translatesAutoresizingMaskIntoConstraints = false

意思：不用旧的 frame 布局，全权交给约束。

2.约束要激活

// 写法1：单个激活
c.isActive = true

// 写法2：批量激活（推荐）
NSLayoutConstraint.activate([
piece.leadingAnchor.constraint(…),
piece.topAnchor.constraint(…)
])

不激活 = 约束只是创建了，没生效。

3.父子关系要先建立

cornerContainer.addSubview(piece)

必须先 addSubview，再加约束，否则崩溃。

3.总结

leadingAnchor / topAnchor → 定坐标（x,y）
widthAnchor / heightAnchor → 定宽高
equalTo: → 相对另一个 view
equalToConstant: → 固定数值
必须：translatesAutoresizingMaskIntoConstraints = false + 激活约束。

CAShapeLayer

一、CAShapeLayer 是什么？

CAShapeLayer = 专门用来画矢量图形的图层

• CAShapeLayer：矢量绘图层（CALayer 子类），只负责渲染形状、线条、颜色
• UIBezierPath：路径容器，定义点、线、圆、圆弧、多边形等轮廓

和普通 UIView 区别：

• UIView：靠 frame 画矩形、图片
• CAShapeLayer：画任意形状（圆、弧、线、多边形、曲线）

二、使用步骤

1.使用UIBezierPath创建路径（path）
2.创建 CAShapeLayer对象layer
3.layer.path = path.cgPath
4.设置颜色、线宽
5.加到视图 layer 上（layer.addSublayer）

// 1. 构造路径
let path = UIBezierPath()
// 2. 构造绘图层
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath // 关键：转 CGPath
// 3. 样式配置
shapeLayer.strokeColor = UIColor.xxx.cgColor
shapeLayer.fillColor = UIColor.xxx.cgColor
shapeLayer.lineWidth = 数值
// 4. 添加到视图
view.layer.addSublayer(shapeLayer)

三、CAShapeLayer 最常用属性

1.path

• 形状路径
• 必须传 CGPath
• 用 UIBezierPath 生成

shapeLayer.path = path.cgPath

2.strokeColor

• 线条颜色
• 必须是 CGColor

shapeLayer.strokeColor = UIColor.blue.cgColor

3.fillColor

• 填充颜色
• 只想画线，必须设为透明

shapeLayer.fillColor = UIColor.clear.cgColor

4.lineWidth

• 线条宽度（pt）

shapeLayer.lineWidth = 4

5.lineCap

• 线头样式

.butt 默认直角
.round 圆头
.square 方头

shapeLayer.lineCap = .round

6.lineJoin

• 线条拐角样式

.miter 直角
.round 圆角
.bevel 斜角

shapeLayer.lineJoin = .round

7.lineDashPattern

• 画虚线（常用）

//→ 实线 5pt + 空 3pt
shapeLayer.lineDashPattern = [5,3] as [NSNumber]

8.strokeStart / strokeEnd

• 控制线条画多少
• 做扫描动画、进度条、路径动画必备

四、UIBezierPath 常用方法（画形状用）

1.基础移动 & 直线（画单条线、折线、L 型）

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0)) // 抬起画笔，移动到起点
path.addLine(to: CGPoint(x: 50, y: 0))// 画直线
path.addLine(to: CGPoint(x: 50, y: 50))// 折角，组成 L 型

2.圆弧 / 圆形（圆环、圆角拐角、整圆）
① 整圆（快门按钮、圆形图标）

let center = CGPoint(x: 40, y: 40) // 圆心
let path = UIBezierPath(
arcCenter: center,
radius: 30, // 圆半径
startAngle: 0, // 起始角度（弧度）
endAngle: 2 * .pi, // 结束角度，2π = 360° 整圆
clockwise: true // 是否顺时针绘制
)

clockwise: true：顺时针绘制圆弧
clockwise: false：逆时针绘制圆弧
它决定了画笔从 startAngle 到 endAngle 是往哪个方向走，直接影响圆弧的形状和位置。

② 局部圆弧（做圆角拐角核心）

// 画 90° 圆弧（L型拐角圆角）
path.addArc(
withCenter: CGPoint(x: 20, y: 20), // 圆弧圆心
radius: 8, // 圆角半径
startAngle: –.pi/2, // 起始角度
endAngle: 0, // 结束角度
clockwise: true
)

角度速记（弧度）：
0 → 向右
.pi/2 → 向下
.pi → 向左
-.pi/2 → 向上

3.圆角矩形（卡片、带圆角边框）

let rect = CGRect(x: 0, y: 0, width: 200, height: 100)
let path = UIBezierPath(roundedRect: rect, cornerRadius: 12)

4.虚线

let path = UIBezierPath()
path.move(to: CGPoint(x: 10, y: 20))
path.addLine(to: CGPoint(x: 200, y: 20))

let layer = CAShapeLayer()
layer.path = path.cgPath
layer.lineDashPattern = [4,4] // 实线4pt，间隔4pt

五、CAShapeLayer 使用场景

1.画圆角 L 型角（你现在的扫描框）
直角 → 圆角
用路径 + 圆弧实现
2.画圆环（快门按钮）
多层圆环
填充透明，只画线
3.圆角矩形卡片
比 cornerRadius 更流畅、不耗性能
4.虚线、分隔线

lineDashPattern = [4,4]

5.扫描动画、波浪动画、圆弧进度条
靠 strokeEnd 从 0→1 动画
6.任意不规则图形
曲线、箭头、标签气泡、图标
7.带圆角的线条
比如你现在的圆滑边角

UIGraphicsGetCurrentContext

一、核心作用

• 获取当前的图形上下文（CGContext）
• 你在draw(_:)里画线条、形状、文字、图片时，必须先拿到这个上下文
• 本质上是一个全局状态指针，记录当前绘制的画布、画笔样式、坐标系统等信息

二、基础用法（标准场景：UIView 的 draw 方法）

override func draw(_ rect: CGRect) {
// 1. 获取当前上下文（必须在 draw 方法里调用）
guard let ctx = UIGraphicsGetCurrentContext() else { return }

// 2. 开始绘制
// 示例：画一个红色圆形
ctx.setFillColor(UIColor.red.cgColor)
ctx.addEllipse(in: CGRect(x: 50, y: 50, width: 100, height: 100))
ctx.fill()
}

UIGraphicsGetCurrentContext() 就是获取当前 “画布” 的入口，是所有自定义绘制代码的起点，没有它就无法执行任何 Core Graphics 绘制操作。