01.UIKit框架学习

目录介绍

  • 01.UIKit框架概述
    • 1.1 UIKit框架说明
    • 1.2 View视图
    • 1.3 ViewController
    • 1.4 Window窗口
    • 1.5 Layout布局
  • 02.常用的基础组件
    • 2.1 经常用的组件
    • 2.2 偶尔使用的
    • 2.3 直接使用类
    • 2.4 手势相关类
    • 2.5 系统媒体工具
  • 03.常用基础组件
    • 3.1 UITextView组件
    • 3.2 UIImageView组件
    • 3.3 UIButton组件
  • 04.常用列表组件
    • 4.1 UITableView
    • 4.2 UICollectionView
    • 4.3 UIScrollView

01.UIKit框架概述

1.1 UIKit框架说明

UIKit是一个基于Cocoa Touch的框架，提供了一套丰富的控件和API，用于创建和管理iOS应用程序的用户界面。它包括以下几个主要部分：

  1. 视图（Views）：用于显示内容和接收用户交互。
  2. 控制器（ViewControllers）：管理视图的生命周期和数据。
  3. 窗口（Windows）：应用程序的顶层容器。
  4. 布局（Layouts）：定义视图的布局和大小。

1.2 View视图

UIView是UIKit框架里面最基础的视图类，UIView类定义了一个矩形的区域，并管理该矩形区域内的所有屏幕显示。

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

  1. UIView的frame(origin,size)属性：定义了一个矩形，描述一个UIView的大小和在父坐标的位置
  2. UIView的bounds(origin,size)属性：同样定义了一个矩形，描述一个UIView的大小和自身坐标原点的位置。bounds.origin属性默认值时（0,0），而bounds.size和frame.size是一致的
  3. UIView的center属性：用于确定一个视图的中心位置，参照其父视图的坐标系统。在对视图进行放大，缩小或者旋转，该属性的值不会改变

UIView视图层次管理方法列表

  1. insertSubview(view,at:) 在指定的位置插入视图
  2. insertSubview(UIView, aboveSubview: UIView) 将视图添加到指定视图的上方
  3. insertSubview(UIView, belowSubview: UIView) 将视图添加到指定视图的下方
  4. bringSubview(toFront: view1) 将指定的子视图移动到最前面
  5. bringSubview(toFront: view1) 将指定的子视图移动到最后面
  6. exchangeSubview(at: 0, withSubviewAt: 1) 交换两个指定位置的子视图在父类的位置
  7. removeFromSuperview() 将子视图从父类中移除

1.3 ViewController

1.4 Window窗口

UIKit 提供了 UIWindow 类来表示应用程序的窗口。窗口是 iOS 应用程序中的顶级容器，用于承载应用程序的视图层次结构。

let window = UIWindow(frame: UIScreen.main.bounds)
window.rootViewController = viewController  //设置窗口的根视图控制器
window.backgroundColor = UIColor.white  //设置窗口的背景颜色
window.isHidden = false     //设置窗口的可见性
window.makeKeyAndVisible()    //将窗口设置为主窗口
//监听窗口的旋转事件
NotificationCenter.default.addObserver(self, selector: #selector(handleRotation), name: UIDevice.orientationDidChangeNotification, object: nil)

1.5 Layout布局

使用 UIKit 进行布局是通过使用视图和布局约束来实现的。UIKit 提供了一组类和方法，用于创建和管理视图层次结构，并定义视图之间的布局关系。

1.使用 Auto Layout 进行布局。使用 NSLayoutConstraint 类来创建布局约束，并使用 NSLayoutConstraint.activate 方法将约束应用到视图上。

//这些约束定义了视图与其父视图之间的关系，如顶部、左侧、右侧的间距以及固定的高度。
view.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    view.topAnchor.constraint(equalTo: superview.topAnchor, constant: 20),
    view.leadingAnchor.constraint(equalTo: superview.leadingAnchor, constant: 20),
    view.trailingAnchor.constraint(equalTo: superview.trailingAnchor, constant: -20),
    view.heightAnchor.constraint(equalToConstant: 200)
])

