Chapter 13 UI Navigation Controller

Drill-down interface: is an interface that contains multiple related screens. For example the settings applications has a list of different settings that can be adjusted, when you click on an item you are taken to a different screen in which you can adjust smaller details of the item.

UINavigationController- allows for an easy transition between views. A back button and animation are automatically added to the transitioning views. UINavigationController’s stack is an array.

A keyboard’s appearance based on touch is built into the UITextField and UITextView class. In this chapter we learn how to hide the keyboard based on touching the return button or background.

Touch event– is an event created by touch.

UINavigationBar-location of objects to help navigate between views.

 

Download the PDF file .

Chapter 12 Stack Views

  • In the Main.storyboard, drag a new View Controller from the object library onto the canvas. Drag 4 instances of UILabel onto the canvas and name them Name, Serial, Value, and Date Created.

Content hugging priority – holds the view to a certain size, the higher the priority the lower the tolerance for view size change.

  • Select the Date Created and change the vertical content hugging priority to 249 in the inspector.

When the stack view is selected and the distribution is switched to fill equally the labels are spread equally. For the purposes of the Homepwner leave the distribution on fill.

Stack views are very powerful when is comes to developing the appearance of the application. When you combine stack views you end up with nested stack views that can be used to create may applications.

  • Select Name on the label on the canvas click on the left most button on the Auto Layout constraints menu bar, thus embedding a stack view inside another one.
  • In the attributes inspector change the axis to horizontal.
  • Drag a text field to the right of the label. Open the size inspector for the text field and set its Horizontal Content Compression Resistance Priority to 749.
  • Select the horizontal stack view and open the attributes inspector. Change the spacing to 8pts.
  • Repeat these steps for Serial and Value labels

To align the labels properly:

  • Select the Vertical stack, open the attributes inspector and change the spacing to 8pts.
  • Click on the Data label and centrally align the label
  • Control drag from Name to Serial and select leading, do the same from Serial and Value

Segue – moves another view controller’s view onto the screen. Each segue has a style, action item, and an identifier.

  • Control + drag from the ItemCell prototype to the new view controller and select show
  • Create a new file/class named DetailViewController
  • Opt + click on main.storyboard, click + drag from each text field to the class and name the outlet the proper name, do this for the date label
  • Include the the snippets of code shown below in the proper files

Download the PDF file .

Chapter 11 Subclassing UITableViewCell

Creating an ItemCell

  • Once ItemCell is defined, open its attributes inspector and change the Style to Custom and Identifier to ItemCell.
  • Then open the inspector, enter ItemCell in the class field.
  • Change the prototype cell to be 65pts tall
  • Add 3 labels to the prototype and configure them so that two are above each other on the left and one is on the right aligned with the top left label

Add constraints:

  1. Select the top-left label and open the pin menu. Select the top and left struct and then click add 2 constraints.
  2. Control + drag from the bottom-left label to the top-left label and select Leading.
  3. With bottom-left selected, open the pin menu and select the bottom-struct and add 1 constraint.
  4. Select the right label and control + drag from this label to the superview on its right side. Select both trailing space to container margin and center vertically in container.
  5. Select bottom-left label and open its size inspector. Find the Vertical Content Hugging Priority and lower it to 250. Lower the Vertical Content Compression Resistance Priority 749.
  6. If frames are misplaced update frames in the resolve auto layout issue menu.

In Item Cell 3 outlets were added. An updateLabels function was added so that the cells respond to user input such as changes in text size as show in the clip below. In viewDidLoad, set the height of the table view cells dynamically so that each cell is adjusted to the contraints.

Dynamic Type – allows for automatic resizing of cells


Download the PDF file .

Week 7 Midterm Ideas

Throughout the week I have been brainstorming ideas for a midterm project. My goal for this project is to complete the application with the minimum amount of outside help. The following is a list of topics for the project:

  • agenda
  • multi-topic quiz with user input
  • calculator
  • shopping list/ check list

I have decided to implement the calculator application for the midterm. I will be recreating the basic built-in calculator on an iPhone.

