CS193p Notes - Lecture 14: UIKit Integration

lankinen profile image Lankinen ・3 min read
  • 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)

Alt Text

Alt Text

  • 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?) -> Void

struct 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) {


Originally published here


Editor guide