Computer Science, STEM, swift

Learning to Code in Swift is Almost Like Building with Lego Blocks

Coding in Swift, or any programming language, is like playing with Legos.  You examine what each brick can do, how it can connect with other bricks, and then proceed to assemble them in legal combinations to build the toy rocket ship or mansion of your choice. In Swift, you have different objects that you can connect to build your user interface, along with other functional building blocks of code, or objects, that can be used to make an app.  Swift is Apple’s relatively new programming language used to make iOS, tvOS, watchOS, and macOS apps. (Is carOS on the horizon?).  For more Swift knowledge, check out https://developer.apple.com/swift/ and  https://swifteducation.github.io.

Now for the “geeky” part of this learning exercise: If you want to use a Split View with a table view list when your iPhone 7 Plus or iPad is rotated to the left, you could be in for some coding problems.  The rest of this lesson assumes you know some swift and want to put together the “architecture” for a more complex app.  Note: the original “geeky” title of this blog post was:  Using a Swift 3.0 Split View Controller and Table View List within a Tab Bar Controller in Landscape mode ( iOS 10.2 and Xcode 8.2).

Xcode allows you to visually connect some of these user interface building “blocks” together.  Your Facebook iOS app or your Apple Mail app has tab bars at the bottom or lists of messages that you can select and read.  These are controlled by Tab Bar Controllers, Split View Controllers, and Table (, or List) View Controllers.

If you want to use a Split View with a table view list when your iPhone 7 Plus or iPad is rotated to the left, you could be in for some coding problems.

Recently I taught students how to use a Split View Controller that contained a Table View list within a Tab Bar Navigation Controller so that it works even when the iPhone is rotated.  Sound complicated?  Xcode 8.2 using Swift 3.0 makes it “easy” using Interface Builder and Storyboards.  I’ll assume you have been learning how to code in Swift and how to create UIViews with common user interface elements.  Hopefully, prior to this exercise, you have learned how to use Tab Bars and Navigation controllers before reading through this exercise.   If you have not, you should still be able to get the basics working using these instructions.

CREATE A NEW PROJECT USING MASTER-DETAIL TEMPLATE

First, I wanted the student to see how to use the Split View Controller using the Master-Detail template in Xcode.  So to begin with, create a new Xcode project using the Master-Detail template:

To get a better understanding of how to the code works, I had the students go to the DetailViewController.swift file and change the NSDate variable to String.  See what happens when you try to compile the code.  The code should break.  Try to see what kind of objects are being created and what happens when those objects are being changed to String from NSDate.  Use a temporary variable to make the NSDate into a string.  For example,

myDate = String(describing: NSDate()

objects.insert(myDate, at: 0)

Make all the necessary changes, compiling and testing the code as you go along, to get the app to run successfully in the Simulator.  Make sure you use the Simulator Hardware menu to rotate you Simulated iPhone or iPad to the right or left.  You should see the Split View in action.  Note: You don’t have to make these changes in order for your split view controller and tab bar to work.

ADD A TAB BAR CONTROLLER TO YOUR STORYBOARD

Search your menu of iOS objects for the Tab Bar Controller.  Drag and drop the Tab Bar Controller into your project that contains the Master-Detail Template.  Then delete one of the Tab Bar Views (for example, Item 1) by clicking on the segue that connects it and then the Item 1 view itself.

Next, control-drag from the Tab Bar Controller to Split-View Controller in your main.storyboard.  When the select menu comes up, select “Relationship Segue – view controller”.  This allows the Tab Bar Controller to control your Split-View Controller.  Your storyboard should now look like the following (note: I changed one of the views to have a brown background color).

Adding a Tab Bar Controller with a Split View Controller containing a Table View Controller list that shows detail.

UPDATE THE APP DELEGATE CODE

We discovered that our code only works when we take out some of the split view controller code in the AppDelegate.swift file.  So comment out the following in AppDelegate.swift. That is, after the “Override point for customization” comment, comment everything in that method except the “return true”.

 

Now the code runs in the Split View mode:

And the Tab Bar Item 1 also works:

Now you have the skeleton code for an app that uses a tab bar controller with one of the tabs utilizing a split view controlled table view list that works when your iPhone is in landscape mode. Viola!

About the Author:

Andrew B. Williams, Ph.D., is a humanoid robotics and artificial intelligence professor, STEAM and “Everyone Can Code” advocate, and the author of “Out of the Box: Building Robots, Transforming Lives.”  Dr. Williams is the incoming Associate Dean for Diversity, Equity, and Inclusion and Spahr Professor of Electrical Engineering and Computer Science at the University of Kansas.

Standard

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s