Chapter 10 Vocabulary

UIAlertControllerStyle.ActionSheet – used to present the user with a list of actions from which to choose from. This method is used if a user can back out of a decision or the action is not critical.

UIAlertControllerStyle.Action – used to display critical information o require the user to decide how to proceed.

Modal View Controller – takes over the screen until it has finished.

Design Pattern – solves common software engineering problems. Contains ideas and/or approaches to use in the application.

Types of Design Patterns:

  • Delegation – one objects gives certain responsibilities to another object.
  • Data Source – is responsible for providing data to another object when requested.
  • Model-View-Controller – each object fulfills a role:
    • model – data
    • view – displays the user interface
    • controller – ties the model and view together
  • Target-action pairs – one objects calls a method on another object

Chapter 10 Editing UITableView

Editing Mode

UITableView has an editing property, when set to true UITableView enters editing mode. Editing mode does not allow user to edit content of row.

Header View appears in the top of the table. Header is used to describe table headers and section headers.

In Homepwner, add the following to ItemsViewController.swift:

screen-shot-2016-10-21-at-12-28-03-pm

  • In Main.storyboard, drag a View to the top of the tableView and resize the height to be 60 pts.
  • Drag two buttons into the header view.
  • Select both buttons and open Auto Layout align and select Vertically in Container.
  • Update frames.
  • Open pin menu and configure as shown below

screen-shot-2016-10-21-at-12-36-49-pm

  • Connect buttons to ItemsViewContoller, select toggleEditingMode for edit and addNewItem for add

Add the following to toggleEditingMode button:

screen-shot-2016-10-21-at-12-45-05-pm


Adding Rows

Most common interfaces for adding rows at runtime:

  • A button above cells of the table view
  • A cell with a green plus sign

Add the following to addNewItem:

screen-shot-2016-10-21-at-12-51-58-pm

DataSource of the UITableView determines the number of rows the table view will display.

The following is snippet of code allows for a row to be added to the list.

screen-shot-2016-11-11-at-12-04-29-am

Since you are now able to add Items to to the ItemStore, the initializer that adds 5 items to the list should be removed from the ItemStore leaving the ItemStore as shown below.

screen-shot-2016-11-11-at-12-05-23-am


Deleting Rows

Adding functionality to the red circles on each row. When deleting a cell you must do two things remove the row from UITableView and remove the item from the ItemStore.

To do this ItemStore must be able to delete an item, add the following to functions to ItemStore.swift

screen-shot-2016-11-11-at-12-57-20-am

Also add the following to ItemsViewController.swift.

screen-shot-2016-11-11-at-1-10-37-am


Moving Rows

To be able to change the order of the items in the list a method to do so must be added to ItemStore.swift.

screen-shot-2016-11-11-at-1-17-06-am

As well as ItemsViewController.swift

screen-shot-2016-11-11-at-1-20-17-am


Display User Alerts

Add the following to ItemsViewController.swift, this will create a user warning using the .ActionSheet style which allows the user to deny or back away from the alert without making a decision.

There are two types of styles for alerts:

  • UIAlertControllerStyle.ActionSheet – used to present the user with a list of actions from which to choose from. This method is used if a user can back out of a decision or the action is not critical.
  • UIAlertControllerStyle.Action – used to display critical information o require the user to decide how to proceed.

screen-shot-2016-11-11-at-3-14-45-am

Modal View Controller – takes over the screen until it has finished.


Design Pattern – solves common software engineering problems. Contains ideas and/or approaches to use in the application.

Types of Design Patterns:

  • Delegation – one objects gives certain responsibilities to another object.
  • Data Source – is responsible for providing data to another object when requested.
  • Model-View-Controller – each object fulfills a role:
    • model – data
    • view – displays the user interface
    • controller – ties the model and view together
  • Target-action pairs – one objects calls a method on another object

Download the PDF file .

Chapter 9 Vocabulary

Model – holds data and knows nothing about the user interface.

View – is visible to the user and knows nothing about the model objects.

Controller – keeps the user interface and the model objects in sync and controls the flow of the application.

