Frameworks

In an earlier article I had discussed how we can create our own frameworks to easily share reusable code. In this article we will take this a little further and create our own reusable UI Components.

Points to Note:

The reusable component we will be creating is based on UIKit. For that reason this component can only be used in iOS Apps. However, you can follow the same steps to create a reusable component for macOS using Cocoa.
UI Components, distributed through a framework, do not render in the project storyboard file.
You should be familiar with creating Embedded Binaries (your own Framework). If you aren’t then please read this article first.
These projects are created on Xcode 10 with Swift 4.2

Getting Started

We will complete the implementation as a 2 step process. Here is the screen that we are planning to implement.

Creating the Reusable Framework

Open Xcode and create a new Framework project.
Name the project “UIVIdentityCard”.
Save the project in any folder.
Create a new Swift file File > New > File > Swift.
Name the file “GenderType.swift”. This is where we will declare the enum that holds the Gender type that we are creating.

Add the following code to the file.

 
import Foundation 
/** Possible scores that can be given. 
*values* 
`Male` 

`Female` 

`NotSpecified` 

*functions* 
`func toString() -> String` 
Used to get the `String` version of the value 

- Author: Arun Patwardhan 
- Version: 1.0 
*/ 
public enum GenderType 
{      
     case Male      
     case Female      
     case NotSpecified 
} 

/** This extension adds the Enum to String converions capability 
- Author: Arun Patwardhan 
- Version: 1.1 
*/ 
extension GenderType 
{      
     /** This function converts from enum value to `String`         
     - important: This function does not do validation         
     - returns: `String`.         
     - requires: iOS 11 or later         
     - Since: iOS 11         
     - author: Arun Patwardhan         
     - copyright: Copyright (c) Amaranthine 2015         
     - version: 1.0 */      
     @available(iOS, introduced: 11.0, message: "convert to String")      
     func toString() -> String      
     {           
          switch self           
          {                
               case .Male:                     
                    return "Male"                
               case .Female:                     
                    return "Female"                
               case .NotSpecified:                     
                    return "Not Specified"           
          }      
     } 
}

Create a new Swift file called “PersonDetailsModel.swift”.

Add the following code to the file.

import Foundation

/**  This struct represents the data that is to be shown in the ID card  
**Variables**  
`personName`  

`personIcon`  

`personDob`  
Date of Birth  

`personAddress` 
 
`personPhone` 
 
`personEmail` 
 
`personCompany`
  
`personHeight`
  
`personWeight`  

`personGender`  

**Important**  There is a variable with the name `entryCount`. This variable keeps tracks of the number of stored properties that exist. The value of this variable will be used to determine the number of rows in the table.The computed property `numberOfRows` is the property used to access the value of `entryCount`.  

- Author: Arun Patwardhan  
- Version: 1.0
*/
public struct PersonDetailsModel
{     
     internal var entryCount : Int = 7     
     public var personName   : String = ""     
     public var personIcon   : UIImage     
     public var personDob    : Date     
     public var personAddress: String = ""     
     public var personPhone  : String = ""     
     public var personEmail  : String = ""     
     public var personCompany: String = ""     
     public var personHeight : Double? = 0.0     
     {          
          willSet          
          {               
               if newValue == nil & personHeight != nil               
               {                    
                    entryCount -= 1               
               }               
               else if newValue != nil & personHeight == nil               
               {                    
                    entryCount += 1               
               }          
          }     
     }     

     public var personWeight : Double? = 0.0     
     {          
          willSet(newValue)          
          {               
               if newValue == nil & personWeight != nil               
               {                    
                    entryCount -= 1               
               }               
               else if newValue != nil & personWeight == nil               
               {                    
                    entryCount += 1               
               }          
          }     
     }     

     public var personGender : GenderType?     
     {          
          willSet          
          {               
               if newValue == nil & personGender != nil               
               {                    
                    entryCount -= 1               
               }               
               else if newValue != nil & personGender == nil               
               {                    
                    entryCount += 1               
               }          
          }     
     }     

     public var numberOfRows : Int     
     {          
          return entryCount     
     }     

     public init(withName newName : String, icon newIcon : UIImage, birthday newDob : Date, address newAddress : String, phone newPhone : String, email newEmail : String, Company newCompany : String, height newHeight : Double?, weight newWeight : Double?, andGender newGender : GenderType?)     
     {          
          personName = newName          
          personIcon = newIcon          
          personDob  = newDob          
          personAddress = newAddress          
          personPhone = newPhone          
          personEmail = newEmail          
          personCompany = newCompany  
        
          if newGender != nil          
          {               
               entryCount += 1          
          }          
          if newWeight != nil          
          {               
               entryCount += 1          
          }          
          if newHeight != nil          
          {               
               entryCount += 1          
          }          

          personHeight = newHeight          
          personWeight = newWeight          
          personGender = newGender     
     }
}

