(translated) Getting started--1.2.4 Tutorial:storyboard (story board)

This tutorial is based on the project you built in the previous lesson. After completing this tutorial, you will use the view, view controller, actions, navigation content you learned earlier, create some key user interfaces for your app, and add behaviors to your scene

Here's what this lesson is about:

1. Use storyboard to define app content and processes

2. Managing multiple View Controllers

3. Add an action to the element on the user interface

After completing this tutorial, your app should look like this:

Create a second scene

So far, all you've done is a single scene managed by the view Controller, a page that adds events to the list of to-do events, the scene where the events are added. Now it's time to create the list. Fortunately, iOS has built in a powerful class: Table View (UITableView), which is used to display list items that can be scrolled.

To add a table to a storyboard scene:

1. In the Project Navigator, select Main.storyboard. If the project navigator is turned off, click the Navigator button on the Xcode toolbar to open it:

If the assistant editor is open, click the Standard button to close it.

2. Open the object library in the utility area.

3. In the Object Library's search box, enter the table view controller to quickly locate the object.

4. From the list, drag a table View controller object onto the canvas. If necessary, you can use the menu: Editor > Canvas > Zoom to zoom Out on the scene. If you're trying to drag a table view onto the canvas, but without a drag, you're probably dragging a table view instead of a table view controller.

Now, there are two scenarios in storyboard, one for displaying to-do lists and one for adding to-dos:

When the user opens the app, they should see the to-do list, so you can set the table view controller as the starting scene, as follows:

Drag the entry point before the Add event scene to the scene before the to-do list.

The table View Controller is now set as the initial view director, which acts as the first scene to load after the app starts.

Note: Now that you are running the project, you should see an empty table view--that the page is separated by a horizontal line, but there is nothing on each line.

displaying static content in a table view

Because you have not yet learned the storage of data, it is too early to create and store the data to be displayed on the list. However, you do not have to need real data on the interface. In Xcode, you can create some static content for table view in Interface Builder. This way to see what the interface looks like, it is easier and more convenient, you can also use this method to try more ideas oh.

To create a static cell in a table view:

1. If necessary, open the outline view

2. In outline view, select the table view located below the table view Controller

3. Select the table view to open the attributes of the utility area Inspector

4. In Attributes Inspector, in the pop-up menu of Content option, select Static Cells. Empty three table cells appear in table view in storyboard

5. In outline view, select the topmost cell

6. In Attributes Inspector, in the menu of Style option Pop-up, select Basic. The basic style contains a label, so Xcode creates a label,label text on the cell that is the title.

7. Select the label in outline view:

8. In Attributes Inspector, change the label text to "mowing the lawn". When the input is complete, press RETURN or click in the utility area to see the effect.

9. Alternatively, you can double-click on the Label control to modify the text.

10. Repeat the above 4~7 steps for the other two cells and enter other TODO items.

11. Create enough cells (more than one page) and create them in a way that can be copied, pasted, or dragged.

Checkpoint: Run the app. You'll see what you've added in Interface builder, because the table has more than one screen, and you can scroll back and forth to feel it. On the emulator screen, you will find that the contents of the table are still displayed normally. With table view, there is a lot of behavior by default. You must have noticed that the top cell has covered the status bar of the device-the area that shows the time, battery, and other information about the phone. This is a problem, but don't worry, it will be fixed later in the tutorial.

Add segue to navigate forward

It's time to add navigation to table view, and after adding navigation, the user can jump from the list page to the page that was created in the previous tutorial to add to-dos. As we have already said in the section defining the Interaction (definition interaction), transitions between two scenes are referred to as segue.

Before you create a segue, you need to configure the scene. First, wrap the table view controller in the navigation controller. Remember what defining the Interaction (definition Interaction) section says? The navigation controller provides a navigation bar and keeps track of the navigation stack. Next, you'll add a button on the navigation bar to jump to the scene where you want to add the to-do item.

Adding a navigation controller to a table view controller requires the following steps:

1. In outline view, select the table View Controller

2. Select the table View controller, select menu: Editor > Embed in > Navigation controller

After doing this, Xcode adds a new navigation controller to storyboard, sets the entry point for the storyboard, and the new navigation controller and the existing table Create a relationship between the view controllers.

In the canvas, if you select the icon to connect two scenes, you will see the Relatioinship root View Controller to table view in the navigation controller under outline view Controller's Word. This means that the content view displayed under the navigation bar will be a table view. The entry point of the storyboard is set to the navigation controller, because all the content displayed in the application is in the navigation controller. The navigation controller is both a container for a to-do list scenario and a container for adding to-do scenarios.

Checkpoint: Run the app. Above the table view, you will see an extra space, which is the navigation bar provided by the navigation controller. The navigation bar extends its back to the top status bar, so the status bar won't cover your content anymore.

Next, you add a to-do list title and a add to-do button on the navigation bar. The navigation bar gets the caption from the view controller displayed in the navigation controller-the navigation bar itself is untitled. So, instead of just adding a caption to the navigation bar, you add a title to the Navigation item (table View Controller) for the to-do list.

To add a title, follow these steps:

1. On the outline view or on the canvas, select Navigatioin Item Under Table View Controller:

2. In the title field of Attributes Inspector, type the To Do list, and then click the Return key. At this point, Xcode automatically changes the description of the scene from the table View controller to the to-do list, which makes it easier to locate the scene. The descriptions shown in outline view are as follows:

3. In the object library, locate the bar Button item object.

4. Drag a bar Buttom item object and place it to the right of the navigation bar in the table view controller so that the button with the text item is on the navigation bar.

5. On the outline view or on the canvas, select Bar button item.

6. In Attributes inspector, find the identifier option in the Bar Button item section and choose the Add menu from its pop-up menu. At this point, the button looks like an Add button (+).

Checkpoint: Run the app. At this point, the navigation bar should have a caption and display the Add button. However, clicking on the button does not have any reaction.

The intention to use the Add button is to elicit a scenario where the backlog is added. The scenario has been created in the previous tutorial, but it is not yet connected to other scenarios. You need to configure the Add button so that when the user presses the button, the page can jump to the page where the backlog is added. To achieve this, you should do this:

1. On the canvas, select the Add button

2. Control-Drag from the button to the view controller that adds to-dos

At the end of the drag, a shortcut menu appears:

The Action Segue menu lets you choose which type of segue you need to use to transition from the to-do list to the add to-do page when the user clicks the Add to do button.

3. From the Action Segue menu, select Show

Xcode configuration Segue, set the view controller to display the add to DOS in the navigation controller, in Interface Builder, you will see the navigation bar

Checkpoint: Run the app. Click the Add button and the page will navigate from the table View Controller to the add to-do view controller. Because you are using the navigation controller with show segue, the system handles the return navigation operation for you. This means that if you click the Back button, the page will return to the list page.

The Push-style type of navigation you get by using show segue is different from what you think. Push navigation is designed to be a downward-gripping interface where you can provide more information about the user's choice of Dongdong. Furthermore, the add operation is typically a modal operation-the user performs a complete, independent action, and then returns from the scene to the main navigation. The appropriate presentation method for this type of scene should be modal segue.

Do not delete the existing segue, do not create a new segue, the segue type to modal. As with most of the optional elements in storyboard, you can add segue properties in the Attributes Inspector panel.

Change the Segue type:

1. On outline view or on the canvas, select the segue of the view controller from the table view Controller to the Add to-dos item.

2. In Attributes Inspector, in the pop-up menu of the Segue option, select present modally.

Because the modal view controller is not added to the navigation stack, it does not get a navigation bar from the Navigation Controller of Table view controllers. However, you might want to show the navigation bar on the modal View controller, which gives the user a uniform visual effect, and you can do this: when the modal appears, add a navigation bar to the view controller that adds the to-dos, and embed it in its own navigation controller:

To add a navigation controller to a TODO View controller:

1. In outline view, select the View Controller

2. Select Editor > Embed in > Navigation Controller

As previously mentioned, Xcode adds a navigation controller and displays the navigation bar at the top of the view controller. Below, configure a title and two buttons for this navigation bar: Cancel, save. Then, add the events to the two buttons.

To configure the navigation bar to add a to-do view controller:

1. On the outline view or on the canvas, select the navigation item under View Controller

2. In the title field of Attributes Inspector, type add to-do text. Xcode will automatically change the description of the view controller scene to add to-do scenarios, which will make it easier for you to navigate, as shown here:

3. Drag a bar Button item object from the object library and place it on the right side of the add to-do view controller

4. In the Attributes Inspector identifier option, select Save from the pop-up menu and the text on the button becomes save

5. Drag a bar Button item object from the object library and place it on the left side of the add to-do view controller

6. In the Attributes Inspector identifier option, from the pop-up menu, select Cancel, and the text on the button changes to cancel

Checkpoint: Run the app. Click the New button. What you see is still the add to-do scenario, but the scene is no longer a scene with a Back button on the navigation bar, instead you'll see the two buttons you just added: Save and cancel. Now, these two buttons are not linked to any action, so you don't have to react when you click the button. The next task is to configure the two buttons to complete or cancel the edits to the new backlog and return to the to-do list.

Create a custom View controller

So far, no line of code has been written, and all of the configurations have been completed. To complete the configuration of adding a to-do view controller, write some code, and find somewhere to store the code.

After the project has been created successfully, the code that responds to the add to-do view controller is generated in the ViewController.h and viewcontroller.m files. These two files are custom view controllers that, as part of the single view application template, are created together with the creation of a project. However, it is important to learn how to create and configure a view controller yourself, as this is a common feature of iOS app development. Therefore, it is now necessary to create a view controller named Addtodoitemviewcontroller that responds to the scenario of adding to-dos in Stroyboard. Addtodoitemviewcontroller is a subclass of Viewcontroller, so in it you can get all the basic functions of the view controller.

You can even delete the ViewController.h and viewcontroller.m files if you like, because in this tutorial they don't work at all. Delete the method is: in the Project Navigator, select the file to delete, press the DELETE key, in the dialog box that appears, click the Move to Trash option.

To create a custom view controller:

1. Select menu: File > New > file, or Use COMMAND + N shortcut keys

2. On the left side of the popup dialog box, select Source in the iOS section

3. Select Cocoa Touch Class and click Next

4. In the Class field, enter Addtodoitem

5. In the pop-up menu of subclass, select Uiviewcontroller, the title of the class becomes Addtodoitemviewcontroller, and Xcode is named to see it more clearly.

6. Make sure that the also create XIB file option is not checked

7. Ensure that the language option is selected Objective-c

8. Click the Next button. The default storage location for files is in the project's directory. The group option is the name of the app by default.

9. Keep the value of the other option as the default value, click Create.

After completing the above steps, Xcode creates two files: AddToDoItemViewController.h (interface file) and ADDTODOITEMVIEWCONTROLLER.M (implementation file) file.

That way, you've created a custom view controller, and one step is important, You have to tell storyboard to use this view controller: you have to change the add to-do scenario from the original used Viewcontroller to Addtodoitemviewcontroller.

Method of Replacement:

1. In the Project Navigator, select Main.storyboard

2. If necessary, open the outline view

3. In outline view, under Add to-do scenario, select the View Controller

4. In the utility area, click the third icon to open the identity inspector

Indentity Inspector lets you edit properties of objects related to the identity of an object in storyboard, such as which class the object belongs to.

5. Open the pop-up menu for the class option, and the contents of the pop-up menu are a list of all the view controllers that Xcode can recognize. The first element in the list should be your custom view controller: Addtodoitemviewcontroller

6. Select Use Addtodoitemviewcontroller for this scenario

Note: In outline view, Xcode changes the description of the add to-do view controller, from view controller to add to-dos. Xcode's approach makes it easier to understand a custom class.

At run time, the storyboard creates an instance of the Addtodoitemviewcontroller class, which is a subclass of the custom view controller. The scenario for adding to-dos in your app will get the interface defined in storyboard and define the behavior in ADDTODOITEMVIEWCONTROLLER.M.

You can now create a custom class in the storyboard that responds to the to-do list scenario. Because the to-do list scenario is a table view controller, its class is a subclass of the Uitableviewcontroller class. Similarly, Uitableviewcontroller provides the basic behavior of the view controller, as well as some behavior that can only be used by Table view.

To create a subclass of Uitableviewcontroller:

1. Select menu: File > New > file, or Use COMMAND + N shortcut keys

2. In source on the left side of the iOS section, select Cocoa Touch Class

3. Click Next

4. In the Class field, enter ToDoList

