An Intro to SwiftUIKit

Leif
oneleif
Published in
4 min readFeb 6, 2020

Foreword

When Apple released SwiftUI at 2019’s WWDC I was excited to start diving into it. Sadly I haven’t done too much SwiftUI after the Xcode 11 released. Having to still work with UIKit and to keep relearning the ever-changing SwiftUI, I decided to make UIKit just a little bit easier to work with.

SwiftUIKit

I’d like to start by saying that I’m not the biggest fan of Storyboards. I don’t mind using them rather I prefer all code. Now UIKit code is verbose and can be difficult to write sometimes.

Creating a UIButton in UIKit code example

This is where SwiftUIKit comes in! Using SwiftUIKit, I can simplify the previous UIButton example to just a handful of lines of code. Reminder that the code is the same, just that a lot of boilerplate is being handled by SwiftUIKit.

view.embed(withPadding: 8) { Button(“Add”, titleColor: .systemGreen, forEvent: .touchUpInside)

An Intro to SwiftUIKit!

SwiftUIKit is mainly based off of two functions, embed and stack. Embedding a view inside another view is exactly what we did in the first two examples. Now we can add another to the view, but then we have to manage the constraints for the subviews! An easy way to handle this is to use UIStackViews, so in SwiftUIKit there are VStack, HStack, and ZStack. UIStackViews manage the constraints for you and do just as the name suggests, stack views you give it in the order you give them.

Embedding a View

A green view embedded inside a blue view with some padding.

Stack Views

Three green views inside of a vertical stack view embedded in a blue view.

Complex Views

A blue view with a vertical stack view that contains horizontal stack view and a green view. The horizontal stack view contains a green view and a vertical stack view. Finally the vertical stack view contains a label, “Ipsum”, and an orange view.

How to start using SwiftUIKit

Before we start, make sure you have Xcode 11 installed!

Step 1: Open Xcode 11

Step 2: Create a new iOS Storyboard project

Step 3: Add Swift Package

Step 4: Import SwiftUIKit

Make sure you import from “0xLet”. If you can’t find the Swift Package, you might need to sign into your GitHub account. Otherwise try adding the full URL of the GitHub Repository.

Select version 1.0.0

Step 5: Done!

You should be set to mess around and work with SwiftUIKit! If you are having difficulties, feel free to comment or email me! I always willing to help.

What does SwiftUIKit include?

Includes a Navigate Singleton:

  • Navigate using the navigationController
  • Navigate from VC to VC
  • Present Alerts
  • Present Action Sheets
  • Present Toast Messages

Includes the following Containers:

  • HStack
  • VStack
  • ZStack
  • SafeAreaView

Includes the following Views:

  • Button
  • Divider
  • Field
  • Image
  • Label
  • LoadingImage
  • LoadingView
  • MultiLineField
  • NavButton
  • ScrollView
  • Slider
  • Spacer
  • Switch
  • Table (Static)
  • View
  • WebView
  • EffectView

GitHub Example Project

Check it out

--

--