Designated initializer – ensures all properties in a class have a value.

Free initializer – init() is useful when all your class properties have default values and do not need new instances.

Convenience initializers – always call another initializer on the same class.

Dependency inversion principle – goal is to decouple objects in inverting dependencies between them. States that high-level objects should not depend on low-level objects, both should depend on abstraction. Also states that abstractions should not depend on details, details should depend on abstractions.

Dependency injection – high-level objects do not assume which low-level objects they need to use, instead they are passed through an initializer or property.

Chapter 9 UITableView and UITableViewController

UITableViewController

Model – holds data and knows nothing about the user interface.

View – is visible to the user and knows nothing about the model objects.

Controller – keeps the user interface and the model objects in sync and controls the flow of the application.

UITableView is a view object and doesn’t handle application logic or data. It typically needs a view controller to handle its appearance on the screen. I needs a data source. UITableView asks the data source for the the number of rows to display and the data to be shown. Without the data source the UITableView is an empty container. Any type of object can be a data source if it conforms to the UITableViewDataSource protocol.

An instance of UITableViewController class can be a view controller, data source, and a delegate.

UITableViewController is a subclass of UIViewController. UITableViewController’s view is always an instance of UITableView and the UITableViewController handles the preparation and presentation of the UITableView.


Subclassing UITableViewController

Implementing a subclass of UITableViewController for Homepwner. Create a new file named ItemsViewController. Define UITableViewController subclass named ItemsViewController.

screen-shot-2016-10-21-at-12-27-32-am

In Main.storyboard, delete the View Controller. Drag a Table View Controller onto the canvas. In the identity inspector change the class to ItemViewController. In the attributes inspector, check the box for Initial View Controller. Then delete the ViewController.swift file.


Creating the Item Class

Create a new Item.swift file.

screen-shot-2016-10-21-at-12-27-32-am

Item inherits from NSObject (base class that most Objective-C classes inherit from). SerialNumber is an optional String because an item doesn’t have to have a value.


Custom initializers

Structs do not support inheritance. Classes can have two kinds of initializers: designated initializers and convenience initializers. Every class has at least one designated initializer.

Designated initializer – ensures all properties in a class have a value.

screen-shot-2016-10-21-at-3-45-13-am

Free initializer – init() is useful when all your class properties have default values and do not need new instances.

Convenience initializers – always call another initializer on the same class.

screen-shot-2016-10-21-at-4-05-22-am


UITableView’s Data Source

Create a new Swift file named ItemStore.

screen-shot-2016-10-21-at-4-12-36-am


Giving the controller access to the store

In ItemViewController.swift add:

screen-shot-2016-10-21-at-4-16-00-am

In AppDelegate.swift add:

screen-shot-2016-10-21-at-4-14-52-am

In ItemStore.swift add:

screen-shot-2016-10-21-at-4-16-41-am

Dependency inversion principle – goal is to decouple objects in inverting dependencies between them. States that high-level objects should not depend on low-level objects, both should depend on abstraction. Also states that abstractions should not depend on details, details should depend on abstractions.

Dependency injection – high-level objects do not assume which low-level objects they need to use, instead they are passed through an initializer or property.


Implementing data source methods

In ItemsViewController.swift add:

screen-shot-2016-10-21-at-4-27-27-am


Creating and retrieving UITableViewCells

In ItemsViewController.swift add: this will display the contents in allItems array

screen-shot-2016-10-21-at-4-32-29-am

Reusing UITableViewCells

iOS devices have a limited amount of memory, reusing cells saves space. Reusing cells essentially tells the table view  to return a cell with the same class.

In Main.storyboard, select the prototype cell and open the attributes inspector. Change style to Right detail and give it an identifier of UITableViewCell.

In ItemsViewController.swift add:

screen-shot-2016-10-21-at-4-32-56-am

Content Insets

In ItemsViewController.swift add:

screen-shot-2016-10-21-at-5-09-55-am

So far, the application has been taking up the entire screen not leaving room for the status bar. This cade snippet adds padding at the top of the screen.