/**     This extension adds protocol conformance for the `CustomStringConvertible` protocol.     

- Author: Arun Patwardhan     
- Version: 1.1
*/
extension PersonDetailsModel : CustomStringConvertible
{     
     public var description: String     
     {          
          return """               
               NAME: \(self.personName)               
               DATE OF BIRTH:\(self.personDob)               
               ADDRESS: \(self.personAddress)               
               EMAIL:\(self.personEmail)               
               PHONE:\(self.personPhone)          
          """     
     }
}

Now we will focus out attention on the View. Create a new file File > New > File > View.
Name the view “UIVIdentityCard.swift”.
Design the view as shown in the screenshot below.
Create the corresponding“UIVIdentityCard.swift” file.
Make the IBOutlet & IBAction connections for the different UI elements.

Add the following code. This is how your file should look after its completed.

/**     The UIVIdentityCard class     
**Functions**     
`public func load(data newPerson : PersonDetailsModel)`     
Used to load the data for the view.     

- Author: Arun Patwardhan     
- Version: 1.0
*/
@IBDesignableopen class UIVIdentityCard: UIView, UITableViewDelegate, UITableViewDataSource
{     
     //IBOutlets --------------------------------------------------     
     @IBOutlet public weak var personIcon : UIImageView!     
     @IBOutlet public weak var personName : UILabel!     
     @IBOutlet public weak var personDetails : UITableView! 

     //Variables --------------------------------------------------     
     public var localTableData : PersonDetailsModel!     
     let nibName : String = "UIVIdentityCard"     
     var view: UIView!     
     let cellIdentifier : String = "IDCard"     
     //Functions --------------------------------------------------     
     /**     This function does the initial setup of the view. There are multiple things happening in this file.     
     1) The first thing that we do is to load the Nib file using the `nibName` we saved above. The UNIb object contains all the elements we have within the Nib file. The UINib object loads the object graph in memory but does not unarchive them. To unarchive them and get the ibjects loaded completely for use we have to instatiate the object and get the arry of top level objects. We are however interested in the first object that is there in the array which is of type `UIView`. The reference to this view is assigned to our local `view` variable.     
     2) Next we specify the bounds of our view     
     3) Finally we add this view as a subview     

     - important: This function does not do validation     
     - requires: iOS 11 or later, the varibale that contains the name of the nib file.     
     - Since: iOS 11     
     - author: Arun Patwardhan     
     - copyright: Copyright (c) Amaranthine 2015     
     - version: 1.0     
     */     
     @available(iOS, introduced: 11.0, message: "setup view")     
     func setup()     
     {          
          //1)          
          self.view = UINib(nibName: self.nibName, bundle: Bundle(for: type(of: self))).instantiate(withOwner: self, options: nil)[0] as! UIView          
     
          //2)          
          self.view.frame = bounds          
          
          //3)          
          self.addSubview(self.view)     
     }     

     public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int     
     {          
          if let count = localTableData?.entryCount          
          {               
               return count - 2          
          }          
          return 0     
     }     

     public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -&amp;gt; UITableViewCell     
     {          
          var cell : UITableViewCell? = tableView.dequeueReusableCell(withIdentifier: cellIdentifier)          

          if nil == cell          
          {               
               cell = UITableViewCell(style: .default, reuseIdentifier: cellIdentifier)          
          }          

          switch indexPath.row          
          {               
               case 0:                    
                    let formatter = DateFormatter()                    
                    formatter.dateStyle = .medium                         
                    cell?.textLabel?.text = "Birthday\t: "+ formatter.string(from: (localTableData?.personDob)!)      

               case 1:                    
                    cell?.textLabel?.text = "Email\t: " + localTableData.personEmail               

               case 2:                    
                    cell?.textLabel?.text = "Phone\t: " + localTableData.personPhone               

               case 3:                    
                    cell?.textLabel?.text = "Address\t: " + localTableData.personAddress               

               case 4:                    cell?.textLabel?.text = "Company\t: " + localTableData.personCompany               

               case 5:                    
                    cell?.textLabel?.text = "Gender\t: " + \(localTableData.personGender?.toString())!               

               case 6:                    
                    cell?.textLabel?.text = "Height\t: \((localTableData.personHeight)!)"               

               case 7:                    
                    cell?.textLabel?.text = "Weight\t: \((localTableData.personWeight)!)"               
               default:                    
                    print("error")          
          }          

          cell?.textLabel?.font = UIFont.boldSystemFont(ofSize: 12.0)          
          cell?.textLabel?.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)          
          return cell!     
     }     

     //Inits --------------------------------------------------                    
     override public init(frame: CGRect)     
     {          
          super.init(frame: frame)          
          self.setup()     
     }     
     
     required public init?(coder aDecoder: NSCoder)     
     {          
          super.init(coder: aDecoder)          
          self.setup()     
     }     

     override open func layoutSubviews()     
     {          
     super.layoutSubviews()     
     }
}

