Protocol-oriented programming is one of the most powerful and flexible tools for competent composition and distribution of responsibility in Swift. In one of the previous articles, protocol-oriented programming was used to manage the state and build a safe sequence of state transitions without additional checks. If you have not read , then it is recommended to read as material that will show one of the ways to use this wonderful approach. the previous article In this article, we’ll explore another way to use protocol-oriented programming. As a bonus — we’ll write our extension for programming UI components in UIKit that mimics the experience. SwiftUI What is the task before us? As we all know, all graphical components in UIKit are direct descendants of UIView, each with its own unique properties. A protocol-oriented approach will help us to endow each of the heirs with their own unique properties while making it possible to combine these properties in case we want to use the properties of the parent and the properties of the child. In addition to the protocol-oriented approach, we will also use the design pattern to bring the SwiftUI declarative syntax experience to UIKit. Decorator Let’s start with the simplest. Select several basic UI classes with which we will start: — all graphical components are inherited from it UIView — all , and so on are inherited from it UIControl UIButton UISegmentedControl Final UI components like , , and so on UILabel UITextField The inheritance diagram can be seen below: Let’s start our task by creating an interface: protocol Stylable {} This protocol is the basis for all subsequent extensions for our case. Since all graphical components somehow inherit from to cover all components — it is enough to extend with this protocol: UIView UIView extension UIView: Stylable {} Some of the most used properties for customizing a are , , , , . Moreover, these properties are often used not only to configure the , but also for its descendants. UIView cornerRadius backgroundColor clipsToBounds contentMode isHidden UIView Let’s extend the possibilities of for all classes and their descendants: Stylable UIView extension Stylable where Self: UIView {
    @discardableResult
    func cornerRadius(_ value: CGFloat) -> Self {
        self.layer.cornerRadius = value

        return self
    }

    @discardableResult
    func backgroundColor(_ value: UIColor) -> Self {
        self.backgroundColor = value

        return self
    }

    @discardableResult
    func clipsToBounds(_ value: Bool) -> Self {
        self.clipsToBounds = value

        return self
    }

    @discardableResult
    func contentMode(_ value: UIView.ContentMode) -> Self {
        self.contentMode = value

        return self
    }

    @discardableResult
    func isHidden(_ value: Bool) -> Self {
        self.isHidden = value

        return self
    }
} Let’s check what this extension gave us: let customView = UIView()
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)

let customButton = UIButton()
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)

let segmentedControl = UISegmentedControl(items: ["One", "Two"])
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)

let scrollView = UIScrollView()
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)

