iOS Programming UIStoryboard 故事板

iOS Programming UIStoryboard

In this chapter, you will use a storyboard instead. Storyboards are a feature of iOS that allows you to instantiate and lay out all of your view controllers in one XIB-like file. Additionally, you can wire up view controllers in the storyboard to dictate how they get presented to the user.

在本章中，你將使用一個storyboard。Storyboards 是iOS 的一個特點容許你初始化和放置全部你的view controllers 在一個XIB-like文件中。另外你能夠裝配你的view controller 在你的storyboard 來顯示他們怎樣顯示給用戶的。

The purpose of a storyboard is to minimize some of the simple code a programmer has to write to create and set up view controllers and the interactions between them.

一個storyboard 的目的是縮小一些simple code一個程序員必須建立和設置view controller和在他們之間的交流。

1 Creating a Storyboard

Create a new iOS Empty Application and name it Colorboard

Then, select New File... from the New menu. Select User Interface from the iOS section. Then, select the Storyboard template and click Next

A storyboard is a lot like a XIB, except it allows you to lay out the relationships between view controllers in addition to laying out their interfaces.

一個storyboard 很是像一個XIB除了他容許你lay out view controller 之間的關係除了放置他們的interfaces以外。

The Colorboard application will have a total of five view controllers, including a UINavigationController and a UITableViewController.

Using a storyboard, you can set up the relationships shown in Figure 28.3 without writing any code.

To get started, open the utility area and the Object Library. Drag a Navigation Controller onto the canvas. The

canvas will now look like

In addition to the UINavigationController object you asked for, the storyboard took the liberty of creating three other objects: the view of the navigation controller, a UITableViewController, and the view of the UITableViewController. In addition, the UITableViewController has been made the root view controller of the navigation controller.

除了你要求的UINavigationControler 對象，storyboard 還自由的建立了其餘三個對象：view of the navigation controller,a UITableViewController ,and  view of the UITableViewController.另外，UITableViewController 還被設置爲navigation controller 的root view controller.

The two view controller instances are represented by the black bars on the canvas, and their views are shown above them. You configure the view the same as you would in a normal XIB file. To configure the view controller itself, you select the black bar.

兩個view controller 實例由在canvas 上的black bars 表明，他們的views 在他們上面顯示。你配置view 與普通的XIB file 文件同樣。爲了配置view controller itself,你要選擇black bar.

Before you go any further, you need to tell your application about this storyboard file. Select the Colorboard project from the project navigator. Then, select the Colorboard target and the General tab. Locate the Main Interface field and enter Colorboard (Figure 28.5) or select Colorboard.storyboard from the dropdown.

在你繼續以前，你須要告訴application 關於你的storyboard file.選擇哪一個color board 工程，選擇cjolorbard target 和general tab.

定位到main interface

 

When an application has a main storyboard file, it will automatically load that storyboard when the application launches. In addition to loading the storyboard and its view controllers, it will also create a window and set the initial view controller of the storyboard as the root view controller of the window.

當一個application 有一個main storyboard file ,它將自動的加載storyboard 當啓動應用時。除了加載storyboard 和它的view controllers ,它仍然建立了一個windows 和設置storyboard 的initial view controller 做爲這個window的root view controller.

You can tell which view controller is the initial view controller by looking at the canvas in the storyboard file – the initial view controller has an arrow that fades in as it points to it.

你能夠辨別哪一個view controller 是initial view controller 經過查看在storyboard file的 canvas —the  initial view controller 有一個箭頭 ，指向它。

Since a storyboard file supplies the window for an application, the application delegate does not need to create a window.

由於storyboard file 提供了一個應用的窗口，所以，application delegate 不須要建立一個window。

In BNRAppDelegate.m, remove the code from application:didFinishLaunchingWithOptions: that creates the window.

- (BOOL)application:(UIApplication *)application

didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

return YES;

}

2 UITableViewControllers in Storyboards

在Storyboards 裏的UITableViewControllers

