rushafi/protocolui

ProtocolUI is a simple helper file providing very basic infrastructure for customizing UI elements via protocol extensions.

ProtocolUI

News:

(last update: 19th January 2016)

The project is now in the "proof of concept" state. I'm currently working on the first version for the real world usage.

My To-Do list for v1:

• Add support for all IB-friendly UIKit elements

• Extend the range of base protocols to support more variables

• Use IBDesignable for the live preview in IB

• Unit tests coverage

• Convert the project to a framework

• Carthage and CocoaPods support

• Setup continuous integration

• New Readme file

• Real-world testing (in progress): I use ProtocolUI for 2 apps I'm currently working on at STRV.

Protocol based UIKit customization: ProtocolUI

Let me introduce you ProtocolUI. ProtocolUI.swift is a helper file which contains definitions for a dozen protocols. These protocols reflect the very basic (so far) UIKit customizable properties. You can use these protocols as a base for your own protocols. By adding extensions to them, you can modify their values and customize views that conform to the protocols.

How to use it:

Add this repository as a git submodule. Link the ProtocolUI.swift file to your project.

Example 1:

I want to set the UIView background color to green:

• Pick a base protocol which modifies the backgroundColor property:

protocol BackgroundColor { var pBackgroundColor: UIColor { get } }

• Create you own protocol and its extension, which will return the desired value

protocol GreenBackgroundColor : BackgroundColor  { }

extension GreenBackgroundColor { 
      		
	var pBackgroundColor : UIColor { return UIColor.greenColor() }
} 

• Make your custom view to conform to the protocol:

class MyView : UIView, GreenBackgroundColor { }

That’s all. When you now use the MyView class in a storyboard and run the app, the view will have a green background.

You can apply the very same protocol to other UIKit elements, too:

class MyButton : UIButton, GreenBackgroundColor { }
class MyTextField : UITextField, GreenBackgroundColor { }

Example 2:

All buttons should have a yellow background and Helvetica Neue font, size 17.0. All “call to action” buttons will also have a green border with a width of 2px.

We create protocols for the background color and button font first. Then we create a protocol named ButtonAppearance, which inherits from these two protocols and works as a shared appearance protocol for all buttons.

protocol YellowBackgroundColor : BackgroundColor  { }
extension YellowBackgroundColor { 
	var pBackgroundColor : UIColor { return UIColor.yellowColor() }
}

protocol ButtonFont : Font { }
extension ButtonFont { 
	var pFont : UIFont { return UIFont(name: "Helvetica Neue", size: 17.0)! }
}

protocol ButtonAppearance : YellowBackgroundColor, ButtonFont { }

We do the same for the CallToActionAppearance protocol:

protocol GreenBorder : BorderColor { }
extension GreenBorder { 
	var pBorderColor : UIColor { return UIColor.greenColor() } 
}

protocol DefaultBorderWidth : BorderWidth { }
extension DefaultBorderWidth { 
	var pBorderWidth : CGFloat { return 2.0 } 
}

protocol CallToActionAppearance : GreenBorder, DefaultBorderWidth { }

FInally we make our UIButton subclasses conform to these protocols:

class RegularButton : UIButton, ButtonAppearance { }
class CallToActionButton : UIButton, ButtonAppearance, CallToActionAppearance { }

Result:

And again, you can reuse these protocols for any other UIKit element:

class CallToActionTextField : UITextField, CallToActionAppearance { }

If you’re not happy with the predefined protocols, or you want more sophisticated customization, you can customize elements with a closure:

protocol SmartButtonApperance : CustomClosure { }
extension SmartButtonApperance { 

	var pCustomClosure : ProtocolUICustomClosure {
    
		return { () -> Void in
        
			if let aSelf = self as? UIButton {
                
				aSelf.setTitleColor(UIColor.blackColor(), forState: .Normal)
				aSelf.setTitleColor(UIColor.redColor(), forState: .Highlighted)
			}
		}
	}
}

class MySmartButton : UIButton, ButtonAppearance, SmartButtonApperance { }

Installation

Please use CocoaPods for installation of this library. Simply add this line to your podfile

pod 'Protocol-UI', :git => 'https://github.com/VojtaStavik/ProtocolUI'