CS193p Notes - Lecture 14: UIKit Integration
Tags: ios, swift
Published: 2020-07-26 16:42:21

- 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](https://dev-to-uploads.s3.amazonaws.com/i/qi674ebo5dklw7ptnvxu.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/suvaqyxjqv3bqqajfrvf.png)

- 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](https://youtu.be/GRX5Dha_Clw?t=745))

- 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`

```swift
import SwfitUI
import UIKit
import MapKit

struct MapView: UIViewRepresentable {
  let annotations: [MKAnnotation]

  func makeUIView(context: Context) -> MKMapView {
    let mkMapView = MKMapView()
    mkMapView.delegate = context.coordinator
    mkMapView.addAnnotations(self.annotations)
    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](https://youtu.be/GRX5Dha_Clw?t=2353))

```swift
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) {
      handlePickedImage(nil)
    } 
  }
}
```


[@RealLankinen](https://twitter.com/reallankinen)

- [Notes 1](https://dev.to/lankinen/cs193p-notes-lecture-1-course-logistics-and-introduction-to-swiftui-44ap)
- [Notes 2](https://dev.to/lankinen/cs193p-notes-lecture-2-mvvm-and-the-swift-type-system-406f)
- [Notes 3](https://dev.to/lankinen/cs193p-notes-lecture-3-reactive-ui-protocols-layout-5g8a)
- [Notes 4](https://dev.to/lankinen/cs193p-notes-lecture-4-grid-enum-optionals-4noj)
- [Notes 5](https://dev.to/lankinen/cs193p-notes-lecture-5-viewbuilder-shape-viewmodifier-fgh)
- [Notes 6](https://dev.to/lankinen/cs193p-notes-lecture-6-animation-1a8f)
- [Notes 7](https://dev.to/lankinen/cs193p-notes-lecture-7-multithreading-emojiart-2ak3)
- [Notes 8](https://dev.to/lankinen/cs193p-notes-lecture-8-gestures-json-1f3m)
- [Notes 9](https://dev.to/lankinen/cs193p-notes-lecture-9-data-flow-26e)
- [Notes 10](https://dev.to/lankinen/cs193p-notes-lecture-10-navigation-textfield-3ei9)
- [Notes 11](https://dev.to/lankinen/cs193p-notes-lecture-11-picker-2hgh)
- [Notes 12](https://dev.to/lankinen/cs193p-notes-lecture-12-core-data-eci)
- [Notes 13](https://dev.to/lankinen/cs193p-notes-lecture-13-persistence-2jeh)
- [**Notes 14**](https://dev.to/lankinen/cs193p-notes-lecture-14-uikit-integration-1p7m)

[Originally published here](https://www.notion.so/lankinen/CS193p-2020-iOS-development-course-from-Stanford-81c094238e9d471bbf059ea8d83b3e15)