/**     This extension adds the function to load data     
- Author: Arun Patwardhan     
- Version: 1.1
*/
extension UIVIdentityCard
{     
     /**          
     This function loads the data for the view          
     - important: This function does not do validation          
     - parameter newPerson: This is the object representing the person whose information will be displayed on the screen.          
     - requires: iOS 11 or later          
     - Since: iOS 11          
     - author: Arun Patwardhan          
     - copyright: Copyright (c) Amaranthine 2015          
     - version: 1.0     
     */    
     @available(iOS, introduced: 11.0, message: "load data")     
     public func load(data newPerson : PersonDetailsModel)     
     {          
          self.localTableData = newPerson          
          self.personIcon.image = localTableData.personIcon          
          self.personName.text = localTableData.personName          
          self.personDetails.reloadData()     
     }
}

Add the placeholder image for the image view.
Select any of the simulators from the list.
Press ⌘ + B to build the project.
From the Project navigator select the Framework file.
Control click and select “Show in Finder”.
Copy the framework to the “Desktop”.

We are done creating the reusable framework. We will not shift our focus towards testing this framework.

Using the Framework in a project

Let us now test the framework we created. We will do this by incorporating the code in our iOS App.

Create a new project. Call it “IdentityCardTest”.
Save the file in a folder of your choice.
Select the Project file and Embed the Framework into your project.
Add an image to your project, this will be the image that will be displayed in your custom view.
Switch to the Main.storyboard file. Drag a UIView into the ViewControllers view.
Set its identity to the UIVIdentityCard in the identity inspector. Also set its module to UIVIdentityCard.
Create an IBOutlet for this custom view.
Switch to the ViewController.swift file. Import the UIVIdentityCard framework at the top of the file.

Add the following code to the file. We will be creating test data and displaying it on the screen using the Custom view we just designed.

//Functions --------------------------------------------------
/**
    This function prepares and loads the data that is to be shown in the custom view


    - important: This function does not do validation
    - requires: iOS 11 or later, the UIVIdentityCard framework.
    - Since: iOS 11
    - author: Arun Patwardhan
    - copyright: Copyright (c) Amaranthine 2015
    - version: 1.0
*/
@available(iOS, introduced: 11.0, message: "prepares data to be shown on the ID card")
func prepareIDCard()
{
     let displayData : PersonDetailsModel = PersonDetailsModel(withName: "Arun Patwardhan", icon: UIImage(named: "iconHolder.png")!, birthday: Date(timeIntervalSince1970: 44_97_12_000), address: "Mumbai, Maharashtra, India", phone: "91-22-26486461", email: "arun@amaranthine.co.in", Company: "Amaranthine", height: 5.11, weight: nil, andGender: GenderType.Male)

     myIDCard.load(data: displayData)
}

Your completed ViewController.swift should look like this.
Run the project. See if the view loads the way we wish.

Link to Sample Code

https://github.com/AmaranthineTech/ReusuableUIFramework

Video

Creating Reusable UI

Creating Swift Frameworks

Creating Swift Frameworks is easy. The steps below walk you through creating a Swift Framework. The steps below have been performed on Xcode 7.3

Launch Xcode.
Select Create New Project. Or from the menu bar select File > New > Project
From the Template chooser select the Framework & Library Option under iOS
Select Cocoa Touch Framework
Give your project a name.
Make sure the language selected is Swift.
Feel free to enter values of your choice for organisation name and organisation identifier.
Save your project. Optionally, if you have a version control repository like Git you may save it there.
In left hand side bar make sure you have selected the Project Navigator.
Within the Project Navigator make sure you have selected the folder named after your project.
Click on File > New > File.
Make sure iOS Source is selected on the left hand side.
Select the file type as Swift.
Write down the code that you want to make available through a framework.
Now this is the key point. Place the keyword public before all the elements that you want to make publicly accessible.Why do we need to do this? To understand this we need to understand the scope of different elements within a typical Swift project.
Different variables/classes/functions that are declared within a module are accessible freely within the module. Swift files contain code & are themselves found within Swift modules. So a module can mean project or a framework.So, to access the variables/functions/classes from module A in module B, we have to make those elements of module A public in order to access them in module B.

