User Tools

Site Tools


android-labs-s16:ios_tutorial_2

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

Git

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.

The first thing you should do is to start with registering an account of Github : https://github.com

After registration, start with creating an new repository, for public repository, its free, but anyone can see your code.

Now after you create your new repository, here’s a example https link to your git

https://github.com/xuaninbox/CS407.git

So you have two ways to link your git with your project, with command line or with GUI interface.

here’s how you can do it with GUI in Xcode

switch to the remote tab and add a remote

again in the Source control, click commit

a Message is required and when select Push to remote, it will also push it to the remote git.

Now go back to ur git and see if ur code is there

CocoaPod

CocoaPod is a easy way for u to manage the libraries of your project, now start with the tutorial to install cocoapod on https://cocoapods.org

after you finish the INSTALL section

use command line to go to ur project folder

and do pod init

open the Podfile in the folder

add the following text

  target 'P2' do
  
  pod 'AFBlurSegue', '~> 1.2.1'
  
  end

after pod install or pod update go to you project, from now on you should use XXX.xcworkspace

OSX 10.11 BUG?

http://stackoverflow.com/questions/32810808/can-not-perform-pod-install-under-el-capitan-15a279b

Awesome! You just installed you first 3rd party library: AFBlurSegue

https://github.com/AlvaroFranco/AFBlurSegue

Segue

In this section you will create the two basic segue, Show and Present modally

Now use 3 View controller

The two button (show & present modally) will let you either show or present modally to the new controllers.

Also by using

  override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject!) 
  if (segue.identifier == "XX") 

You should make the label on the new controllers to print ‘SHOW’ or ‘MODAL’

Now try run it in the simulator and see if it works!

lifecycle

This should be a easy one! lets try to understand how the view controller works, try to do the following

Now try run it in the simulator and tell us what is the sequence of the print and why so.

Delegate

Delegate is one of the most important aspect of the iOS programming, lets start with a simple delegate, UITextFieldDelegate, this delegate is used to handle text UITextField.

Lets say you have a UITextField on your ViewController and you want to be notified every time user start to type something in it.

first drag the UITextField onto any of the ViewControllers you have created, and set the component’s delegate as its ViewController

Add the delegate in your swift code and the function that handle the callback

As you can see we have added UITextFieldDelegate and a function textFieldDidBeginEditing

Now try run it in the simulator and see what happened when you start typing into the textfield.

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.txt · Last modified: 2016/02/05 15:32 by xuan