When using a UITableViewController, you typically implement the appropriate data source methods to return the content of each cell. This makes sense when you have dynamic content – like a list of items that may change – but it is a lot of work when you have a table whose content never changes. Storyboards allow you to add static content to a table view without having to implement the data source methods.

當你用UITableViewController,你通常的實現恰當的data source methods 返回每一個cell 的內容。這變得頗有意義當你有動態的內容時，可是有許多工做 你有一個table 它的內容歷來都不變。 storyboards 容許你添加Static  content 到一個table view controller 不去實現data  source methods.

To see how easy this is, you are going to add a UITableViewController to the storyboard and give it static content.

If there is already a second view controller in your Storyboard next to the navigation controller, select its black bar (the representation of the view controller itself), and delete it.

Next, drag a UITableViewController from the library onto the canvas. To set this table view controller as the root view controller of the navigation controller, Control-drag from the navigation controller's view to the table view controller's view. Let go, and from the black panel that appears, select root view (Figure 28.7).

拖動一個UITableViewController到canvas 上 。control -drag 從navigation controller 's view 到table view controller的view。顯示black panel ,選擇root view .

Remember that despite dragging between views, these properties are being set on the view controllers themselves.

記住儘管是在兩個view 中的dragging ,這些屬性是在兩個view controller 本身上設置的。

In the middle of this arrow is an icon that represents the type of relationship between the two view controllers

中間的arrow 是一個icon表明了連個view controller 關係的類型。

Next, select the Table View of the UITableViewController. In the attributes inspector, change the Content pop-up menu to Static Cells

緊接着，選擇UITableViewController的Table view。在attributes inspector ,改變content pop-up menu 爲static cells.

Back on the canvas, the selected cell will now say Title. Double-click on the text and change it to Red.

Repeat the same steps for the second cell, but have the title read Green. Let's get rid of the third cell; select it and press Delete.

Finally, select the navigation bar – the area above the first cell. This is present because the table view controller is embedded in a navigation controller. In the Attributes Inspector, change its title to Colors.

3 Segues

Most iOS applications have a number of view controllers that users navigate between. Storyboards allow you to set up these interactions as segues without having to write code.

大部分iOS 應用有許多view controller 用戶在他們之間導航。storyboards 容許你設置這些interactions 爲segues 不用寫任何代碼。

A segue moves another view controller's view onto the screen when triggered and is represented by an instance of UIStoryboardSegue. Each segue has a style, an action item, and an identifier.

一個segue 當觸發時會移動到另外一個view controller 's view，別一個UIStoryboardSegue 實例。每一個segue 有一個style,一個action item和一個identifier.

The style of a segue determines how the view controller will be presented, such as pushed onto the stack or presented modally. The action item is the view object in the storyboard file that triggers the segue, like a button, a bar button item, or another UIControl. The identifier is used to programmatically access the segue. This is useful when you want to trigger a segue that does not come from an action item, like a shake or some other interface element that cannot be set up in the storyboard file.

一個segue 的style 決定了view controller 將如何被展示，例如pushed onto 到stack或者presented modally.The action  item 是view object 在storyboard file中觸發了segue,好比一個button，a bar button item ,或者是UIControl.The Identifier在經過編程獲取segue時頗有用。當你想觸發一個segue 不是經過一個action item ,像shake 或者其餘的interface element 不能在storyboard file 中設置。

A push segue pushes a view controller onto the stack of a navigation controller.

一個push segue  把一個view controller 推送到navigation controller 的棧上。

You will need to set up two more view controllers in your storyboard, one whose view's background is red, and the other, green. The segues will be between the table view controller and these two new view controllers. The action items will be the table view's cells; tapping a cell will push the appropriate view controller onto the navigation controller's stack.

segues 是將在table view controller 和這兩個 新的view controller 之間。action items 將是table view 's cells.點擊一個cell將推送恰當的view controller 到navigation controller的stack上。

