Storyboard on Andrew Bancroft

Accessing the Root View Controller at Launch on iOS 13 with SceneDelegate

Fri, 07 Jun 2019 18:20:41 +0000

A new SceneDelegate was introduced for Storyboard-based apps in iOS 13, and with it came some changes in how you’re able to access your app’s root view controller at app launch.

The Old Way

AppDelegate Swift file used to be where code landed for accessing your app’s rootViewController:

1    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
2        // Override point for customization after application launch.
3        let rootVC = window?.rootViewController
4
5        return true
6    }

What To Do Now

Now, you’ll be moving that code over to your app’s SceneDelegate Swift file:

 1class SceneDelegate: UIResponder, UIWindowSceneDelegate {
 2
 3    var window: UIWindow?
 4
 5
 6    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
 7        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
 8        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
 9        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
10        guard let _ = (scene as? UIWindowScene) else { return }
11        
12        let rootVC = self.window?.rootViewController 
13    }
14
15    // ... the rest of SceneDelegate
16}

Adding Buttons to the Navigation Bar with Storyboards

Thu, 14 Apr 2016 18:20:41 +0000

Updated on March 20, 2017 – Xcode 8 & Swift 3

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. 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.

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.

The example I’m outlining here is done solely in the Storyboard.

Example scenario

The scenario is as follows:

We have a main screen with an add button in the top right of the navigation bar
Pressing Add will display a modal screen with two buttons in the navigation bar: Cancel, and Save

The Goal: Use only the Storyboard to add the ‘Add’ button, and the Cancel and Save buttons to the navigation bar. The end result will be something like this:

An example git repository has been created for this walk-through over at GitHub:

Resources

Storyboard Navigation Controller Example

Main Storyboard scene setup

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.

Select your view controller and choose Editor > Embed In > Navigation Controller:

Next, you need to search for a Bar Button Item from the Object Library in the Utilities Pane. Once you find it in the list, drag one up to the upper-right of the navigation bar:

To turn it from an “Item” button into a “+” button, you need to adjust the Bar Button Item’s attributes. 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.

Then change the System Item property from “Custom” to “Add”:

That’s all there is to setting up that first scene. You’ll wire up the add button to modally show the “Add” scene in the next section.

Add Storyboard scene setup

Next up, you need an “Add” scene. For that, another View Controller is required. Drag out a new View Controller onto the Storyboard design surface. While you’re at it, go ahead and create a new AddScreenViewController class:

Once you’ve created a new AddScreenViewController class from the File > New > File dialog, make sure you’ve wired it up appropriately:

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. Select “Present Modally” from the popover:

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!

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:

Once this is done, your storyboard should look something like this:

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:

Changing each of their System Item properties in the Attribute Inspector, just like we did before, will give them their “Cancel” and “Save” appearance:

If you control + drag the ‘Cancel’ and ‘Save’ buttons from the Storyboard scene to the .swift code file, you’ll be able to wire up IBActions to dismiss the view controller and return to the main screen. 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.

Wrapping up

That’s it! Buttons in the navigation bar, all done inside the Storyboard.

Hopefully this quick walk-through removes any stumbling blocks you might have in designing your Storyboard-based app with navigation controllers.

Circular Progress Indicator in Swift

Fri, 10 Jul 2015 04:31:49 +0000

Updated on April 17, 2017 – Swift 3

Circular progress indicators are a nice and compact way to visualize progress information for users of your iOS app. I was extremely grateful to come across Kaan Dedeoglu’s KDCircularProgress project on GitHub. It’s a versatile little UI component written in Swift that provides a great amount of flexibility and customization options. I love it!

As a bonus to this amazing component, recent contributions by Kaan have opened up the ability for us to lay out and set up the circular progress indicator in the Storyboard!

My goal in this article is to help get you up and running with this library in your own Storyboard-based Swift project.

Example project

Kaan’s GitHub repository has an example project, but I’ve also gone ahead and made one as well for showing how to use this indicator in a Storyboard. We’ll be using the example I created as a reference point for the forthcoming walk-through.

Resources

Circular Progress Example

Getting started

The most obvious starting place is to head over to the KDCircularProgress repository on GitHub to grab the KDCircularProgress.swift source file and add it to your own Swift project. Kaan has things set up with CocoaPods as well if you care to use that. I found adding the .swift file to my project to be the least intrusive way to add this indicator to my UI components arsenal.

To the Storyboard!

Since Kaan added IBDesignable and IBInspectable support, working with the circular progress indicator in the Storyboard is super easy.

To get started, all you need to do is drag a plain View over to the Storyboard Scene. Set up your constraints to correctly position the view where you need it:

Next, you need to set the View’s class to a custom class, namely, KDCircularProgress:

With that in place, Xcode will process things and allow you to modify the properties of the progress indicator directly in the attributes section of the Utilities pane. Best of all, you’ll see those changes be reflected in the Storyboard scene in real-time as you adjust values!

viewDidLoad()

While in the Storyboard, I set a few values so that I could actually see certain colors when progress had been made. However, to get things set to their true initial state, there may be some values you want to reset in viewDidLoad(). For example, I set the angle property to 90 degrees so that I could see the color of the progress track in the storyboard. But when I load the app, I want the angle to be 0 degrees (since no progress has been made when the app first loads).

To accomplish this, you’d simply make sure there’s an outlet between your progress view in the Storyboard and the View Controller. Once they’re connected, you can write something as simple as circularProgressView.angle = 0 to start off with no progress.

Increasing progress

We’re dealing with a progress indicator here, so this implies that there’s a beginning, some incremental steps taken toward a completion goal, and of course, the fully completed whatever it was you were doing.

The example I’ve contrived is a simple counter with an upper limit of 5. So as you tap “Increase Progress”, the circular progress view should update to be some fraction of the way around the 360 degree circle based upon how close we are to completing the count to 5.

There’s a function I’ve built to calculate the new angle:

1func newAngle() -> Double {
2    return 360 * (currentCount / maxCount)
3}

The rest is simply a matter of updating the current count and animating to the new angle:

1@IBAction func increaseProgressButtonTapped(sender: UIButton) {
2    if currentCount != maxCount {
3        currentCount += 1
4        let newAngleValue = newAngle()
5        
6        circularProgressView.animate(toAngle: newAngleValue, duration: 0.5, completion: nil)
7    }
8}

Resetting the indicator

To reset everything, we’d want to update the state of our current count back to 0.

The change to the circular progress indicator’s visualization of the progress state can be animated by calling the view’s animate(fromAngle:toAngle:duration:completion:) method:

1@IBAction func resetButtonTapped(sender: UIButton) {
2    currentCount = 0
3    circularProgressView.animate(fromAngle: circularProgressView.angle, toAngle: 0, duration: 0.5, completion: nil)
4}

Wrapping up

There are a ton of other customization options that you can play with. I highly recommend this UI component if you’re looking for an easy-to-use, versatile circular progress indicator!