A Storyboard overview of visual programming for iOS development

Storyboard is a new technology that apple introduced in iOS5 to make complex nibs and xibs more intuitive.

Start

As mentioned in the previous article, a Storyboard is a resource file, and its essence is an XML file, as illustrated in the Xib brief for iOS development visual programming.

Storyboard is powerful, it gives us a new way to segue to pages, and it’s much more powerful with cell support.

A important essence

When I create an empty iOS project, it actually initializes the storyboard file as the entry point for the application. And the ViewController is actually tied to the storyboard. So in the last Xib overview of visual programming for iOS development, when we used the RootViewController file that initialized the Xib as the entry point, we deleted the main. storyboard file and removed Main from the Main interface.

In addition, we can also view it from the info.plist file

The simple use of Storyboard

In fact, we can think of a storyboard as an enhanced XIB, which is a combination of n XiBs. But storyboards can only be used by VC subclasses, which means we can only drag THE VC from the web, and the presentation of the View must depend on the PRESENTATION of the VC.

The setting of the attributes under the TAB is explained in the Xib introduction to visual programming for iOS development, please move on.

The focus of this article

This article about storyboards focuses on segues and storyboard support for cells

Again, we’re modeling the application in a way that simulates the requirements, and we’re still simulating the login interface.

So this time we’re going to set up the navigation view control on the login screen, click login to go to a UITableViewController, we’re going to add a register button, click the register button to go to a UIViewController.

Set the UINavigationController

We set the UINavigationController by clicking Editor in the taskbar.

I don’t know if you noticed, but when we set up the UINavigationController, the arrow that used to point to the ViewController now points to the UINavigationController.

So this arrow is actually “is initial View Controller, “which means that this Controller is the initial Controller of the storyboard. The first thing that’s going to come out of the storyboard is this controller.

So if we don’t set “is Initial View Controller” then we can’t find the initial Controller (which is the root View Controller) and we’ll get a black screen.

After we add the UINavigationController, it will show up on the ViewController, and then we double click on the middle part of the NavigationController of the ViewController to set the Navigation The Item.

Setting UI

This interface is very simple, we only need to add two labels, two textfields, two buttons, about the way to add, and autoLayout to add the way has been described in the iOS development visual programming Xib brief, in fact, is the same. I will not repeat it here.

Click the “Register” button to jump to the page

We drag in a ViewController simulation in our storyboard and click the “Register” button to jump to the page. Here we choose the jump mode of push, in fact, the jump mode can also be used to carry out, please try by yourself.

We create a pair of class files to associate with the ViewController that is dragged into our storyboard in a way that is explained in the Xib brief for iOS Development Visual Programming.

We’ll call it RegisterViewController.

Select the “Register” button and hold down the Control key and drag to the controller. We’re going to see a little button line between the two controllers, and that’s a segue.

To mark this we set the Navigation Item of the RegisterViewController to “register” and set a color for the controller.

This has realized the page jump, but although realized the jump, but what about the value between the pages?

About the value

When you’re segueing, you have to figure out in your class file which two controllers you’re segueing to. We click on the corresponding segue, and then use the identifier under the “Show the Attributes Inspector” TAB to mark the segue.

The storyBoard switches back and forth between view controllers, and the system will automatically do something like this, pass values between pages, and you have to write in that method.

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(nullable id)sender NS_AVAILABLE_IOS(5_0);
Copy the code

In this case, we’re going to simulate passing the word entered in the username UITextField in the ViewController to a Label in the RegisterViewController.

First, drag a Label in the RegisterViewController, set the color, and drag it as a property in the.m file. Also create an NSString property in the.h file. Drag the “username” textField as a property in the ViewController class file as well.

In RegisterViewController. H:

@property (nonatomic, strong) NSString *string;

Since we are passing text to RegisterViewController in ViewController, we implement the above method in ViewController.

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{// get the identfier of the wireif ([segue.identifier isEqualToString:@"registerPush"]) {/ / get the source controller ViewController * VC = segue in sourceViewController; / / to get the target controller RegisterViewController * registerVC = segue destinationViewController; // Pass value registervc. string = vc.usernamETF.text; }}Copy the code

The effect is as follows:

Click “login” button to jump to the page

Again we drag in a ViewController in our storyboard, but this time to show cell support in our storyboard, we drag in a UITableViewController, and create a class file, and associate it in the same way.

**** Note: at this point, I want to say a few words about the use of storyboard files ****. We can see from the example we demonstrated that storyboards have a one-to-many relationship with viewControllers. So how do we find a particular ViewController from a storyboard? We use the"show the identity inspector"The storyboard of Identity under the tag marks the distinction. [storyboardID](http://upload-images.jianshu.io/upload_images/1230517-d8b6EE666C08992F.png) so we can access it in the class file using the following code.Copy the code

Here we use the storyboard did to find the VC, we use code to demonstrate the interface jump.

First, we drag the trigger event of the login button into a method. Then write the following code in this method

- (IBAction)LoginAction:(UIButton *)sender {
    
    LoginTableViewController *loginVC = [[UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]] instantiateViewControllerWithIdentifier:@"loginPush"];
    [self.navigationController pushViewController:loginVC animated:YES];
    
}
Copy the code

So I can jump right into LoginTableViewController.

Set the cell in the LoginTableViewController

We can set the cell directly in the LoginTableViewController.

Now let’s say we want to display the following interface in tableVC:

We just drag a Label and UIImageView into tableVC’s Prototype cells and add the constraint.

Then create a pair of class files that inherit from the UITableViewCell, associate them with Prototype cells, and set the cell’s reuse identifier.

Storyboard set identifier:

Associate label and imageView as properties in the cell’s class file

Finally set tableVC can be, about the tableVC setting is not repeated,tableView thought please move, iOS development visual programming Xib brief.

For the record, we no longer need to register cells in the reuse pool or set reuse identifiers, because we’ve already done that in our storyboard.

Click cell to jump to the details page

Finally, we are making a jump. Click the cell to jump to the details page and use the storyboard instead of using it

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

Similarly drag a VC controller to the storyboard and create the class file DetailViewController associated with the storyboard file. Declare an NSString property in the.h file of the class.

@property(nonatomic,strong)NSString *string;

Hold down Control in the storyboard to drag the cell to the DetailViewController and set the jump. Here I’m still going to push because I’m going to use the text on the nameLab in the cell as the Naviga for the DetailViewController tion Items.

For passing values, we use the following method to pass values in tableVC

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { // Get the new view controller using [segue DestinationViewController]. / / Pass the selected object to the new view controller. / / NSIndexPath click first gets the current path *indexPath = [self.tableView indexPathForCell:sender]; / / to get the target controller DetailViewController * detailVC = segue destinationViewController; // Detailvc.string = _nameArray[indexPath. Row]; }Copy the code

Set this in DetailViewController:

self.title = _string;

Now we have finished clicking the cell to jump to the page.

**** note: note: **** although we did not use - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath) *)indexPath; This method, however, is still used when the program executes a jump.Copy the code

We can do this through the

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

Method of printing a sentence of the way to test, here will no longer operate, readers interested in their own experiments.

End

The above is a brief description of the use of storyboard in visual programming. Due to the author’s limited skills, it is inevitable that there will be problems. If you have any doubts or mistakes, please contact me and correct them. In addition, please keep the link for reprint.