Drag two UIViewController objects onto the canvas. Select the View of one of the view controllers and, in the attributes inspector, change its background color to red. Do the same for the other view controller's view to set its background color to green.

Next, select the cell titled Red. Control-drag to the view controller whose view has the red background. A black panel titled Storyboard Segues will appear. This panel lists the possible styles for this segue. Select Push.

Then, select the Green cell and Control-drag to the other view controller. Your canvas should look like

Note that push segues only work if the origin of the segue is inside a navigation controller. Fortunately, the origin of these segues is the table view controller, which meets this requirement.

注意到push segues 只有segue 的祖先是在navigation controller 裏面才工做。幸運的是，這些segues的origin是table view controller ，知足這些要求。  ？？？

Now let's look at another style of segue – a Modal segue. Drag a new UIViewController onto the canvas. Set its view's background color to blue. You want this segue's action item to be a bar button item on the table view controller's navigation item.

如今看另外一種類型的segue-Modal segue.拖動一個新的UIViewController到canvas 上。設置view 的background color 爲blue。你想這個segue's action item 是在table view controller 's navigation item 的一個bar button item .

Drag a Bar Button Item from the library onto the right corner of the navigation bar at the top of the table view controller's view.

In the attributes inspector, change its Identifier to Add. Then, Control-drag from this bar button item to the view controller you just dropped on the canvas. Select Modal from the black panel.

To fix this, drag a UINavigationController onto the canvas and delete the UITableViewController

爲了修復這個，拖動一個UINavigationController ，刪除UITableViewController。

Delete the existing modal segue, and instead have the + item trigger a modal segue to the navigation controller.

刪除應存在的modal segue,取而代之讓+item 觸發一個modal segue

到navigation controller .

Now that the modal view controller is within a navigation controller, it has a navigation bar at its top. Drag a bar button item to the right side of this navigation bar. Within the attributes inspector, change its Identifier to Done.

如今你的modal view controller 在一個navigation controller 內部，它有一個navigation bar 在它的頂部。拖動一個bar button item到navigation bar 的右側。'

You will need to write a method to dismiss the modal view controller and then connect this method to the Done button.

你須要寫一個方法dismiss  這個modal view controller 而後鏈接這個方法到Done button.

To write code for a view controller in a storyboard, you have to create a subclass of UIViewController and specify in the storyboard that the view controller is an instance of your subclass.

爲了爲一個在storyboard 裏的view controller 寫代碼，你必須建立一個UIViewController 的子類，並指明在storyboard 那個view controller 是你子類的一個實例

 

Let's create a new UIViewController subclass to see how this works. Create a new NSObject subclass and name it BNRColorViewController.

In BNRColorViewController.h, change the superclass to be UIViewController.

@interface BNRColorViewController : UIViewController

@end

Then in BNRColorViewController.m, implement a method to dismiss itself.

- (IBAction)dismiss:(id)sender

{
[self.presentingViewController dismissViewControllerAnimated:YES

}

completion:nil];

Open Colorboard.storyboard again. Select the black bar underneath the modally presented (blue) view controller. (This is called the scene dock.) In the identity inspector, change the Class to BNRColorViewController

Now, after making sure you are zoomed in, select the Done button. Control-drag from the button to this view controller icon and let go – when the panel appears, select the dismiss: method

4 Enabling Color Changes

You will now extend the Colorboard application to allow the user to choose a color and save it to a list of favorite colors.

Back in Colorboard.storyboard, add one UITextField, three UILabel objects, and three UISlider objects to the view of BNRColorViewController so it looks like

Let's have the background color of BNRColorViewController's view match the slider values. In BNRColorViewController.m, add outlets to the text field and three sliders in the class extension.

@interface BNRColorViewController ()
@property (nonatomic, weak) IBOutlet UITextField *textField; @property (nonatomic, weak) IBOutlet UISlider *redSlider;

@property (nonatomic, weak) IBOutlet UISlider *greenSlider; @property (nonatomic, weak) IBOutlet UISlider *blueSlider;

@end

@implementation

All three sliders will trigger the same method when their value changes. Implement this method in BNRColorViewController.m.

 

- (IBAction)changeColor:(id)sender

{
float red = self.redSlider.value;
float green = self.greenSlider.value;
float blue = self.blueSlider.value;
UIColor *newColor = [UIColor colorWithRed:red

green:green blue:blue

alpha:1.0]; self.view.backgroundColor = newColor;

}

Now open Colorboard.storyboard and connect the outlets from Color View Controller (the first icon in the scene dock below the BNRColorViewController view) to the text field and three sliders. Then Control-drag from each slider to the Color View Controller and connect each to the changeColor: method.

Build and run the application. Moving the sliders will cause the view's background color to match.

5 Passing Data Around

Prototype cells allow you to configure the various cells you will want to return in the data source methods and assign a reuse identifier to each one.

Prototype cells 容許你配置各類cells你想返回在data source methods 並給每個分配reuse identifier.

Then select the UITableViewCell and set its reuse identifier to UITableViewCell

In order to supply this table view controller with data for its table view, you will need to create a new UITableViewController subclass. Create a new NSObject subclass named BNRPaletteViewController.

In BNRPaletteViewController.h, change the superclass to be UITableViewController.

@interface BNRPaletteViewController : UITableViewController

In BNRPaletteViewController.m, import BNRColorViewController.h and add an NSMutableArray to the class extension.

#import "BNRPaletteViewController.h"

#import "BNRColorViewController.h"

@interface BNRPaletteViewController ()

@property (nonatomic) NSMutableArray *colors;

@end

 

@implementation BNRPaletteViewController
Next, implement viewWillAppear: and the table view data source methods in

BNRPaletteViewController.m.

- (void)viewWillAppear:(BOOL)animated

{
[super viewWillAppear:animated];

[self.tableView reloadData]; }

- (NSInteger)tableView:(UITableView *)tableView

numberOfRowsInSection:(NSInteger)section

{
return [self.colors count];

}

- (UITableViewCell *)tableView:(UITableView *)tableView

cellForRowAtIndexPath:(NSIndexPath *)indexPath

{
UITableViewCell *cell =

[tableView dequeueReusableCellWithIdentifier:@"UITableViewCell" forIndexPath:indexPath];

return cell; }

 

- (UITableViewCell *)tableView:(UITableView *)tableView

cellForRowAtIndexPath:(NSIndexPath *)indexPath

{
UITableViewCell *cell =

[tableView dequeueReusableCellWithIdentifier:@"UITableViewCell" forIndexPath:indexPath];

return cell; }

 

Next, create a new NSObject subclass named BNRColorDescription that will represent a user-defined color.

In BNRColorDescription.h, add properties for a UIColor and a name.

@interface BNRColorDescription : NSObject

@property (nonatomic) UIColor *color;

@property (nonatomic, copy) NSString *name;

@end

Then, in BNRColorDescription.m, override init to set default values for these properties. @implementation BNRColorDescription

- (instancetype)init

{
self = [super init]; if (self) {

_color = [UIColor colorWithRed:0 green:0

blue:1 alpha:1];

_name = @"Blue"; }

return self; }

@end

At the top of BNRPaletteViewController.m, import BNRColorDescription.h. Then override the colors accessor to lazily instantiate the array and add a new BNRColorDescription to the array.

#import "BNRPaletteViewController.h" #import "BNRColorDescription.h"

@implementation BNRPaletteViewController

- (NSMutableArray *)colors

{
if (!_colors) {

_colors = [NSMutableArray array];

BNRColorDescription *cd = [[BNRColorDescription alloc] init];

[_colors addObject:cd]; }

return _colors; }

Also, update the data source method in BNRPaletteViewController.m to display the name of the color

BNRColorDescription *color = self.colors[indexPath.row]; cell.textLabel.text = color.name;

