Storyboard的简单使用

Storyboard的简单使用之前做的例子，我们经常会用到.xib文件，在其中我们可以进行界面的设计。不过如果想切换视图，我们就得自己写很多代码。自从苹果推出了Storyboard，我们可以在一个编辑区域设计多个视图，并通过可视化的方法进行各个视图之间的切换。如下图：上图中有两种箭头：左边的箭头表示程序刚开始运行时加载的控制器；右边的称为Segue，这个表示视图之间的切换，或者表示连接NavigationController的RootViewController。Storyboard功能强大，通过它不仅可以单独设计每一个视图，还能很简单地实现各个视图之间的切换。接下来的例子主要显示Storyboard的功能，顺便用Storyboard实现了静态表格等功能。为了显示Storyboard的功能，我们从EmptyApplication开始我们的例子。1、运行Xcode4.2，新建一个EmptyApplication，名称为StoryboardTest：2、打开AppDelegate.m，找到didFinishLaunchingWithOptions方法，删除其中代码，使得只有returnYES;语句。3、创建一个Storyboard：在菜单栏依次选择File—New—NewFile，在弹出的窗口，左边选择iOS组中的UserInterface，右边选择Storyboard：之后单击Next，选择DeviceFamily为iPhone，单击Next，输入名称MainStoryboard，并设好Group：单击Create，这样就创建了一个Storyboard。4、配置程序，使得从MainStoryboard启动：先单击左边带蓝色图标的StoryboardTest，然后选择Summary，接下来在MainStoryboard中选择MainStoryboard：这样，当运行程序时，就从MainStoryboard加载内容了。5、单击MainStoryboard.storyboard，会发现编辑区域是空的。拖一个NavigationController到编辑区域：6、选中右边的ViewController，然后按Delete键删除它。之后拖一个TableViewController到编辑区域：7、我们将在这个TableViewController中创建静态表格，不过先要将其设置为左边NavigationController的RootController：选中NavigationController，按住Control键，向TableViewController拉线：松开鼠标后，在弹出菜单选择Relationship-rootViewController：之后，两个框之间会出现一个连接线，这个就可以称作是Segue。8、选中TableViewController中的TableView，之后打开AttributeInspector，设置其Content属性为StaticCells：这样你会发现TableView中出现了三行Cell。在上图你可以设置很多熟悉，比如Style、Section数量等。9、设置行数：选中TableViewSection，在AttributeInspector中设置其行数为2：然后选中每一行，设置其Style为Basic：设置第一行中Label的值为：DateandTime，第二行中的Label为List；之后选中下方的NavigationItem，在AttributeInspector设置Title为RootView，BackButton为Root：10、我们实现单击表格中的DateandTime这一行实现页面转换，在新页面显示切换时的时间。在菜单栏依次选择File—New—NewFile，在弹出的窗口左边选择iOS中的CocoaTouch，右边选择UIViewControllersubclass：单击Next，输入名称DateAndTimeViewController，但是不要选XIB：之后，选好位置和Group，完成创建。11、再次打开MainStoryboard.storyboard，拖一个ViewController到编辑区域，然后选中这个ViewController，打开IdentityInspector，设置class属性为DateAndTimeViewController：这样，我们就可以向DateAndTimeViewController创建映射了。12、向新拖入的ViewController添加控件，如下图：然后将显示为Label的两个标签向DateAndTimeViewController.h中创建映射，名称分别是dateLabel、timeLabel：13、打开DateAndTimeViewController.m，在ViewDidUnload方法之后添加代码：//每次切换到这个试图，显示切换时的日期和时间-(void)viewWillAppear:(BOOL)animated{NSDate*now=[NSDatedate];dateLabel.text=[NSDateFormatterlocalizedStringFromDate:nowdateStyle:NSDateFormatterLongStyletimeStyle:NSDateFormatterNoStyle];timeLabel.text=[NSDateFormatterlocalizedStringFromDate:nowdateStyle:NSDateFormatterNoStyletimeStyle:NSDateFormatterLongStyle];}14、打开MainStoryboard.storyboard，选中表格的行DateandTime，按住Contrl，向ViewController拉线：在弹出的菜单选择Push：这样，RootViewController与DateAndTimeViewController之间就出现了箭头，运行时当点击表格中的那一行，视图就会切换到DateAndTimeViewController。15、选中DateAndTimeViewController中的NavigationItem，在AttributeInspector中设置其Title为DateandTime：16、运行一下，首先程序将加载静态表格，表格中有两行：DateandTime以及List，单击DateandTime，视图切换到相应视图，单击左上角的Root按钮，视图回到RootView。每次进入DateandTime视图，显示的时间都会不同：17、接下来，我们将要实现，单击List行，显示一个表格，并且单击表格中的某一行，我们可以在新弹出的视图中编辑该行内容。首先创建ViewController文件：ListViewController、ListEditViewController，前者继承UITableViewController，后者继承UIViewController，参照第10步。都不要创建XIB文件。然后打开MainStoryboard.storyboard，拖一个TableViewController和ViewController到编辑区域，调整所有视图在编辑区域的位置，如下图：设置新拖入的TableViewController和ViewController的class属性分别是ListViewController和ListEditViewController，参考第11步。18、参照第14步，从RootViewController中的List那一行向ListViewController拉线，并在弹出菜单也选择Push。然后选中ListViewController的NavigationItem，设置Title及BackButton都为List，可以参照第9步。19、向ListViewController中的表格区域拖入一个TableViewCell，这样其中就有两个Cell了。设置第一个Cell的Identifier属性为GreenIdentifier。向第一个Cell中拖入一个Label，设置其字体颜色为绿色。同样对第二个Cell进行设置，Identifier属性为RedIdentifier，往其中拖入Label，设置字体颜色为红色。两个Label的Tag属性都设为1。20、打开ListViewController.m，向其中添加代码：20.1在#import的下一行添加代码：@interfaceListViewController()@property(strong,nonatomic)NSMutableArray*listArray;@property(copy,nonatomic)NSDictionary*editedSelection;@end20.2在@implementation之后添加代码：@synthesizelistArray;@synthesizeeditedSelection;20.3找到viewDidLoad方法，向其中添加代码：-(void)viewDidLoad{[superviewDidLoad];NSMutableArray*array=[[NSMutableArrayalloc]initWithObjects:@Horse,@Sheep,@Pig,@Dog,@Cat,@Chicken,@Duck,@Goose,@Tree,@Flower,@Grass,@Fence,@House,@Table,@Chair,@Book,@Swing,nil];self.listArray=array;}20.4找到numberOfSectionsInTableView方法，使其返回1，并删掉#warning。20.5找到numberOfRowsInSection方法，删掉#warning，使其返回[listArraycount]：-(NSInteger)tableView:(UITableView*)tableViewnumberOfRowsInSection:(NSInteger)section{//Returnthenumberofrowsinthesection.return[listArraycount];}20.6找到cellForRowAtIndexPath方法，修改其中代码：-(UITableViewCell*)tableView:(UITableView*)tableViewcellForRowAtIndexPath:(NSIndexPath*)indexPath{NSUIntegerrow=[indexPathrow];NSString*identifier=nil;if(row%2==0){identifier=@GreenIdentifier;}elseidentifier=@RedIdentifier;UITableViewCell*cell=[tableViewdequeueReusableCellWithIdentifier:identifier];UILabel*cellLabel=(UILabel*)[cellviewWithTag:1];cellLabel.text=[listArrayobjectAtIndex:row];returncell;}21、运行一下，当单击List行时，页面切换到我们List视图：22、下面实现单击List表格中的某一行，视图切换，并且视图中的内容与之前选中的行相关，然后可以对其进行编辑，返回后，原来的数据也会发生改变。打开MainStoryboard.storyboard，仿照第14步，从ListViewController中的两行向ListEditViewController拉线，在弹出菜单选择Push。这样ListEditViewController视图中就出现了NavigationItem，选中它，设置Tit