User Tools

Site Tools


android-labs-s16:ios_tutorial_2

This is an old revision of the document!


Introduction

This is part 2 of the iOS Crash Course.

In this section, we will go over the following topics:

  • Miscellaneous Fixes and Tips
  • Segues
  • Tables

First, a few miscellaneous tweaks.

Git

In the first lecture of the crash course you should have made a basic interface for the sample Instagram app. Since following lectures will build upon this content it would be nice if your code perfectly matches the sample code.

The app has been checkpointed at a finished state after lecture 1 and uploaded to GitHub as a repository. You should clone this repository for lecture 2. If you have never used GitHub or even Git, read about it here (conceptual overview) when you have spare time. This guide details Git's usage from a practical standpoint.

Essentially Git and other revision control/source code management tools allow you tremendous power when working on individual projects or collaborating with others. It protects you from mistakes, allows multiple people to work on the same project safely, and gives developers the ability to track their progress.

Cloning Lecture 1 Project

  1. Open Xcode
  2. Click on Source Control > Check Out
  3. Enter the following URL for “Repository Location”– https://github.com/damouse/cs407_UWMadisonInstagram.git
  4. Save the project
  5. Open the project.

Miscellaneous

The following instructions address a few lapses from the first lecture. All of these steps are optional.

You never learned how to use the debugger or how to diagnose crashes, so a quick overview of a crash is shown.

Finally, you may have noticed some clipping between your storyboard setup and the simulator. Storyboard shows 4 inch view controllers (iPhone 5 and later), but the standard simulator is the 3.5 inch version (pre iPhone 5). Storyboard is absolutely deterministic; if you'd like to fix the clipping you'll have to switch the simulator.

Debugging

  1. Active Threads
  2. The second button from the right toggles the bottom debugging pane
  3. The Console. Upon crashing, the device will print the reason for the crash as well as a stack dump. Scroll up until you see “Terminating app due to uncaught exception….” This is the reason your app crashed.
  4. A visual object inspector, allowing you to look through all variables in memory
  5. Hit the folder button to get back to the project navigator

Changing Simulator Size

  1. To the right of the Play button in the top left corner is the name of your application. To the right of that is a blue icon with the name of the active simulator.
  2. Click this, select “iPhone Retina (4-inch)”

Dealing with an Unresponsive InterfaceBuilder

Have you tried dragging a view onto a controller only to have it snap back to the menu? InterfaceBuilder will only allow you to drag views onto controllers that it thinks are “in focus.” If you can't drag a view in, double click on the controller to zoom in, or use the zoom buttons on the bottom right of the storyboard.


Tutorial - A Primer on Segues

I have observed a lot of students still struggling with Segues in the labs, so here is a much more detailed explanation on Segues and how to use them. I have also added some links to relevant resources in the end.

Typically, you need just one storyboard per app. This storyboard comprises of two important ideas, scenes and segues. With a single view app, you begin with just one scene and viewcontroller and then create a new scene for each screen in your app.

Now, we need a way to transition between two scenes, how do we do that? That is where segues come into picture. You describe segues between the relevant scenes. Segues define nothing but how the visual transitions would look like on switching view controllers, like do you want them to move in from the right, do a flip, fly from the left etc.

Segues as what you have seen till now, like when you were developing the mighty Quiz app only works if a user interacts with the screen in some way. One can also trigger a segue programmatically, say in response to a gesture or a change in accelerometer.

Let's directly get into action. I am going to make a 3 scene app and use segues to show transition between them.

Initially in the story board, we will begin with one scene. This scene loads when the application begins. You add new scenes by finding the view controllers in your object library and dragging one onto the canvas. Zoom out, so that you can see the entire storyboard. Select a view controller in the object library and then drag it inside the storyboard, doesn't matter where you position these. I have positioned the three VC side by side.

When the transition happens I want to be able to see the difference between these 3 VC, so I am going to change the background color for two of them. To do that Zoom Back in and go to the attributes inspector tab. It looks like a tuxedo on the top right. Change the background to whatever you want.

Next, let's add segueing between them. The segue needs to be triggered using something, let's use a button to do that. Find the button in the object library, drag that into the first and second VC. Change the text to Next VC coz that's exactly what we intend to do. I haven't put any button on the third screen. I just want the transition from the first VC to the second on button click and then go from the second to the third.

How do we do this, to make segues we don't need to worry about IB action or anything like that. I simply take the first view controller, click on the button, press the control key and drag to the second view controller while holding the key down. Let go! You would see a pop up come up. With iOS 8, segues have become adaptive which means iOS is going to be intelligent in detecting device and screen size. Let's stick to the show segue for the time being. You would observer a little arrow show up in between the two VC. Do exactly the same for the 2nd and 3rd view controller.

Ok, now do Command R. Let's just run this. Click on the button, you would see them move. Voila! This is how segues work.

Here are the screenshots

Tutorial - UITableViewController

This will be a simple tutorial for UITableViewController and UITableViewCell

1.first drag one UITableViewController on to the storyboard, set it as initial view controller if u start with a template and don't what to do segue

2. Now lets understand what we have here, so the controller you have here is a UITableViewController, its similar to UIViewController you have been using before, but only with a pre connected UITableView which will fill the entire UIViewController.

You can defiantly achieve the same thing with UIViewController+ UITableView, the difference is:

UITableViewController : table will be full screen, but delegate are pre linked.

UIViewController+ UITableView : table can resize, has to manually link delegate and add delegate code

but remember they are different controllers so make sure when u create your swift choose the right one

3. When you double click the white area of the prototype cells, it will do the following, this is called a UITableViewCell, and it serves as template and can be reused.

Lets drag a label in here, remember you also have to do auto layout inside the cell

now lets check on the delegate, because we are using UITableViewController they are pre linked

There are two delegate u need to link if you are doing UIViewController+ UITableView

UITableViewDelegate UITableViewDataSource

4. create the swift files we need, make sure to choose the right subclass

UITableViewController

UITableViewCell

Link UITableViewController

Link UITableViewCell

One More Thing!!! Make sure to set a identifier for your UITableViewCell

5. Swift code for UITableViewCell

Create and IBOutlet for the label that we created, so that we can change it in the UITableViewController

6. Swift code for UITableViewController

numberOfSectionsInTableView: how many section you want in your tableview (Need at least 1) numberOfRowsInSection: how many rows we want (be sure to be correspond to ur data)

I created a var items = [“text 1”,“text 2”,“text 3”,“text 4”,“text 5”] so that I have some fake data

now uncomment the next function, and do this

make sure the identifier is what you have setup earlier.

7. Run it and…

DONE!!

android-labs-s16/ios_tutorial_2.1454360418.txt.gz · Last modified: 2016/02/01 15:00 by achin