Before we move on, open BNRColorViewController.h and add two new properties: one that determines whether you are editing a new or existing color, and another that indicates which color you are editing. Do not forget to import BNRColorDescription.h at the top.

添加兩個屬性一個決定你是否在編輯一個新的或已經存在的color，另外一個暗示哪一個color 你在編輯。

#import "BNRColorDescription.h"

@interface BNRColorViewController : UIViewController

@property (nonatomic) BOOL existingColor;
@property (nonatomic) BNRColorDescription *colorDescription;

@end

Whenever a segue is triggered on a view controller, it gets sent the message prepareForSegue:sender:.

不管何時segue 被觸發一個view controller，它會發送prepareForSegue:sender:.

This method gives you both the UIStoryboardSegue, which gives you information about which segue is happening, and the sender, which is the object that triggered the segue (a UIBarButtonItem or a UITableViewCell, for example).

這個方法提供了兩個UIStoryboardSegue,提供消息哪一個segue將要發生，和sender，哪一個對象觸發了segue。

The segue gives you three pieces of information to use: the source view controller (where the segue is originating from), the destination view controller (where you are segueing to), and the identifier of the segue. The identifier is how you can differentiate the various segues. Let's give your two segues useful identifiers.

segue提供給你三方面的信息：the source view controller (segue 源於哪裏)，destination view controller (segueing 到哪裏去)，the  identifier of the segue. identifier 是你能怎樣區分不一樣的segues 。

Open Colorboard.storyboard again. Select the modal segue and open its attribute inspector. For the identifier, type in NewColor. Next, select the push segue and give it the identifier ExistingColor.

With your segues identified, you can now pass your color objects around. Open BNRPaletteViewController.m and implement prepareForSegue:sender:.

 

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender

{
if ([segue.identifier isEqualToString:@"NewColor"]) {

// If we are adding a new color, create an instance
// and add it to the colors array
BNRColorDescription *color = [[BNRColorDescription alloc] init]; [self.colors addObject:color];

// Then use the segue to set the color on the view controller UINavigationController *nc =

(UINavigationController *)segue.destinationViewController; BNRColorViewController *mvc =

(BNRColorViewController *)[nc topViewController]; mvc.colorDescription = color;

}
else if ([segue.identifier isEqualToString:@"ExistingColor"]) {

// For the push segue, the sender is the UITableViewCell NSIndexPath *ip = [self.tableView indexPathForCell:sender]; BNRColorDescription *color = self.colors[ip.row];

// Set the color, and also tell the view controller that this // is an existing color
BNRColorViewController *cvc =

(BNRColorViewController *)segue.destinationViewController; cvc.colorDescription = color;
cvc.existingColor = YES;

} }

Open BNRColorViewController.m and override viewWillAppear: to get rid of the Done button if existingColor is YES.

- (void)viewWillAppear:(BOOL)animated

{
[super viewWillAppear:animated];

// Remove the 'Done' button if this is an existing color if (self.existingColor) {

self.navigationItem.rightBarButtonItem = nil; }

}

Then, still in BNRColorViewController.m, override viewDidLoad to set the initial background color, slider values, and color name.

- (void)viewDidLoad

{
[super viewDidLoad];

UIColor *color = self.colorDescription.color;

// Get the RGB values out of the UIColor object float red, green, blue;
[color getRed:&red

green:&green blue:&blue

alpha:nil];

// Set the initial slider values self.redSlider.value = red; self.greenSlider.value = green; self.blueSlider.value = blue;

// Set the background color and text field value self.view.backgroundColor = color; self.textField.text = self.colorDescription.name;

}

Finally, save the values when the view is disappearing.

- (void)viewWillDisappear:(BOOL)animated

{
[super viewWillDisappear:animated];

self.colorDescription.name = self.textField.text;

self.colorDescription.color = self.view.backgroundColor; }

Overall, storyboards make easy code easier and difficult code more difficult.

總之，storyboards 使得容易的代碼更容易，複雜的代碼複雜。