ConnectorView.swift

//
//  ConnectorView.swift
//  Helper
//
//  Created by Harsh 20/08/20.
//  Copyright © 2020 Harsh. All rights reserved.
//

import UIKit

@IBDesignable
class ConnectorView: UIView {
    
    @IBInspectable
    var firstColor: UIColor? {
        get {
            return firstSeparator.backgroundColor
        }
        
        set {
            firstSeparator.backgroundColor = newValue
        }
    }
    
    @IBInspectable
    var fullColor: UIColor? {
        get {
            return fullSeparator.backgroundColor
        }
        
        set {
            fullSeparator.backgroundColor = newValue
        }
    }
    
    @IBInspectable
    var lastColor: UIColor? {
        get {
            return lastSeparator.backgroundColor
        }
        
        set {
            lastSeparator.backgroundColor = newValue
        }
    }
    
    // MARK: - INitialization
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        xibSetup()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        xibSetup()
    }
    
    // MARK: - IBOutlet
    
    @IBOutlet var firstSeparator: UIView!
    @IBOutlet var fullSeparator: UIView!
    @IBOutlet var lastSeparator: UIView!
    
    // MARK: - Properties
    
    var contentView: UIView!
    var lineColor: UIColor = #colorLiteral(red: 0.9294117647, green: 0.9450980392, blue: 0.9607843137, alpha: 1)
    let strokeWidth: CGFloat = 0.5
    
    var mode: Mode = .end {
        didSet {
            switch mode {
            case .only:
                firstSeparator.isHidden = true
                fullSeparator.isHidden = true
                lastSeparator.isHidden = true
            case .start:
                firstSeparator.isHidden = false
                fullSeparator.isHidden = true
                lastSeparator.isHidden = true
            case .end:
                firstSeparator.isHidden = true
                fullSeparator.isHidden = true
                lastSeparator.isHidden = false
            case .node:
                firstSeparator.isHidden = true
                fullSeparator.isHidden = false
                lastSeparator.isHidden = true
            }
        }
    }
    
    // MARK: - Methods
    
    func xibSetup() {
        contentView = loadViewFromNib()
        
        // use bounds not frame or it'll be offset
        contentView.frame = bounds
        
        // Make the view stretch with containing view
        contentView.autoresizingMask = [UIView.AutoresizingMask.flexibleWidth, UIView.AutoresizingMask.flexibleHeight]
        
        // Adding custom subview on top of our view (over any custom drawing > see note below)
        addSubview(contentView)
    }
    
    func loadViewFromNib() -> UIView! {
        
        // swiftlint:disable all
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: String(describing: type(of: self)), bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        // swiftlint:enable all
        return view
    }
    
    // MARK: - Nested Properties
    
    enum Mode {
        case start, node, end, only
        
        static func getConnectorModeFrom(index: Int, count: Int) -> Mode {
            if count == 1 {
                return .only
            }
            switch index {
            case 0:
                return .start
            case count - 1:
                return .end
            default:
                return .node
            }
        }
    }
}

ConnectorView.xib

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14313.18" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14283.14"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="ConnectorView" customModule="Hoberman_Client" customModuleProvider="target">
            <connections>
                <outlet property="firstSeparator" destination="476-ht-4Pu" id="H8w-Qk-ZBG"/>
                <outlet property="fullSeparator" destination="jgN-wF-uoT" id="n0S-Me-ZR9"/>
                <outlet property="lastSeparator" destination="4mQ-tf-PFg" id="cvF-UP-SAv"/>
            </connections>
        </placeholder>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view contentMode="scaleToFill" id="iN0-l3-epB">
            <rect key="frame" x="0.0" y="0.0" width="375" height="290"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="476-ht-4Pu" userLabel="first">
                    <rect key="frame" x="187.5" y="145" width="0.5" height="145"/>
                    <color key="backgroundColor" red="0.92941176470588238" green="0.94509803921568625" blue="0.96078431372549022" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                    <constraints>
                        <constraint firstAttribute="width" constant="0.5" id="efY-AW-ZbU"/>
                    </constraints>
                </view>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="jgN-wF-uoT" userLabel="full">
                    <rect key="frame" x="187.5" y="0.0" width="0.5" height="290"/>
                    <color key="backgroundColor" red="0.92941176470588238" green="0.94509803921568625" blue="0.96078431372549022" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                    <constraints>
                        <constraint firstAttribute="width" constant="0.5" id="iUq-Ti-HMx"/>
                    </constraints>
                </view>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="4mQ-tf-PFg" userLabel="last">
                    <rect key="frame" x="187.5" y="0.0" width="0.5" height="145"/>
                    <color key="backgroundColor" red="0.92941176470588238" green="0.94509803921568625" blue="0.96078431372549022" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                    <constraints>
                        <constraint firstAttribute="width" constant="0.5" id="Q0U-gg-KmE"/>
                    </constraints>
                </view>
            </subviews>
            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
            <constraints>
                <constraint firstItem="4mQ-tf-PFg" firstAttribute="centerX" secondItem="vUN-kp-3ea" secondAttribute="centerX" id="6Co-dn-So0"/>
                <constraint firstItem="jgN-wF-uoT" firstAttribute="centerX" secondItem="vUN-kp-3ea" secondAttribute="centerX" id="81I-JQ-hjB"/>
                <constraint firstItem="4mQ-tf-PFg" firstAttribute="height" secondItem="iN0-l3-epB" secondAttribute="height" multiplier="0.5" id="A8R-sf-xw9"/>
                <constraint firstItem="4mQ-tf-PFg" firstAttribute="top" secondItem="vUN-kp-3ea" secondAttribute="top" id="FJy-Pl-6Qp"/>
                <constraint firstItem="vUN-kp-3ea" firstAttribute="bottom" secondItem="476-ht-4Pu" secondAttribute="bottom" id="KCV-zR-Ofk"/>
                <constraint firstItem="476-ht-4Pu" firstAttribute="height" secondItem="iN0-l3-epB" secondAttribute="height" multiplier="0.5" id="Sau-2t-PHa"/>
                <constraint firstItem="476-ht-4Pu" firstAttribute="centerX" secondItem="vUN-kp-3ea" secondAttribute="centerX" id="aEb-bD-NBm"/>
                <constraint firstItem="vUN-kp-3ea" firstAttribute="bottom" secondItem="jgN-wF-uoT" secondAttribute="bottom" id="gUj-r1-VKE"/>
                <constraint firstItem="jgN-wF-uoT" firstAttribute="top" secondItem="vUN-kp-3ea" secondAttribute="top" id="jkC-Co-yWC"/>
            </constraints>
            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
            <viewLayoutGuide key="safeArea" id="vUN-kp-3ea"/>
            <point key="canvasLocation" x="55.200000000000003" y="-121.4392803598201"/>
        </view>
    </objects>
</document>