SwiftUI Previews in Objective-C: Simplifying Interactive Interface Development

SwiftUI offers a valuable tool for previewing your interactive interface in real-time. Let's look at how to integrate SwiftUI previews into your Objective-C project. You can also get good helpers that will make previewing easier.

Helpers for displaying interactive Previews

First, create a wrapper for the UIViewController

import SwiftUI

struct VCWrapper: UIViewControllerRepresentable {
    private let vc: UIViewController
    
    init(vc: UIViewController) {
        self.vc = vc
    }
    
    func makeUIViewController(context: Context) -> UIViewController { vc }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}

Then, create an extension for UIViewController for easy wrapper access.

import UIKit

extension UIViewController {
    var preview: VCWrapper { VCWrapper(vc: self) }
}

Finally, add a new file, PreviewScene implementing the protocol PreviewProvider

import SwiftUI

struct PreviewScene: PreviewProvider {
    static var previews: some View {
        
    }
}

Project with Storyboard

Create a simple UIViewController in Storyboard and add a Storyboard ID to the UIViewController.

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet UILabel *switcherIndicator;

@end

ViewController.m

#import "ViewController.h"
#import <SwiftUI/SwiftUI.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
}

- (IBAction)switchToggle:(id)sender {
    UISwitch *switcher = sender;
    self.switcherIndicator.text = switcher.isOn ? @"🟢" : @"🔴";
}

@end

Add a line to PreviewScene to show a preview of the UIViewController from the Storyboard.

UIStoryboard(name: "Main", bundle: nil)
    .instantiateViewController(identifier: "ViewController")
    .preview

Project without Storyboard

Create a CustomVC without a Storyboard, just programmatically

CustomVC.h

#import <UIKit/UIkit.h>

@interface CustomVC : UIViewController

@property UILabel *lbl;

@end

CustomVC.m

#import "CustomVC.h"
#import "UILib.h"

@interface CustomVC ()

@end

@implementation CustomVC

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor grayColor];
    
    UIButton *btn = [UILib btn:30 y:100 caption:@"TapMe"];
    [btn addTarget:self action:@selector(tapBtn) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
    
    self.lbl = [UILib label:160 y:100];
    self.lbl.text = @"txt";
    [self.view addSubview:self.lbl];
}

- (void)tapBtn {
    self.lbl.text = @"ButtonTapped";
}

@end

Before adding a preview, you must add an import to {YourProjectName}-Bridging-Header.h, which is created when you first add a quick file to the project.

#import "CustomVC.h"

Add this UIViewController to the PreviewScene

CustomVC()
    .preview

Conclusion

SwiftUI preview integration provides various ways to improve your Objective-C development workflow. Whether you're working with storyboards or code, SwiftUI Preview offers a quick way to visualize UI changes without running the simulator.