MSAutoView

This is a way to create custom views with their own xibs and use them across multiple view controllers, cells etc... Properties can be easily set and customized independently for each view controller

Table of Contents

1. The Problem
2. How MSAutoView solves the problem
3. Installation
4. Prerequisites
5. Usage
6. Customizing The View
7. Deployment
8. Authors
9. License

The Problem

Throughout my projects I had a problem where I have to use the same view in multiple places, and whenever I implement the layouts in the storyboards, things get messy when the storyboard grows and I have to keep track where I implemented each view. Things get more messy when I want to modify a subview inside these views (layout, color etc..), I had to go through all the storyboard to change them.

How MSAutoView solves the problem

MSAutoView allows me to create a single layout xib, and reference it wherever I want it to appear. So I can create a Views folder and add all the xibs in it. Whenever I want to change a color or a layout, I can do it in this view and the change will reflect among all the instances

Installation

MSAutoView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'MSAutoView'

Prerequisites

• XCode 9

Usage

1. Add a xib and give it any name (in my case it will be "ListingView")

2. Click on the xib

3. (For convenience) Go to attribute inspector and change the simulated metrics as below:

   

4. Add whatever views you want in the xib (Example):

   

5. Create a Cocoa Touch Class and give it the same name as the xib (in my case it will be "ListingView"), make sure it inherits from MSAutoView

   

6. Go back to the xib and click on the File's Owner in the Document Outline:

   

7. Click on the Identity Inspector and set the class to the cocoa touch class created in step 5 (in my case "ListingView")

   

8. Add a view to your storyboard

9. Set its class to the class created in step 5

10. Run the project, the view should contain the content of the xib

    

Customizing The View

• You can add outlets to the class created and connect them in the xib:

class ListingView: MSAutoView {
    
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var detailsLabel: UILabel!
    @IBOutlet weak var priceLabel: UILabel!
    
}

• You can also add Inspectable variables and set them from the storyboard (make sure the inspectable variables are not optionals or it won't work):

class ListingView: MSAutoView {
    
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var detailsLabel: UILabel!
    @IBOutlet weak var priceLabel: UILabel!
    
    @IBInspectable var title: String = "This is a default title"
    @IBInspectable var details: String = "This is a default details"
    @IBInspectable var price: Double = 300
    
    override func awakeFromNib() {
        super.awakeFromNib()
        updateView()
    }
    
    func updateView() {
        titleLabel.text = title
        detailsLabel.text = details
        priceLabel.text = String(describing: price)
        
    }
    
}

• You can also override the default values from the storyboard's attributes inspector for the view (Make sure you don't set the attributes in the attribute inspector of the xib or they will override all other values):

This is the result:

• You can also create a reference for the view in the view controller's class and set its values:

class ViewController: UIViewController {

    @IBOutlet weak var listingView: ListingView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        listingView.title = "Title from View Controller"
        listingView.details = "Details from View Controller"
        listingView.price = 40
        listingView.updateView()
    }

}

Deployment

If you want to use the auto view in your own project just copy the AutoView Folder.

Authors

• Maher Santina - Initial work

License

This project is licensed under the MIT License - see the LICENSE.md file for details