let textField = UITextField()
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20) As we can see, thanks to the extension, we can declaratively change properties not only for but also for its descendants. UIView Let’s move on to configuring the . For all of its descendants, one of the most used customizable things is tap, properties — , , . UIControl isEnabled tintColor isUserInteractionEnabled Let’s extend the possibilities of for all classes and their descendants: Stylable UIControl extension Stylable where Self: UIControl {
    @discardableResult
    func action(_ value: (() -> Void)?, event: UIControl.Event = .touchUpInside) -> Self {
        let identifier = UIAction.Identifier(String(describing: event.rawValue))
        let action = UIAction(identifier: identifier) { _ in
            value?()
        }
        
        self.removeAction(identifiedBy: identifier, for: event)
        self.addAction(action, for: event)
        
        return self
    }
    
    @discardableResult
    func secondAction(_ value: ((Bool) -> Void)?, controlEvent: UIControl.Event = .valueChanged) -> Self {
        let identifier = UIAction.Identifier(String(describing: controlEvent.rawValue))
        let action = UIAction(identifier: identifier) { item in
            guard let control = item.sender as? UIControl else {
                return
            }
            value?(!control.isTracking)
        }
        
        self.removeAction(identifiedBy: identifier, for: controlEvent)
        self.addAction(action, for: controlEvent)
        
        return self
    }
    
    @discardableResult
    func isEnabled(_ value: Bool) -> Self {
        self.isEnabled = value
        
        return self
    }
    
    @discardableResult
    func isUserInteractionEnabled(_ value: Bool) -> Self {
        self.isUserInteractionEnabled = value
        
        return self
    }
    
    @discardableResult
    func tintColor(_ value: UIColor) -> Self {
        self.tintColor = value
        
        return self
    }
} After the extension for , an additional customization option became available for all its descendants: Stylable UIControl let customButton = UIButton()
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)
    .tintColor(.red)
    .action {
       print(#function)
    }
    .isEnabled(true)
    .isUserInteractionEnabled(true)

    
let segmentedControl = UISegmentedControl(items: ["One", "Two"])
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)
    .tintColor(.red)
    .action {
       print(#function)
    }
    .isEnabled(true)
    .isUserInteractionEnabled(true) It is worth noting that when calling the action method using a class method, you should initialize this component lazily to ensure that the class (self) is initialized before the component is initialized. lazy var customButton = UIButton()
    .backgroundColor(.red)
    .clipsToBounds(true)
    .cornerRadius(20)
    .tintColor(.red)
    .action { [weak self] in
         self?.actionTest()
    }
    .isEnabled(true)
    .isUserInteractionEnabled(true)
    
private func actionTest() {
    print(#function)
} Let’s also extend with some of the most popular custom properties: UITextField extension Stylable where Self: UITextField {
    @discardableResult
    func text(_ value: String?) -> Self {
        self.text = value

        return self
    }

    @discardableResult
    func font(_ value: UIFont) -> Self {
        self.font = value

        return self
    }

    @discardableResult
    func textAlignment(_ value: NSTextAlignment) -> Self {
        self.textAlignment = value

        return self
    }

    @discardableResult
    func textColor(_ value: UIColor) -> Self {
        self.textColor = value

        return self
    }

    @discardableResult
    func capitalizationType(_ value: UITextAutocapitalizationType) -> Self {
        self.autocapitalizationType = value

        return self
    }

    @discardableResult
    func keyboardType(_ value: UIKeyboardType) -> Self {
        self.keyboardType = value

        return self
    }

    @discardableResult
    func isSecureTextEntry(_ value: Bool) -> Self {
        self.isSecureTextEntry = value

        return self
    }

    @discardableResult
    func autocorrectionType(_ value: UITextAutocorrectionType) -> Self {
        self.autocorrectionType = value

        return self
    }

    @discardableResult
    func contentType(_ value: UITextContentType?) -> Self {
        self.textContentType = value

        return self
    }

    @discardableResult
    func clearButtonMode(_ value: UITextField.ViewMode) -> Self {
        self.clearButtonMode = value

        return self
    }

    @discardableResult
    func placeholder(_ value: String?) -> Self {
        self.placeholder = value

        return self
    }

    @discardableResult
    func returnKeyType(_ value: UIReturnKeyType) -> Self {
        self.returnKeyType = value

        return self
    }
    
    @discardableResult
    func delegate(_ value: UITextFieldDelegate) -> Self {
        self.delegate = value

        return self
    }

    @discardableResult
    func atributedPlaceholder(
        _ value: String,
        textColor: UIColor,
        textFont: UIFont
    ) -> Self {
        let attributedString = NSAttributedString(
            string: value,
            attributes: [
                NSAttributedString.Key.foregroundColor: textColor,
                NSAttributedString.Key.font: textFont
            ]
        )

        self.attributedPlaceholder = attributedString

        return self
    }
} Thanks to this extension, customizing has become even easier. To customize the GUI, the methods of its parents are available, as well as its own methods: UITextField lazy var textField = UITextField()
     .placeholder("Placeholder")
     .textColor(.red)
     .text("Text")
     .contentType(.URL)
     .autocorrectionType(.yes)
     .font(.boldSystemFont(ofSize: 12))
     .delegate(self) It’s worth noting that, similar to capturing self in the ’s action method, assigning a delegate, also requires to be lazy-initialized. UIControl textField By analogy, the rest of the graphical components are expanded with properties that will be used for customization. As a bonus for my readers, I’ve compiled some of the most requested properties in this . You need to copy the files to your project; they are ready to use. repository Don’t hesitate to contact me on if you have any questions. Also, you can always . Twitter buy me a coffee Also published . here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Protocol-Oriented Programming and Modifying UIKit Components Mimicking SwiftUI

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Creating Scrollable Lists using Protocol-Oriented Programming and UICollectionViewFlowLayout

The Noonification: Does Size Matter If You an Have iPhone 15? (11/11/2023)

105 Stories To Learn About Ios App Development

10 Steps To Create Your First Mobile App

10 Reasons Why Outsourcing Your Work to a Software Company May be Better

Creating Scrollable Lists using Protocol-Oriented Programming and UICollectionViewFlowLayout

The Noonification: Does Size Matter If You an Have iPhone 15? (11/11/2023)

105 Stories To Learn About Ios App Development

10 Steps To Create Your First Mobile App

10 Reasons Why Outsourcing Your Work to a Software Company May be Better

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps