Introductory ios Development

Transcription

1 Introductory ios Development Unit 5 - Multi-View Apps Quick Links & Text References What is a Delegate? What is a Protocol? Delegates, Protocols and TableViews Creating a Master-Detail App Modifying the Master-Detail Template Sending Data from Master View to Detail View Modifying Detail View to Allow Editing UINavigationController Sharing the Collection Sending a Record to the Detail View Adding a Record Showing the Details Saving the Changes / New Data Updating the TableView Deleting Records Custom Cell Layouts Animating the Segues ich.com/75289/swifttutorial-part-3-tuplesprotocols-delegatestable-views Page 1 of 16

2 What is a Delegate? source ios Developer Library Delegates are objects that implement certain functions when it doesn't make sense to implement those functions on the normal object. Delegation is when an object will pass the responsibility of handling an event to another object thus "delegating" the responsibility to that object. Allows an object to act on behalf of another. Delegates allow you share data between classes The main value of delegation is that it allows you to easily customize the behavior of several objects in one central object. The advantage of the delegate design pattern is loose coupling. It enables class A (the delegate) to depend on class B (the delegating class) without class B having to have any knowledge of class A. This ensures that the dependency relationship is one-way only, rather than being circular. What is a Protocol? Timer Sample ObjC Guide for Developers A minimum interface that a class needs to implement to interact with another class Delegates contain protocols Protocols define how to communicate with the delegate Methods defined in the protocol Methods that must be implemented by classes delegating to protocol Properties that are available Page 2 of 16

3 Delegates, Protocols and TableViews Source ObjC Guide for Developers Delegation helps to separate models from controllers (MVC). Such as in John Cartwright's example: a UITableView knows how to display rows and sections. It knows how to reuse UITableViewCells for performance reasons. It knows all of the other stuff a UIScrollView knows. But it doesn't know which cells to display. know what to populate those cells with. which cells to reuse for a given NSIndexPath. This really should be the job of the controller, anyways. Delegation allows the table view to offload this non-view logic onto an object that should have that responsibility anyways. More than that, you're not locked into one delegate for the entire lifetime of an object. You could very easily have multiple data sources for a given UITableView and switch them around at run time as needed. Creating a Master-Detail App Master/Detail apps include a table view in the master scene that segues into a details scene when the user clicks one of elements in the table view. Create a new project Master-Detail Application m/swift/buildingswift-app-tutorial Part 2 Part 3 Page 3 of 16

4 The primary scene in a Master-Detail app is a UITableViewController. This is primarily comprised of a UITableView that displays a scrollable list of data displayed in cells. A UITableView defines two protocols that declare what methods it expects two other classes, called the data source and the delegate, to implement to be able to retrieve the information it needs. Since the protocols are separated, the two classes can also be separated, but they are generally the same class. The data source implements methods that tell the table view how many items and sections there should be and provides them when the table view asks for them to display them on screen. The delegate provides information on the visualization of these items, like the kind and size of views used to represent items (cells). Also what events to handle. TableViewController contains both delegates Cell Reuse UITableViews only show enough cells to fill the screen plus a couple to improve scrolling. Those cells are reused with different data when you scroll Add standard code to tableview:cellforrowatindexpath Page 4 of 16

5 Many details of the table view controller are taken care of for you: Navigation controller is created that links to a table view controller (that contains a table view) Nav Controller provides a common (dynamic) navigation bar For now, I recommend turning off Auto Layout This example assumes you re using an iphone layout ipad layout and processing is different Table View controller class is set to the table view controller that was created (see Identity Inspector with table view controller selected in Storyboard) Table view already contains a prototype cell Details of how each list item looks on the screen Reuse identifier already defined (Cell) Select Cell in outline and Attributes Inspector Consider changing Identifier Detail View is created that is linked to the table view controller via segue Master view controller includes a private collection of objects used to populate the table view We will be replacing this with our own collection Buttons added to master view controller to edit and add items Code to add new items to the list (insertnewobject) Linked to add button above Required prototypes for table view numberofsectionsintableview numberofrowsinsection cellforrowatindexpath Includes reusable cells caneditrowatindexpath commiteditingstyleforrowatindexpath prepareforsegue Used to switch to detail view When cell touched (connection defined) Page 5 of 16

6 Many details of the Detail View are taken care of for you: A detail item property that will hold the item selected in the list Detail item outlet created pointing to label to display detail information Prototypes for managing the detail detailitem configureview viewdidload Project can be run as is Adding items simply adds the current date / time Edit allows you delete items Click item to switch to Detail View (can come back) Modifying the Master-Detail Template First create a class to store the data each table item should represent In master, viewdidload, fill array with sample data In master, cellforrowatindexpath Change object type to match yours Consider changing _objects name Transfer appropriate field from class to textlabel.text detailtextlabel.text FamilyMember: first, last, birthday Display first name + last name Modify insertnewobject Create new class object (from detail form?) We will create our own version of this later Comment out insertnewobject Sending Data from the Master View to the Detail View Modify prepareforsegue Send your class instead of NSDate Modify Detail View Modify detailitem: change type to YourClass Modify configureview to display what you want Receive FamilyMember object Page 6 of 16

