MODULAR IOS
How to make reusable SwiftUI code using frameworks
Learn how to modularise a SwiftUI based framework for iOS
This is an update to my original post Reusing code with Swift frameworks. The original post showed how to reuse UIKit based code packaged as a framework. Since then Apple has introduced SwiftUI and this post will show you how to reuse your SwiftUI code.
SwiftUI has brought a natively supported declarative way of building UI’s. Furthermore SwiftUI and Xcode encourage you to build small components which can easily be reused. But what if you want to use the same components across multiple projects?
You might want to build another product for your company and make the app have the same look and feel.
You could copy and paste the same code across to the new app. However if you need to make a change to the existing UI component you’d have to fix in all the projects where the UI component is being used.
So is there a way for you to share you SwiftUI components across multiple apps without copy and pasting your code? Yes there is! Apple provides a tool called frameworks to ease code sharing. Furthermore it also provides us with a mechanism to group related code (modularisation) and restrict access to code (encapsulation).
In this blog post I’ll first cover what frameworks are. Then I’ll show you how to share you SwiftUI components using frameworks. We’ll be creating an example project from scratch with a framework target. We’ll add some SwiftUI components to share. Then we’ll create another project containing a SwiftUI app which will consume the framework through an xcworkspace.
For this post I assume you are already familiar with the basics of SwiftUI, Swift and iOS app development. You should also have an understanding access control in Swift.
For this post I have used Xcode 12.4 and Swift 5.3.2.
What is a framework?
A framework is a structured directory that can contain shared code and shared resources such images and other assets. You can think of it as package to deliver your code and/or other reusable assets to make your code work.
Frameworks can then be included in apps and consumed.
How to build a SwiftUI based framework
In this section we’ll run through the process of creating and building a framework containing SwiftUI code. The SwiftUI code will be provided.
The steps we’ll take in this section:
- Create new Xcode project using the Framework template
- Add a SwiftUI ratings view
1. Create new Xcode project using the Framework template
Let’s begin by creating a framework in Xcode by selecting File > New > Project… from the menu bar.
Continue by selecting Framework project template under the iOS tab. Then click Next.
Finally name your framework, you can name it whatever you want. I am going with the name MySwiftUIFramework. Also make sure that the selected language is Swift. Once you name it click Next and select where you like to store the project and finally click on Create.
You should now have a project with an empty framework. Let’s proceed and add a SwiftUI view to our project that can be consumed by multiple apps.
2. Add a SwiftUI ratings view
In this we’ll be inserting a SwiftUI view component that the integrators will be able to use. The SwiftUI component that we’ll be adding to the framework is a custom ratings view. The code will be provided.
First let’s create a Swift file. From menu select File > New > File…
Next select Swift File from the iOS tab. Then click Next.
Name the file RatingsView then click Create. Finally replace the contents of the file with the following:
The important thing to highlight for this post is that only the code with the public access modifier will be available to the consumer of the framework. Anything else that is not marked public will not be available for the consumer.
That’s it, we now have a SwiftUI component packaged in a framework for reuse.
How to consume SwiftUI code within a framework
In this section we will be consuming the framework that we built on the previous section through an app we will now create.
We will:
- Create a new Xcode project with an iOS app target
- Link the framework target from the previous section using xcworkspace
- Present the rating view within the framework in the app
1. Create new project
Let’s create a new project for our framework consumer app. Select File > New > Project… from the menu bar.
Continue by selecting App project template under the iOS tab. Then click Next.
Finally name your app, you can name it whatever you want. I am going with the name MyConsumerApp. Also make sure that Interface is set to SwiftUI, Life Cycle is set to SwiftUI App and the selected language is Swift. OMyConsumerAppnce you configure it click Next and select where you like to store the project and finally click on Create.
2. Link the framework target using xcworkspace
In the previous step we created a new project using the App template. However to link the framework project with our app we’ll need to create a workspace.
Let’s create the workspace. From menu select File > New > Workspace…
Name the workspace MyConsumerApp then click Save.
At this point you’ll see an empty Xcode window.
Here we’ll add the xcodeproj files into the project navigator. Before we do that close all other Xcode windows. If multiple Xcode windows are open with the same project then only the first one will show the contents of that project.
Click on the “+” button at the bottom left of the project navigator then click Add Files to “MyConsumerApp”.
Then add xcodeproj file of both MyConsumerApp.xcodeproj and MySwiftUIFramework.xcodeproj into it.
Then select MyConsumerApp project on the project navigator.
Then in the editor pane under the General tab and Frameworks, Libraries and Embedded Content click the “+” button. Then select MySwiftUIFramework.framework.
That’s it! The framework is now linked and embedded into MyConsumerApp.
3. Present the rating view within the framework in the app
Finally let’s present the rating view from the framework in the consumer app. Open ContentView.swift and replace the contents with the following:
That’s it! Run the app and see the results.
Note if you are unable to compile and run the app due to different minimum deployment target make sure the app deployment target is equal to or greater than the frameworks.
Summary
In this post we learnt:
- how to share SwiftUI code using frameworks
- how to consume SwiftUI code contained within frameworks inside an app project
Final Thoughts
You can find the full source code in my Github:
There many more reasons why you should modularise your code. Compiled frameworks can help reduce build times in very large complex project. Additionally there are more ways of modularising code. You can find out more in my guide to modular iOS.
If you are interested in how to build the ratings view that was shared in this post you can find it my previous post Drawing a custom rating view in SwiftUI.
