Storyboard navigation secrets for iOS (1)

Source: Internet
Author: User

The software version used in this article:

IOS:6.1

Xcode:4.6

Storyboard is supported only by xcode4.2 to make the design view easier. Although it is okay to drag and drop files with the previous nib (XIB), it is necessary to switch back and forth between various files, which is easy for beginners to crash. Storyboard has improved a lot in this regard. Basically, everything can be done on the storyboard interface, especially the view navigation, without writing a lineCodeYou can do this. Although storyboard is easier to use than XIB in view navigation, it is still difficult for beginners.

This article introduces a simple navigation method, that is, clicking a button of the current view will jump to another view and pass data to this view.

First, create a "singleview application" project in xcode. Select "use storyboard" and "use automatic reference counting" to use arc, a storyboard is automatically created. The project name is storyboarddemo1.

Next, create an objective-cClass named myviewcontroller. Note that superclass is uiviewcontroller, and do not select the two check boxes below, because XIB files are not required here. If you follow these steps, the directory structure 1 of the storyboarddemo1 project is shown.

Figure 1

Next, open the mainstoryboard. storyboard file and you will see a default view on the interface. This is the root view, that isProgramThe view is displayed first. Because the purpose of this article is to implement navigation, IOS requires that all views involved in navigation must be controlled by uinavigationcontroller. Therefore, you also need to add a uinavigationcontroller to the storyboard, and the entry of the program is changed from view to uinavigationcontroller. There are many ways to do this. First, let's look at a Super invincible simple method, that is, to select the default view of the storyboard, then, click the "Editor"> "embed in"> "navigation controller" menu item, xcode will automatically generate a uinavigationcontroller on the storyboard, and change the startup portal. The effect of the final storyboard is 2.

Figure 2

In addition to this simple method, you can drag a uinavigationcontroller control directly from the control panel. However, by default, this control also includes a uitableviewcontroller. This is not required, so you can delete uitableviewcontroller. Select the uinavigationcontroller In the storyboard, press Ctrl, and drag the mouse to the default view. A menu is displayed, and the "Root View Controller" at the bottom is selected ", the final effect is exactly the same as that shown in Figure 2. Of course, to show that you have a geek fan, you can also put a uinavigationcontroller control on the storyboard and enter the storyboardSource codeFile (XML format file), find the declaration code of the default view, in fact, it is also very good to find, as long as the default view navigation bar title is set, a line of comment will appear at the top of the Code, 3. We are looking for the ID attribute value of the <viewcontroller> label. This attribute value uniquely identifies the default view, which is unique in the current storyboard configuration file.

Figure 3

Next, find the declaration code of the navigation bar (uinavigationcontrolle). You can also find the automatically generated comments, as shown in figure 4.

Figure 4

We only care about the destination attribute value of the <connections> label in the <navigationcontroller> label. The <connections> label indicates which view the current navigation controller is directly connected to, that is, the first view in the navigation controller. You only need to change the attribute value to the ID attribute value of the default view. Of course, this property value defaults to the ID property value of uitableviewcontroller.

Next, double-click the navigation bar on the default view, enter the title text "Homepage", and place a button on the default view. The title is "show New View ".

Next we will place another viewcontroller on the storyboard, and place a uitextfield control on the view (any controls can be placed, which is just for convenience of demonstration ),

Although multiple views are placed in one storyboard, different views use different source code files. A myviewcontroller class has been created before, so this new view uses the myviewcontroller class. Then you need to associate the view with the myviewcontroller class. Select viewcontroller and select the 3rd buttons on the right panel to set myviewcontroller, as shown in Figure 5.

Figure 5

Next, set outlet (textfield used to reference the control) for uitextfield in myviewcontroller. h file ).

Select the button on the default view, press Ctrl, and drag the mouse to the new view (the view with the uitextfield control on it). A menu is displayed, and "push" is selected ", other options cannot be used in this navigation mode.

Up to now, there has been a navigation controller and two view controllers on the storyboard, as shown in connection relationship 6.

Figure 6

Now you can run the program, and click "show New View" to switch to the new view. A navigation button is displayed in the upper left corner of the new view, click to return to the "Homepage" view.

Another question is, how can we directly transmit data in two views? Of course, you can use global variables or static variables, but these methods are not appropriate (it is not a good thing to use more global and static variables ).

Here we introduce a method to pass data through the prepareforsegue method. Because the source code file of the default view is viewcontroller. M, prepareforsegue is implemented in this file: method, the Code is as follows:

-( void ) prepareforsegue :( uistoryboardsegue *) segue sender :(  id  ) sender { ///   determine whether the started target view is myviewcontroller   If  ([[segue destinationviewcontroller]  class ] = [myviewcontroller  class  ]) {myviewcontroller  * myview =  [segue destinationviewcontroller]; [myview settext:   @ "  Li Ning  "  ] ;}}  

When you navigate to myviewcontroller (you have created a myviewcontroller object but have not called the myviewcontroller. viewdidload method), the system will call the prepareforsegue: method. You can use the [seguedestinationviewcontroller] method to obtain the object of the target view, and call the method in the view object to set any parameter values. Here, the settext method is implemented in myviewcontroller. m to set the mtext variable. Then, in the myviewcontroller. viewdidload method, the mtext variable value is used to set the display text of the uitextfield control.

In addition to judging the target view by using the [seguedestinationviewcontroller] method, you can also use the following code.

-(Void) Prepareforsegue :( uistoryboardsegue *) segue sender :(ID) Sender {If([Segue. identifier isinclutostring:@"Myview"]) {Myviewcontroller* Myview =[Segue destinationviewcontroller]; [myview settext:@"Li Ning"] ;}}

Here, segue. identifier indicates the ID of the navigation connection, that is, the value of the identifier text box on the right after you click the circle in the middle of the New View and the default view in figure 6, as shown in 7.

Figure 7

Run the program now. When you navigate to the new view, the text in the uitextfield control will become "Li Ning.

Source code download

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.