Create Designable Classes of UITextField, UIButton, UILabel & UIImageView With FontAwesome

Prerequisite:- FontAwesome & Swift 3

UITextField

Source

// MARK: – Designable IconTextField Class
@IBDesignable final class IconTextField: UITextField {

@IBInspectable var leftImageName: String!
@IBInspectable var leftImageSize: CGFloat!
@IBInspectable var rightImageName: String!
@IBInspectable var rightImageSize: CGFloat!

/* Initiate the view with Icons */
override func draw(_ rect: CGRect) {

//Setup Text Field
self.leftViewMode = UITextFieldViewMode.always
self.leftView = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 50))

// Setup left view
if leftImageName != nil {
let leftLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 38, height: 50))

if leftImageSize != nil{
leftLabel.font = UIFont.fontAwesome(ofSize: leftImageSize)
}else{
leftLabel.font = UIFont.fontAwesome(ofSize: 30)
}

leftLabel.text = ” \(String.fontAwesomeIcon(code: leftImageName)!)”
leftLabel.textColor = UIColor.init(colorLiteralRed: 80.0/255.0, green: 182.0/255.0, blue: 253.0/255.0, alpha: 1.0)

self.leftView = leftLabel
}

// Setup right view
if rightImageName != nil {

let rightLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 20, height: 50))

if rightImageSize != nil{
rightLabel.font = UIFont.fontAwesome(ofSize: rightImageSize)
}else{
rightLabel.font = UIFont.fontAwesome(ofSize: 20)
}

rightLabel.text = String.fontAwesomeIcon(code: rightImageName)
rightLabel.textColor = UIColor.init(colorLiteralRed: 80.0/255.0, green: 182.0/255.0, blue: 253.0/255.0, alpha: 1.0)

self.rightViewMode = UITextFieldViewMode.always
self.rightView = rightLabel
}
}

}

Image Use

UIButton

Source

// MARK: – Designable FontAwesomeButton Class
@IBDesignable final class FontAwesomeButton: UIButton {

@IBInspectable var IconName: String! {
didSet{
//Set Button Icon
self.setTitle(“\(String.fontAwesomeIcon(code: IconName)!) \(Text)”, for: .normal)
}
}
@IBInspectable var Text: String = “”
@IBInspectable var NewLineText: String = “”
@IBInspectable var ImageLeftPadding: Int16 = 0
var ImagePaddingStr = “”

var fontSize : CGFloat!

/* Initiate the view with Icon & Text */
override func draw(_ rect: CGRect) {

// Setup view
if fontSize != nil{
self.titleLabel?.font = UIFont.fontAwesome(ofSize: fontSize)
}else{
self.titleLabel?.font = UIFont.fontAwesome(ofSize: 15)
}

/* Check whether it’s with new line or normal */

if NewLineText != “” {

// Add padding to the image to make it centre
if ImageLeftPadding > 0 {
for _ in 1…ImageLeftPadding {
ImagePaddingStr.append(” “)
}
}
self.titleLabel?.numberOfLines = 0
self.setTitle(“\(ImagePaddingStr)\(String.fontAwesomeIcon(code: IconName)!)\n\(NewLineText)”, for: .normal)

}else{
self.setTitle(“\(String.fontAwesomeIcon(code: IconName)!) \(Text)”, for: .normal)
}

}

}

Image

Use

UILabel

Source

// MARK: – Designable FontAwesomeLabel Class
@IBDesignable final class FontAwesomeLabel: UILabel {

@IBInspectable var IconName: String!
@IBInspectable var fontSize : CGFloat = 50

/* Initiate the view with Icon */

/* To do custom drawing involving label, subclass UILabel and override awakeFromNib().*/

override func awakeFromNib() {
// Setup view
self.font = UIFont.fontAwesome(ofSize: fontSize)
self.text = String.fontAwesomeIcon(code: IconName)
}
}

Image

Use

UIImageView

Source

// MARK: – Designable FontAwesomeImageView Class
@IBDesignable final class FontAwesomeImageView: UIImageView {

/* Call Method to setup Imageview on set of variables */
@IBInspectable var IconName: String! {
didSet {
SetCustomImage()
}
}
@IBInspectable var Color: UIColor = UIColor.white
@IBInspectable var BGColor: UIColor = UIColor.clear
@IBInspectable var ImageSize : CGSize = CGSize(width: 60, height: 60) {
didSet {
if IconName != nil{
SetCustomImage()
}
}
}

/* Initiate the view with Image Icon*/

/* The UIImageView class does not draw its content using the draw(_:) method. Use image views only to present images. To do custom drawing involving images, subclass UIView directly and draw your image there.*/

func SetCustomImage() {
self.image = UIImage.fontAwesomeIcon(code: IconName, textColor: Color, size: ImageSize)
}
}

Image

Use

Create Designable Classes of UITextField, UIButton, UILabel & UIImageView With FontAwesome