Hopefully this quick walk-through removes any stumbling blocks you might have in designing your Storyboard-based app with navigation controllers.Updated with iOS 10.3, Xcode 8.3.3 and Swift 3 That’s it! Buttons in the navigation bar, all done inside the Storyboard.
#STORYBOARD QUICK GAME CONTROLLER HOW TO#
I won’t explain that step here, since the goal was to show you how to add the buttons themselves, but the example project on GitHub has the view controller dismissal implemented if you care to review it.
#STORYBOARD QUICK GAME CONTROLLER CODE#
swift code file, you’ll be able to wire up IBActions to dismiss the view controller and return to the main screen. If you control + drag the ‘Cancel’ and ‘Save’ buttons from the Storyboard scene to the. Now all that’s left to do is to drag two Bar Button Items up to the navigation bar, just like we did for the “Plus” (+) button on the main screen:Ĭhanging each of their System Item properties in the Attribute Inspector, just like we did before, will give them their “Cancel” and “Save” appearance: Once this is done, your storyboard should look something like this: So, the trick to get a navigation bar in place so that you can add our ‘Cancel’ and ‘Save’ buttons is to embed the Add Screen View Controller in… you guessed it… a Navigation Controller: Now, the problem you’ll run into at this point if you run the app is that, while tapping the ‘Add’ (+) button does in fact present the Add screen modally, 1) There’s no way to dismiss the modal controller to go back to the main screen, and 2) There’s no navigation bar to add buttons to! Select “Present Modally” from the popover: Now, to get this “Add” screen to show modally, you need to control + drag from the “plus (+)” button on the first view controller, over to the new AddScreenViewController you just dragged onto the Storyboard. Once you’ve created a new AddScreenViewController class from the File > New > File dialog, make sure you’ve wired it up appropriately: While you’re at it, go ahead and create a new AddScreenViewController class: Drag out a new View Controller onto the Storyboard design surface. For that, another View Controller is required. You’ll wire up the add button to modally show the “Add” scene in the next section. That’s all there is to setting up that first scene. Then change the System Item property from “Custom” to “Add”: Click on the button, either in the navigation bar itself or on the document outline for the Storyboard, and choose the Attributes Inspector for the control. To turn it from an “Item” button into a “+” button, you need to adjust the Bar Button Item’s attributes. Once you find it in the list, drag one up to the upper-right of the navigation bar: Next, you need to search for a Bar Button Item from the Object Library in the Utilities Pane. Select your view controller and choose Editor > Embed In > Navigation Controller: The very first thing you need to do in order to get the add button to show up in the navigation bar is to embed your view controller in a navigation controller. Storyboard Navigation Controller Example.The end result will be something like this:Īn example git repository has been created for this walk-through over at GitHub: The Goal: Use only the Storyboard to add the ‘Add’ button, and the Cancel and Save buttons to the navigation bar. Pressing Add will display a modal screen with two buttons in the navigation bar: Cancel, and Save.We have a main screen with an add button in the top right of the navigation bar.
The example I’m outlining here is done solely in the Storyboard. Lots of StackOverflow posts point us to just adding the buttons in code, but for those who lean toward trying to do as much in the Storyboard designer as possible, this approach feels out of place. Knowing what to click and where to drag to get things wired up isn’t entirely intuitive, so I want to be of help if I can. If you’re having trouble figuring out how to add buttons to the navigation bar in your Storyboard-based iOS app, my goal in this article is to help you through the process.
0 kommentar(er)
