Swift put multiple IBOutlets in an Array

Posted on

Swift put multiple IBOutlets in an Array

Multiple IBOutlets

I made these (marked with red border) IBOutlets using ctrl + drag

But i don’t like to have the exact same line 9 times (DRY)

How do i put these IBOutlets in an Array?

Solution :

you can define a generic outlet collection in Swift like this:

@IBOutlet var collectionOfViews: Array<UIView>? // = [UIView]?

or for e.g. UIButton objects:

@IBOutlet var collectionOfButtons: Array<UIButton>? // = [UIButton]?

you can find your collections under the Outlet Collections group as usually are in the File’s Owner:

Outlet Collections

it would look on my console after connecting 5 random buttons:

Connected UIButton instances to Collection

Follow these steps to create an array of outlets an connect it with IB Elements:

  • Create an array of IBOutlets
  • Add multiple UIElements (Views) in your Storyboard ViewController interface
  • Select ViewController (In storyboard) and open connection inspector
  • There is option ‘Outlet Collections’ in connection inspector (You will see an array of outlets there)
  • Connect if with your interface elements

class ViewController2: UIViewController {


    @IBOutlet var collection:[UIView]!


    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

enter image description here

Solution here Swift – IBOutletCollection equivalent

@IBOutlet var objectCollection: [Object]

This is for macOS (should be similar for iOS) and I do not find an “Outlet Collections” in my storyboard (looks like they took that option out). So I put all my buttons in an NSStackView and linked the stack from storyboard

@IBOutlet weak var buttons: NSStackView!

and then I looped over them to make changes accordingly

for case let (index, button as NSButton) in buttons.arrangedSubviews.enumerated() {
            if(index + 1 != someButtonIndex) {button.state = .off}
            else {button.state = .on}
        }

you can also use tag instead of index

Start with the two view pane where you see both your code and the storyboard. When you make your first IBOutlet connection from the UI to your code, just look carefully at the Connection drop down field and select the option called “Outlet Collection”. This will automatically create an array of IBOutlets. Next just look for the little black circle within a circle that is placed in your code where the array is created. Just drag from this circle to all the other UI objects you want to connect to that same collection (not sure if you can mix types). Similarly you can connect all the objects to one Action by dragging from the first black dot created to all the other objects you want to wire up to that action. Also consider EnumerateSequence() to help in working with this Collection. Sweet right?

Leave a Reply

Your email address will not be published. Required fields are marked *