For more information, do read Apple’s Swift Documentation.
The next steps depend on what your ultimate objective is. If you wish to build a framework for distribution then you need to follow a process that is similar to distributing an app. You need to get the code signing done & prepare the project for distribution.
If however, you plan to release it internally, or even just test it. Then you can follow the steps below.
Firstly, our objective is to make this framework run on both OS X(macOS) as well as iOS.
To do that we will be adding a new target. Click on File > New > Target.
Select OS X & the Frameworks & Libraries from the sidebar.
Select Cocoa Touch Framework
Give your framework a unique name. Something that indicates this framework is for OS X(macOS).
Now, we don’t need to rewrite the code for the Mac. We can simply make the file we have written a member for the OS X Framework Target.
To do that make sure that the right hand side sidebar is visible.
In the left hand side sidebar make sure that you have selected the new Swift file with the code you have written in there.
In the right hand side sidebar select the Document Inspector.
Under Target Membership make sure that both the Targets are checked. The target for iOS should already be checked.
Thats it. If you do not wish to make your code available for both iOS & OS X then skip steps 19 – 27.
The next part is building the framework. We will be building this framework for use internally. We will first build the iOS framework.
From the tool bar, make sure the target selected is for iOS. For the device you can select any device that you wish.
Then click on Product > Build to build the framework. If all goes well then you should get the message Build Succeeded on your screen.
To get hold of the framework, expand the product folder from the left hand side sidebar.
Select the Framework you have just built. Note that it should be black in colour. If you have opted to make a framework for OS X, then you should see that framework listed too, it should be in red colour. The red colour indicates that it has not yet been built.
Control-click on the iOS version of the framework and select Show in Finder.
This will take you directly to the folder containing the framework. Copy paste it to the desktop or to any other location to easily access it when required.
Repeat steps 30 – 34 to build the OS X version of the Framework. Make sure that the target selected is OS X.
Once we have done that, we need to test the framework we just created.
Create a dummy iOS Project for testing.
From the left hand side project navigator make sure that the blue project settings file is selected.
Make sure that the Target is selected within the settings screen.
Under the General tab scroll down to the Embedded Binaries section.
Click on the ‘+’ sign to add a framework.
Click on Add other
Navigate to the folder where you saved the Framework and select it.
Click Open
Select Copy Items if needed
The framework should be added to your project.
In the ViewController.swift file import your Framework: import CustomStack
Replace CustomStack with your frameworks name.
Try to write the code which uses the elements you have packaged within the framework.

Creating Mixed Frameworks (Swift & Objective-C)

The process of creating a mixed library is straightforward. Its almost the same as above with some minor differences.

Follow the steps mentioned above to add your Swift Code.
Add your objective-C files to the project.
While adding the files make sure that the checkbox for the targets is selected appropriately.
Write the code that you wish to write in Objective-C. Of course, if you are including prewritten files then you do not need to do this.
To make the Objective-C code accessible in Swift you need to make the following changes:
1. In the umbrella header of your framework add the line to import the header
```
#import "<FrameworkName>/<HeaderName>.h
```
2. Modify the access property located within the target membership of the Objective-C header file.
This should make your Objective-C code accessible to the Swift files.
Test the changes by accessing your Objective-C code in your Swift files within the framework.
Test the changes further by embedding your mixed language framework into a project & then try to access both the Swift as well as Objective-C versions of the code in your new project.
To make your Swift code accessible to Objective-C File make the following changes:
1. Make sure that your Swift code is compatible with Objective-C. There are 2 ways of doing this. One you can make your Swift class inherit from NSObject. The second way is to use the @objc keyword before your class declaration.
2. In the Objective-C header file add the line to add the bridging header which is auto generated. You do not need to create your own bridging header.
```
#import "<FrameworkName>/<FrameworkName>-Swift.h"
```
  Replace the word FrameworkName with the name of your Framework.
3. This should allow you to access your Swift code in your Objective-C header file within the same Framework Project.
This way you can make a single framework which contains code written in both Swift & Objective-C.