The Lone Programmer Blog

From time to time, The Lone Programmer will do a presentation, want to show some code or maybe just have something to say and the Lone Programmer Blog is where you will find it. Check back every few weeks to see if there is something new or follow The Lone Programmer on twitter @TheLoneProgramr for up to date info. If you have any questions or comments about the blog, please use the Contact Us page.

The Powerball Assistant for Android

I finally did it, I made an Android version of my app The Powerball Assistant. There has been nearly 3000 downloads with no advertising so I thought that it is time. The app is currently in beta and can be downloaded here. To install on your Android device, click the link while using your device. The app was created with PhoneGap and the ads are supplied by Amazon. Amazon ads on mobile apps is fairly new so I may do a short article on how to do it later, so check back.

If you try this app and find any bugs, let me know by clicking here. Be sure to mention that you are using the Android Beta version. I will submit the app to Amazon the first week of April 2014 and to Google a week or so later. Links will be posted on the blog when they are ready.

UITabBarController in iOS Storyboard

I will be giving a presentation to the Triad Mobile Developers on March 4, 2013 at 6:30. It would be great to see you there but if you can't make it, then this blog post (my first) will let know what I will be talking about. The presentation will be on UITabBarController in an application that uses storyboards. The code and the presentation can be downloaded here . Screen shots will be available through out the blog, you access them by either clicking on a link or an image.

Storyboarding is a Xcode feature that began in version 4.2. It allows you to visually arrange various screens and see your program flow. It speeds up designing and makes adding in the views that your client forgot to tell you that they needed, a breeze. Storyboarding also lets you show your boss or clients what they will be getting before you write any code.

Using Storyboards is easy for simple apps like the one in the screen shot above but eventually, you are going to need something more complicated. Adding in a UITabBarController to your storyboard app is a great way to navigate to different parts of your app and to separate it into sections. Also, iPhone users are use to seeing tab bars and will know how to use them. Here is a screen shot of an app that I created that uses a tab bar with a storyboard. In this blog post and in my presentation, I am going to give a quick tutorial on how I was able to do it.

Start by creating a single view app in XCode. Give it the name StoryboardTutorial. Go ahead and set the Organization Name and company identifier to whatever you like and be sure to have checks in the Use Storyboard and Use Automatic Reference Counting checkboxes. Make a folder for it and then we can get started.

You should now see your storyboard layout with one view. We want to make this view a tab bar controller. We do this by clicking on the view controller that you see on the storyboard and then in the Editor Menu choose; Embed In then Tabbar Controller. We are going to need a navigation controller for navigation purposes of course, adding it is almost the same as adding the Tabbar Controller. Make sure that the original view is selected and go to the Editor Menu and choose; Embed In and then Navigation Controller. Your storyboard should now look like this.

A tab bar will always have more than one button, otherwise, why have a tab bar? To add the second button we will need to drag a navigation controller from the Object Library and drop it on the storyboard. You can leave the root view controller or you can replace it with a different type of view. I am going to delete the root view controller and replace it with a view controller.

The navigation controller that we added needs to know to push the new view controller that was also just added. To do this, we select the navigation controller and then hold down the control button and drag to the new view controller and let go. A popup menu will appear, choose Root View Controller under Relationship Segue. The storyboard should now look like this. Now we need to tell the Tabbar Controller to push our new Nav Controller when the second button is clicked. Do this by selecting the Tabbar Controller, then Control Drag to our new Navigation Controller. In the resulting popup, choose View Controllers under Relationship Segue.

If you run the app you will see that we need to change the text in the tab bar buttons and some icons would make it look nice. I have already added a couple of icons to the project. A good size for your icons is 18 x 18 pixels. When you have icons added to the project, click on a tab bar button that is present on a Nav controller, not the tab bar controller. Then chose the Attributes section of the Utilities. There you can add an icon and set the text.

To demonstrate how to add new views to the storyboard and navigate to them I am going to add a bar button item to the view at the top of the storyboard and I will change it's text to Next. Now I will drag a new view controller to the storyboard and drop it next to the view where I added the button. Now we need to make that view load when the button is clicked. Do this by selecting the button and then control drag to the new view. When the resulting popup shows, select Push under Action Segue. Now when you run it and click that button, the new view will navigate into view.

Now I want to show how to have code for the views that we have added. To do this go to File and then New and finally File. In the resulting window, give the file a name where it says Class. I am calling mine InfoViewController and and make sure that the Subclass of is UIViewController. Here is an example. The code file that you add should be of the same type as the view. If you need code for a View Controller, subclass should be UIViewController, if you need to code a root view controller, then UITableView would be best and so on. I am using this code file with the second view controller, the one that is associated with the second button of the tabbar, so I am subclassing UIViewController.

Now that the code file has been added we need to tell the view to use it. Do this by selecting the top view in the storyboard and open the identity inspector. Under Custom Class, change it to the code file that was just added. To demonstrate coding I am going to add a button to a view and then show an alert when it is clicked. Drag a Round Rect Button from the Object Library and drop it on the view that you want to code. Make sure that the view is selected and then click the Show the Assistant Editor button that is at the top right part of XCode. This should open the header file of the new class that we have added, it will be on the right side of the storyboard. Click the button and Control Drag to the header file. When you see the popup menu, choose Action for the connection and give it a name, I called mine clickMe. Here is what it looks like. Now go to the implementation file and you should see a clickMe function. This is the code that I added there. It will show an alert when the user clicks on it.

There is one last thing that I want to demonstrate, that is pushing a view from a XIB. To do this, add a new file to the project as you did before but this time make sure that the With XIB User Interface has a check. Give the file a name, I called mine DetailsViewController, then save. Now I am going to add a code file for the root view controller that we have on the storyboard. Do this by adding a new file and choose UITableViewController as the Subclass of and give it the name RootViewController. Now, go to the storyboard and choose the root view controller and open the identity inspector. Under custom class, choose the file that was just added. In the RoovViewController file that you just added, add some simple code that will show some values in the table, a lot examples are available online. To show how the view is pushed we will first include the DetailsViewController.h file and then we have to add this code to didSelectRowAtIndexPath of the RootViewController. Now the app is complete. If you followed everything excatly, you should be able to run the app and use the tab bar to navigate and also be able to navigate to the new last view that we added using the table on the root view controller.

That concludes my tutorial and my presentation. If you have any questions of comments, use the contact us page and let me know what you think. Check out this page later to see any new tutorials or presentations that I will make.

© 2013 The Lone Programmer, LLC All rights reserved.