2.使用 Stack View 进行布局。使用 UIStackView 类创建一个堆栈视图，并将多个视图添加到其中。我们可以设置堆栈视图的方向（水平或垂直）、间距、对齐方式和分布方式，以实现自动布局。

let stackView = UIStackView(arrangedSubviews: [view1, view2, view3])
stackView.axis = .vertical
stackView.spacing = 10
stackView.alignment = .center
stackView.distribution = .fill
superview.addSubview(stackView)

02.常用的基础组件

2.1 经常用的组件

  1. 基础 ：UIView、UILabel、UIImage、UIColor、UIImageView、UITextField、UIButton、UITextView、UIFont
  2. 列表 ：UIScrollView、UITableView、UICollectionView、UICollectionViewCell、UITableViewCell
  3. 其他 ：UIViewController

2.2 偶尔使用的

  1. 选择器：UIPickerView（数据选择器）、UIDatePicker（时间选择器）、UIPageControl（与轮播图结合使用的小圆点） UISegmentedControl（分栏控制器）
  2. 滑动控件：UISlider（滑动控件）、UISwitch（开关）、UIProgressView（进度条）
  3. 加载控件：UIActivityIndicatorView（加载菊花）、UIWebView（加载网页）、UIActionSheet、UIAlertView（警告）
  4. Bar组件：UITabBar、UIToolBar、UINavigationBar、UISearchBar
  5. Item组件：UIBarItem、UITabBarItem、UINavigationItem、UIBarButtonItem
  6. 功能型控制器：UITabBarController、UINavigationController、UITableViewController、UICollectionViewController

2.3 直接使用类

  1. 设备：UIDevice（设备）、UIApplication（应用程序）、UIScreen（屏幕）、
  2. 窗口：UIWindow（窗口）、UIResponder（响应对象）、UIControl（响应控件）
  3. 事件：UIEvent（事件）、UIScreenMode、UITouch（触摸）

2.4 手势相关类

  1. UIGestureRecognizer、UILongPressGestureRecognizer、UIPanGestureRecognizer
  2. UIPinchGestureRecognizer、UIRotationGestureRecognizer、UISwipeGestureRecognizer
  3. UITapGestureRecognizer

2.5 系统媒体工具

  1. UIImagePickerController（照片）、UIVideoEditorController（视频）

03.常用基础组件

基础控件学习

  1. 基础控件Swift版本: 2.UIButton方法/属性详解 ：https://www.cnblogs.com/iOSCain/p/4529354.html
  2. 基础控件Swift版本: 3.UILabel方法/属性详解 ：https://www.cnblogs.com/iOSCain/p/4529353.html
  3. 基础控件Swift版本: 4.UIImageView方法/属性详解：https://www.cnblogs.com/iOSCain/category/694174.html
  4. 基础控件Swift版本: 5.UIImage方法/属性详解：https://www.cnblogs.com/iOSCain/p/4529351.html
  5. 基础控件Swift版本: 6.UITextField方法/属性详解：https://www.cnblogs.com/iOSCain/p/4529350.html

高级控件学习

  1. 高级控件Swift版本: 1.UIScrollView方法/属性详解：https://www.cnblogs.com/iOSCain/p/4529349.html
  2. 高级控件Swift版本: 2.UITableView方法/属性详解：https://www.cnblogs.com/iOSCain/p/4529347.html
  3. 高级控件Swift版本: 3.UITableViewCell方法/属性详解：https://www.cnblogs.com/iOSCain/p/4529346.html
  4. 高级控件Swift版本: 4.UICollectionView方法/属性详解：https://www.cnblogs.com/iOSCain/p/4529348.html
  5. 高级控件Swift版本: 5.UITextView方法/属性详解：https://www.cnblogs.com/iOSCain/p/4529345.html
  6. 高级控件Swift版本: 6.UIAlertView方法/属性详解：https://www.cnblogs.com/iOSCain/p/4529344.html
  7. 高级控件Swift版本: 7.UIActionSheet方法/属性详解：https://www.cnblogs.com/iOSCain/p/4529343.html
  8. 基础控件Swift版本: 7.UISwitch方法/属性详解：https://www.cnblogs.com/iOSCain/p/4529342.html
  9. 高级控件Swift版本: 8.UISegemtedControl方法/属性详解：https://www.cnblogs.com/iOSCain/p/4529341.html
  10. 高级控件Swift版本: 9.UINavigationController方法/属性详解：https://www.cnblogs.com/iOSCain/p/4529340.html
  11. 高级控件Swift版本: 10.UIWebView方法/属性详解：https://www.cnblogs.com/iOSCain/p/4529339.html

