So what are we going to create?
Begin with the project structure
We’ll begin by starting a new single-view xcode project, usually I create my views programmatically (and that’s how I’ll create the custom container) but for the basic structure we’ll use storyboards.
We’ll drop a button and connect it to our generated ViewController
And let’s link the touch up inside event to a method
Now the fun part begins, let’s create a new
UIViewController - that’ll be our cool container we’ll use to animate the appearance and disappearance of our child view controllers in.
Take a look at these gists, right now we’re still missing the main functionality but it can save you a couple of seconds writing.
Adding a UISegmentedControl to the title
Now we’ll want to add a UISegmentedControl and link a
UIControlEventValueChanged action to it, we’ll do everything inside the
viewDidLoad method of our VC
We’re going to have a default
UIViewController to show (something like a root view controller for a UINavigationBar), it’ll be the one matching the left tab which we selected by default using
self.segmentControl.selectedSegmentIndex = 0;, let’s add it as a child view controller when our view loads.
I created a very bare UIViewController called GGViewController1 having a black background that we will use.
You should have something looking like this now, we’re on fire!
Let the animations begin!
Now it’s time to animate the transition between the view controllers after the user clicks on the tab, we’re going to use
This is a convenience method Apple supplied that will add the toViewController view to our hierarchy and remove the fromViewController view from it. Please note that you can do it yourself (that’s how I actually implemented my version of the custom container).
We also need to save the currently displayed view controller somewhere to easily interact with it. Let’s change our
loadViewController: to do it
Now let’s connect it to our ‘tap’ action -
You can see how I “flip” between the views, I use the ugly
isKindOfClass:, it’s only for learning purposes (making the example as simple as it can be). For production code I’d use something else.
This is where we should stand right now -
Finishing it up
You can see we’re almost there, our animation looks fine when clicking on the right button, when clicking again on the left button the transition is weird.
This is happening because currently the animation is set to move the transitioned view controller from right-to-left, we need to alter the direction!
We’re going to add a
fromLeft:(BOOL) to our
loadViewController: method to look like this -
Don’t forget to change all the places we use
Where to go from here?
So we’re done here, hope you learnt something, I know personally I was always intimidated with customizing UIViewControllers behaviours and messing with animations (even simple ones). The code I wrote here lacks a lot of qualities like
- Unit testing
- UIViewController <> UIView isolation
- Generalization (The VCs are hard coded in the container)
I’ll leave it as homework :)
Everything is available on GitHub. Have fun!