5. In subclass of pop-up menu, select Uitableviewcontroller, the title of the class becomes Todolisttableviewcontroller.

6. Make sure that the also create XIB file option is not checked

7. Ensure that the language option is selected Objective-c

8. Click the Next button. The default storage location for files is in the project's directory. The group option is the name of the app by default.

9. Keep the value of the other option as the default value, click Create.

After completing the above steps, Xcode creates two files: ToDoListViewController.h (interface file) and TODOLISTVIEWCONTROLLER.M (implementation file) file.

To configure Identity:todolistviewcontroller for a to-do list scenario:

1. In the Project Navigator, select Main.storyboard

2. In outline view, select the table View controller in the to-do list scenario and open the Identity Inspector panel for the utility area

3. From the class option's pop-up menu, select Todolistviewcontroller

Well, you can add code to your own view controller.

Add unwind to the returned navigation Segue

In addition to the show and modal types of segue,xcode, unwind types of segue are also available. This type of segue allows the user to return from the specified scene to the previous scene, and when the user returns to the previous scene, the type of segue also provides the execution for the code that it has written. We need to use this type of segue to return to Todolistviewcontroller from Addtodoitemviewcontroller.

To create a unwind type of segue, first, you need to add a method to the target view controller (the view controller that will be used for the scene being presented), the type of the method must be ibacion, and the parameter type is uistoryboardsegue. Because you want to go back to the to-do list scenario, you need to add a method to the Todolistviewcontroller interface and implementation file as described above.

Steps to add a method:

1. In the Project Navigator, open the ToDoListViewController.h file

2. At the bottom of the @interface, add the following code:

-(Ibaction) Unwindtolist: (Uistoryboardsegue *) segue;

3. In the Project Navigator, open the todolistviewcontroller.m file

4. Under @implementation, add the following code:

-(Ibaction) Unwindtolist: (Uistoryboardsegue *) Segue {

}

You can name the method as any valid name you like. The method name in the example is: unwindtolist, so the reason for naming is to see how the method works in terms of the name of the method. Similar naming conventions will be used in later projects.

Now, the implementation of this method is empty. This method will then be used to retrieve the data from the Addtodoitemviewcontroller and then add the retrieved data to the to-do list.

To create a unwind segue, link it to the Cancel and save buttons.

The specific practice is to:

1. In the Project Navigator, select Main.storyboard

2. On the canvas, on the button control, drag from the Cancel button to the rightmost Exit button on the top of the canvas:

If you don't find the Exit button on the top of the canvas and you find a description of the canvas, you can keep using the editor > Canvas > Zoom menu until you see it.

At the end of the drag, a menu will appear:

3. From the shortcut menu, select Unwindtolist.

4. This is the action you just added to the todolisttableviewcontroller.m file. Now, if the user clicks the Cancel button, they should go back to the to-Do List page. At this point, the Unwindtolist method is called.

5. On the canvas, hold down the control key and drag from the Save button to the Exit button.

At the end of the drag, a menu will appear:

6. From the shortcut menu, select Unwindtolist

Now, when the user clicks the Save button, the page jumps to the to-do list scene, and the Unwindtolist method is called.

Note: The Save and cancel two buttons use the same action. In a later tutorial, you will write code to differentiate between these two different situations.

Checkpoint: Run the app. You will see a table view--but there is no data in it when the boot is complete. Click the Add button and the app will jump from the To Do List page to the add to-do page. You can go back to the list page by clicking the Save button or the Cancel button on the Add to-do page.

Why isn't the data displayed? Table view has two ways to get data-static, dynamic. If the View Controller for table view has implemented the required method: Uitableviewdatasource, then the table view data source is the view controller, regardless of whether static data is configured in Interface Builder. Now that you have opened the todolisttableviewcontroller.m file, you will have implemented three methods in the discovery file--numberofsectionsintableview,tableview: Numberofrowsinsection,tableview:cellforrowindexpath. In the following tutorial, you will use these three methods to display dynamic Data.

Review

So far, you have completed the development of the application interface. There are two scenarios in the app-to-do list, add to-dos, and users can navigate back and forth between the two pages. Next module, the ability to add to-do items and browse to-do lists is implemented.

(translated) Getting started--1.2.4 Tutorial:storyboard (story board)