3.1 UITextView组件

3.2 UIImageView组件

3.3 UIButton组件

04.常用列表组件

4.1 UITableView

UITableView 是一种用于展示和管理可滚动的列表视图的类。它是 iOS 开发中最常用的界面元素之一，用于显示大量数据或项目列表。

以下是使用 UITableView 的一般步骤：

  1. 创建 UITableView 实例。并指定了样式为 .plain。还可以选择其他样式，如 .grouped 或 .insetGrouped。
  2. 设置数据源和代理。将数据源和代理设置为当前视图控制器（或其他适当的对象），以便处理数据和布局相关的操作。
  3. 实现数据源方法。实现了 UITableViewDataSource 协议中的两个方法，用于提供行数和单元格内容。
  4. 实现代理方法（可选）。处理行的选中或其他交互操作，可以实现 UITableViewDelegate 协议中的方法。
  5. 注册单元格类或 NIB 文件。注册了一个自定义的单元格类，以便在 cellForRowAt 方法中使用。
  6. 添加 UITableView 到视图层次结构。将 UITableView 添加到视图层次结构中，以便它可以显示在界面上。
//1.创建 UITableView 实例
let tableView = UITableView(frame: CGRect.zero, style: .plain)
//2.设置数据源和代理
tableView.dataSource = self
tableView.delegate = self
//3.实现数据源方法
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // 返回每个 section 中的行数
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    // 返回指定 indexPath 的单元格
}
//4.实现代理方法（可选）
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    // 处理选中行的操作
}
//5.注册单元格类或 NIB 文件
tableView.register(MyCellClass.self, forCellReuseIdentifier: "CellIdentifier")
//6.添加 UITableView 到视图层次结构

实际上，UITableView 还提供了许多其他功能，例如分区、头部和尾部视图、编辑模式、滚动到指定行等。

4.2 UICollectionView

UICollectionView 是一种用于展示和管理可滚动的、可定制的网格布局的视图。

它类似于 UITableView，但提供了更灵活的布局选项，可以用于创建各种复杂的界面。UICollectionView 的一般步骤：

  1. 创建 UICollectionView。使用 UICollectionViewFlowLayout 作为布局对象。
  2. 设置数据源和代理。将数据源和代理设置为当前视图控制器（或其他适当的对象），以便处理数据和布局相关的操作。
  3. 实现数据源方法。实现了 UICollectionViewDataSource 协议中的两个方法，用于提供单元格的数量和内容。
  4. 实现布局代理方法（可选）。定义单元格的大小或布局，可以实现 UICollectionViewDelegateFlowLayout 协议中的方法。
  5. 注册单元格类或 NIB 文件。注册了一个自定义的单元格类，以便在 cellForItemAt 方法中使用。
  6. 添加 UICollectionView 到视图层次结构。将 UICollectionView 添加到视图层次结构中，以便它可以显示在界面上。
//1.创建 UICollectionView。
let collectionView = UICollectionView(frame: CGRect.zero, collectionViewLayout: UICollectionViewFlowLayout())
//2.设置数据源和代理，
collectionView.dataSource = self
collectionView.delegate = self
//3.实现数据源方法。
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    // 返回每个 section 中的 item 数量
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    // 返回指定 indexPath 的单元格
}
//4.实现布局代理方法（可选）
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    // 返回指定 indexPath 的单元格大小
}
//5.注册单元格类或 NIB 文件
collectionView.register(MyCellClass.self, forCellWithReuseIdentifier: "CellIdentifier")
//6.添加到视图层次结构
view.addSubview(collectionView)

UICollectionView 还提供了许多其他功能，例如分区、头部和尾部视图、选择和高亮等。

4.3 UIScrollView

贡献者: yangchong211