7 Modifying Detail View to Allow Editing Modify detail view to accept data into input fields (instead of label) Need a way to get data changes from detail view back to master view. In order to get back from Detail View to Master View, we ll first have to add a Navigaton Controller between them. Nav Controller allows adding buttons to the navigation bar Display names in Text Fields, birth date in DateTime picker formatted Date only Test. UINavigationController Navigation controller (controller in MVC) maintains a stack of other ViewControllers Provides means to navigate between them Buttons that change as views change Starting View Controller is aka root view controller Zoom storyboard to 50% Add a Navigation Controller to the storyboard Delete the Root View Controller that comes with the Nav Controller Delete the segue between the original master view controller and detail view controller Move the Navigation Controller between the master and detail view Ctrl-drag from the Prototype Cell in Master View Controller to the Navigation Controller Choose modal as the segue type Modal is similar to a dialog in Windows that stops all other app processing until the view is closed/returned Change segue Identifier (Attributes) to showdetails Ctrl-drag from Nav Controller to Detail View Choose root view controller This designates that the detail view actually comprises the contents of the view Follow instructions Page 7 of 16

8 Add an Add Bar Button Item to the right side of the Master View Controller nav bar Ctrl-drag from the Add button to the Detail view Nav Controller Choose modal as the segue type Change the segue Identifier to AddItem (or something like that) Add two Bar Button Items to the Detail view Drag to left side of Nav Bar in Detail view Change Identifier (Attributes) to Cancel Drag to right side of Nav Bar in Detail view Change Identifier to Save Create a DismissSegue class A segue that dismisses one view (modal) to return to another is not automatically defined. Once it is defined, it is available for all segues to use (appears in popup menu) FileNewFile ioscocoa Touch Class This designates the class will subclass a built-in touch class Class (name): DismissSegue Subclass of UIStoryBoardSegue Language: Swift Note: have to to class definition or nav button doesn t know what to return to May be fixed in later versions of Xcode/Swift Define DismissSegue import DismissSegue: UIStoryboardSegue { override func perform() { if let controller = sourceviewcontroller.presentingviewcontroller? { controller.dismissviewcontrolleranimated(true, completion:nil) //end if //end perform //end class Page 8 of 16

9 Connect Detail View buttons to Master View Ctrl-drag Cancel button to Master View Controller Choose dismiss in popup Important: change Identifier (Attributes) to dismissandcancel Ctrl-drag Save button to Master View Controller Choose dismiss in popup Important: change Identifier (Attributes) to dismissandsave Create segues Sharing the Collection Now, we need some way to share our data collection between the two views (Master and Details) There are definitely other ways to do this, but I believe creating a static array is the easiest Define a new class (FileNewFileiOS Swift File Name the class appropriately for a collection of your program s objects This class will only contain one property a classlevel, shared array of objects It will also contain methods to manipulate the array elements Define the Family class Page 9 of 16

10 class ClassName { //Create the single instance of the array //Initialized automatically first time referenced class var pluralclassname: YourClassName { struct Static static let instance = pluralclassname(); //Instantiate return Static.instance //end static class var pluralobjects: [pluralobjectname]=[] //internal array var count: Int { return pluralobjects.count func addobject(newobject: YourClassName) { pluralobjects.append(newobject) func get(index: Int) -> YourClassName { return pluralobjects[index] func removeatindex(index: Int) { pluralobjects.removeatindex(index)) func replace(newobject: YourClassName, index:int) { pluralobjects[index] = newobject //end class This class is a wrapper class. It wraps around an array of your objects It provides additional functionality by making the array static, available to all other classes (ViewControllers in our case) Basically, makes the array a global variable Since it wraps around the array, the wrapper class must provide access to the functionality of the array. External users don t have access to the internal array The methods we define provide that access. Replace: ClassName with a singular name to be used externally for the array of objects (Family) pluralclassname with external name of the array (members) YourClassName with the name of your class (FamilyMember) pluralobjects with the internal name of the array (themembers) Object with an appropriate substitute for your program (Member) Page 10 of 16

11 pluralclassname is the name used external to the class to access our array It is defined as a class variable (shared by all instances if there were more than one) It s not an array itself, but it contains our internal array, so it s often treated like an array. pluralobjects is the name of the array used internal to the class count is a property that mimics the array count property (provides access to the internal array s count) add allows the user class to add a new element to the internal array get returns the element (or your program class) at the given index removeatindex allows the user class to delete an element from the array replace allows the user class to replace an element in the array with an updated version of that element Note: we don t edit elements of the array; we replace the element with an updated version. Sending a Record to the Detail View Now that the array of data is shared, we don t actually have to send data to the Detail View it already has access to the complete array. We do have to tell the Detail View which record we want displayed However, there are two ways we might transfer control to the Detail View Add new record (+) Click a cell (edit record) When the user clicks a cell to see/edit the details, all we have to do is send the index of the selected cell to the Detail View The Detail View will then display the corresponding element in the array. When the user clicks + to all a new element, we won t send anything to the Detail View. The Detail View will sense this and display an empty record. Page 11 of 16

12 To prepare, we ll first add a variable to Detail View to hold the selected index Above all functions: var selectedindex: Int? Note this is an optional variable, allowing it to be undefined when the request is to add a new record. Remove the detail variable initially defined when the project was created. Add memberindex? to detail view Now, we need to send the selected cell index from the Master View to the Detail View prepareforsegue should already have an If statement that checks which segue is being used and another If statement that ensures a cell has been selected, unwrapping the row data. If the selected segue is showdetails (cell was tapped), we need to send the index of the cell to the Detail View We can t simply send the index from Master to Detail View however, because there s a Nav Controller in between. ((segue.destinationviewcontroller as UINavigationController).topViewController as DetailViewController).selectedIndex = indexpath.row Send the index to Detail View Whew! First we grab the segue s destination which we know to be a Nav Controller. Then we grab the Nav Controller s top View Controller which we know is a DetailViewController Nav Controller s can have a whole stack of Views to control Now we have a pointer to our Detail View which gives us access to the selectedindex variable which we set to the index of the selected cell in the Table View. Adding a Record Nothing to do here. If the segue is not showdetails, we simply segue to the Detail View without sending anything. The index will be undefined, letting the Detail View know we re adding a new record. Page 12 of 16

13 Showing the Details Nothing to it really. We simply use the index sent by the Master View to retrieve the corresponding object from the static array class If the index is undefined, we simply leave the default values of the form objects (blank) Could set some other default values if appropriate Show details Test In configureview (Detail View): if let index: Int = self.selectedindex { var obj = ClassName.pluralClassName.get(index) //Transfer class members to View objects The first statement checks to see if the selectedindex is set and unwraps it (it s optional) if it is. If the selectedindex is set, the corresponding array element is retrieved Note to access the array, you must first designate the class name (because the array is a class variable), then provide the external name of the array (not really an array, but let s not get technical). Finally, the data members of the array element are transferred to the corresponding View objects (TextView, Switch, etc.) If the selectedindex is NOT set, nothing is done View objects are left in their default states Could add an else and define specific default values if appropriate. Saving the Changes / New Data We ll know the user s done editing when they click either the Cancel or Save button, causing the segue to occur In prepareforsegue (Detail View) If the segue ID is dismissandcancel, do nothing. Simply dismiss the Detail View and return to the Master View (no code required) Page 13 of 16

14 if segue.identifer == "dismissandsave" { //newobj: Instantiate new object and fill with form object data if index: Int = self.selectedindex { ClassName.pluralClassName.replace(newObj, atindex: index) else { ClassName.pluralClassName.add(newObj) If we re saving, create a new instance of YourClassName and fill it with the data from the scene (that the user entered) Then, we once again unwrap the selectedindex If it exists, we replace the existing element in the array with the new one. If it doesn t exist, we add the new element to the array. Done! Now we can return to the Master View Save details Test Updating the TableView If you test the program now, you ll see that new records add and are immediately displayed in the TableView. However, the changes to existing records are not displayed. However, if you return to Detail View you ll they were saved. This seems to have something to do with how Swift senses changes to the array. If there s a new element, add it. If the element already exists (even though we replaced it with a new one), it already exists so no need to refresh. We need to tell the Master View to refresh the TableView whenever we return from the Detail View Simply add a new event handler: override func viewwillappear(animated: Bool) { self.tableview.reloaddata() viewwillappear is built-in to the TableViewController we re simply overriding it s behavor (should super class behavior be invoked?) When the View reappears, we tell the tableview (which is also predefined in the TableViewController) to reload its data. Page 14 of 16

15 Deleting Records One final step. When the user chooses to delete a cell from the Table View, we also have to remove it from the array In tableview:commiteditingstyle, if we re deleting, add code to remove from the array as well: ClassName.pluralClassName.removeAtIndex(indexPath.row) Custom Cell Layouts Change Style attribute to Custom Drag labels, text views, images etc to prototype Option 1 Assign unique numbers (10, 20, 30, etc) to the Tag attribute for each object In cellforrowatindexpath:indexpath add code to point to the object let lblname = cell.viewwithtag(10) as UILabel; Option 2 (Better?) Create a custom UITableViewCell subclass FileNewFileCocoa Touch Name it and change subclass of to UITableViewCell Change Import Cocoa to UIKit In the class, manually add outlets for the objects in the weak var objname: UIType! Change objname and UIType as appropriate In the storyboard, select the prototype cell Select Identity Inspector Change the class name to your new subclass name Connect the cell objects to their IBOutlets Open the document outline Open Connections Inspector Select a cell object Drag from Referencing Outlets to SUBCLASS in outline (first item under Table View) Select object from popup list Page 15 of 16

16 In MasterViewController, change the type of *cell (in dequeue command) to the new subclass name These objects are now part of the cell object cell.lblname.text = "Volker"; Animating the Segues Click the segue icon between table view controller and nav controller that follows it Access the Attributes inspector Change transition Page 16 of 16