Follow Lesson #1 - Hello World to create a new Xcode project named "Picker" with the template "Single View Application".
Choose options for your new project
Name it as Main.storyboard
Step#1: To design storyboard
Drag 4 "Label", "Picker View" and "Tool Bar" objects as below:
Drag objects into storyboard
Step#2: Change attributes of all objects
Change the text for "Label" and click "Shows Selection Indicator" for "Picker View" as below:
Change attributes for objects
If no click "Shows Selection Indicator" for the "Picker View", no highlighted for the selected row.
Step#3: To declare objects on xxxViewController.h
Declare 2 "Labels" and 1 "Picker View" objects as global variables which is visible on storyboard while 2 "NSMutableArray" which is invisible on storyboard.
declare objects on .h file
Step#4: To code in xxxViewController.m
Step#5: Do connection
Do Connection with Labels and Picker objects
Do connections for dataSource and delegate with Picker View object
When users touch a text field, a text view, or a field in a web view, the system displays a keyboard. You can configure the type of keyboard that is displayed along with several attributes of the keyboard.
Several different keyboard types
Several different keyboards and input methods
The keyboard cannot hide the portion of your view by default that is the focus of editing. In order to hide the keyboard, we need to write coding in .m file. Usually, there are two common ways to hide keyboard:
We're going to focus on the structure of multiview applications and how to swap contents between different content views.
Some common multiview apps:
The application provided by Yahoo which displays a row of buttons, called the "Tab Bar", at the bottom of the screen.
The iPhone application is also an example of a multiview application using a "Navigation Bar".
On iPad, most navigation-based applications, such as Mail, are implemented using a "Split View", where the navigation elements appear on the left side of the screen, and the item you select to view or edit appears on the right.
Tab View
Navigation Bar
Split View
Step#1: To create a new Xcode project
Follow Lesson #1 - Hello World to create a new Xcode project named "ChangeView" with the template "Empty Application".
Choose a template
Choose options for your new project
No storyboard file at the beginning
To compile & run before any coding, one white empty screen will be shown.
This screen should be Window page.
White empty screen
Step#2: To add a new Storyboard
Right click under he Project group "ChangeView" and select "New File ...".
New File...
Select one "Storyboard" template under "User Interface".
Storyboard template
Device Family with iPhone
Name it as Main.storyboard
Step#3: To add a new View Controller
1. Drag a new "View Controller" object onto the storyboard.
2. Drag a "Label", "Text Field" and "Button" objects as well. Also, change the "Background" for the view in green blue. Change the text for "Label" and "Button" as below:
3. Compile & Run and found that empty view is shown. Why?
Empty screen
Since the Main Storyboard is not yet setup properly. 4. Setup "Main Storyboard" with "Main" <Such setup in Xcode4.3 is different from Xcode5.0, more updates will be added later.>
5. Compile & Run and found that empty view is shown again. Why?
Empty screen again
Since some default coding in xxxAppDelegate.m exist and not point to the main storyboard which we create.
Step#4: <xxxAppDelegate.m>
1. Comment the following 2 lines:
2. Compile & Run. The main storyboard can be shown finally:
Page 1 Storyboard
Step#5: Add one more ViewController object
1. Drag one more "View Controller" object.
Add one more ViewController object
2. Drag two "Label" and "Button" objects as well. Also, change the "Background" for the view in yellow. Change the text for "Label" and "Button" as below:
Add new objects to Page 2
Step#6: Setup the connection (i.e. Segue) between the two views
1. Select "View Controller" for Page2. 2. Select "Connection" for Page 2. 3. Drag "Model" for Presenting Segues to the "Go to Page 2" button object and select the only one option "action".
4. Compile & Run and you can one more "line" linkup these 2 view controllers. This line is called "Segue".
Step#7: Coding for each View Controller
Each View Controller should have its own .h and .m classes. Let's start to add new .h and .m classes first.
Repeat the above steps in order to add .h and .m classes for Page 2.
Click "Identify" at the right hand side and then select the Class as Page1ViewController for Page 1 while Page 2ViewController for Page 2.
Step#8: Code programs for each View Controller
<Step #1 - .h file>
1. Add the following code into Page1ViewController.h to declare an UITextField object.
Page1ViewController.h
<Step #2 - .m file>
1. Synthesize the inputText UITextField object in Page1ViewController.m.
@synthesize - creates getter and setter methods for a property
Page1ViewController.m
<Step #3 - Storyboard>
1. Click the View Controller for Page 1 at the bottom and then link the "inputText" object to the text field in storyboard for Page 1.
Storyboard for Page1
<Step #1 - .h file>
<Step #1 - .h file>
1. Add the following code into Page2ViewController.h to declare an UILabel object and a NSString object which will not be shown in storyboard.
Page2ViewController.h
<Step #2 - .m file>
1. Synthesize the outputText UILabel object and the dataString NSString object in Page2ViewController.m.
Page2ViewController.m
<Step #3 - Storyboard>
1. Click the View Controller for Page 2 at the bottom and then link the "outputText" object to the label in storyboard for Page 2.
Storyboard for Page2
Step#9: Setup Segues between 2 View Controller to make connection
1. In order to pass information from one view controller to another using the UIStoryboardSegue object in the root View Controller (i.e. Page1ViewController).
Modal segue
Storyboard with Segue
2. You can change the Identifier and Style (currently as Model) as you like.
Step#11: Set the "Back to Page 1" button in Page 2
We cannot link the "Back to Page 1" button in Page 2 directly with Page1 View Controller since the Page 2 View will be covered in front of Page 1 again. If we swap these 2 pages again and again, the memory will be consumed. Thus, we need to call one method "dismissViewControllerAnimated" method in Page2ViewController.m.
Page2ViewController.m
dismissViewControllerAnimated:completion method from UIViewController Class:
Q: Why the keyboard still be displayed after click the "Go to Page 2" button? How to solve it? Explanation: When users touch a text field, a text view, or a field in a web view, the system displays a keyboard. You can configure the type of keyboard that is displayed along with several attributes of the keyboard. You also have to manage the keyboard when the editing session begins and ends. Because the keyboard could hide the portion of your view that is the focus of editing, this management might include adjusting the user interface to raise the area of focus so that is visible above the keyboard.
