CS193p Notes — Lecture 14: UIKit Integration

  • UIKit is the old way of developing iOS apps
  • SwfitUI (which we have learned in this course) replaced it and is doing most of the things
  • There are still some things that might be better in UIKit or there might be some old code so it’s important to understand how to use it in SwiftUI
  • Instead of having MVVM there is MVC
  • In MVC views are grouped together and controlled by a Controller
  • UIKit is object-oriented (not functional)
  • UIKit uses a concept “delegation”
  • Objects (controllers and views) often delegate some of their functionality to other objects
  • They do this by having a var called delegate
  • delegate var is constrained via a protocol with all the delegatable functionality

Enroute demo UIView (12:25)

  • We create MapView to normal Swift file (not SwiftUI) because there isn't var body

This will draw a map and add pins to the points mentioned in annotations

import SwfitUI
import UIKit
import MapKit
struct MapView: UIViewRepresentable {
let annotations: [MKAnnotation]
func makeUIView(context: Context) -> MKMapView {
let mkMapView = MKMapView()
mkMapView.delegate = context.coordinator
return mkMapView
func updateUIView(_ uiView: MKMapView, context: Context) {

func makeCoordinator() -> Coordinator {
return Coordinator()
class Coordinator: NSObject, MKMapViewDelegate {
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
let view = mapView.dequeueReusableAnnotationView(withIdentifier: "MapViewAnnotation") ??
MKPinAnnotationView(annotation: annotation, reuseIdentifier: "MapViewAnnotation")
view.canShowCallout = true
return view

EmojiArt demo UIViewController (39:13)

import SwiftUI
import UIKit
typealias PickedImageHandler = (UIImage?) -> Voidstruct ImagePicker: UIViewControllerRepresentable {
// could be handled using binding but wanted to show
// that there are different ways
var handlePickedImage: PickedImageHandler
func makeUIViewController(context: Context) -> UIImagePickerController {
let picker = UIImagePickerController()
picker.sourceType = .photoLibrary
picker.delegate = context.coordinator
return picker
func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) { } func makeCoordinator() -> Coordinator {
Coordinator(handlePickedImage: handlePickedImage)
class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
var handlePickedImage: PickedImageHandler
init(handlePickedImage: @escaping PickedImageHandler) {
self.handlePickedImage = handlePickedImage
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info:
[UIImagePickerController.InfoKey : Any]) {
handlePickedImage(info[.originalImage] as? UIImage)
func ImagePickerControllerDidCancel(_ picker: UIImagePickerController) {


Lecture 1
Lecture 2
Lecture 3
Lecture 4
Lecture 5
Lecture 6
Lecture 7
Lecture 8
Lecture 9
Lecture 10
Lecture 11
Lecture 12
Lecture 13
Lecture 14

Originally published: https://www.notion.so/lankinen/Lecture-14-UIKit-Integration-acd3097d3c2141d5bdd50c61647c3b75