注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

熊猫正正的博客

熊猫正正的天空

 
 
 

日志

 
 

IOS开发学习笔记(六)——多视图应用程序之StoryBoard实践  

2014-01-09 10:57:14|  分类: ios开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

StoryBoard是iOS开发中重要的角色,可以实现可视化的程序页面切换逻辑控制。下面我们通过简单的例子来看看StoryBoard的使用方法。


  1. 我们新建一个SingleViewApplication,注意选择StoryBoard选项;
  2. 删除自动生成的Controller头文件和.m文件;
  3. 在MainStoryboard.storyboard中,删除默认生成的View Controller;
  4. 新建一个Table View Controller作为程序入口;
  5. 新建两个View Controller组件作为后续的界面;
  6. 然后对入口的Table View Controller,选择Editor->Embed in->Navigation Controller菜单,添加一个Nav Controller;
  7. 在每个添加的ViewController组件中添加组件,并且通过“control+拖拽”的形式拖到另一个Controller上,完成点击按钮导航到下一个界面的操作;
  8. 对于不需要添加到导航视图的内容直接通过按钮上Control+鼠标拖拽的方式完成窗口切换逻辑;
  9. 设置一些必要的控件属性:设置导航标签、设置按钮文字等,同时将一些封面图片拷贝到Supporting Files目录;
  10. 操作完成的MainStoryboard是这样子的:


  11. 我们如果这时候run发现是不能完成导航的,必须在AppDelegate.m中添加
    1. @synthesize window;  

  12. 我们接着完善,我们新建一个用来传递数据的类:
    头文件:
    1. #import <Foundation/Foundation.h>  
    2.   
    3. @interface Novel : NSObject  
    4.   
    5. @property(nonatomic, strong) NSString* name;  
    6. @property(nonatomic, strong) NSString* cover;  
    7. @property(nonatomic, strong) NSString* content;  
    8.   
    9. @end  

    .m文件:
    1. #import "Novel.h"  
    2.   
    3. @implementation Novel  
    4.   
    5. @synthesize name, cover, content;  
    6.   
    7. @end  

  13. 接下来我们需要创建几个ViewController,新建两个UIViewController的子类,和一个UITabelViewController的子类,分别对应我们的列表视图、封面视图和内容视图,注意不能选择"With XIB for user interface"选项;
  14. 下面我们要做的是界面(视图,View)和我们刚才创建的类文件(控制器,Controller)的关联。我们回到Storyboard,点击需要设置的View例如第一个列表,选择右侧的Identity inspector,在Class中选择我们的UITableViewController的子类:


  15. 接着将剩下来的两个界面同样做好关联;
  16. NovelsTableViewController需要使用Novel作为传递参数,并且需要传递到Cover页面,所以我们需要import头文件并定义变量:
    1. #import <UIKit/UIKit.h>  
    2.   
    3. #import "Novel.h"  
    4. #import "CoverViewController.h"  
    5.   
    6. @interface NovelsTableViewController : UITableViewController  
    7.   
    8. // 定义小说列表  
    9. @property (nonatomic, strong) NSMutableArray *novels;  
    10. // 定义当前小说  
    11. @property (nonatomic, strong) Novel *curNovel;  
    12.   
    13. @end  

    .m文件的内容是:
    1. -(void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {  
    2.     // 页面切换,需要保证storyboard中的这个跳转的storyboard segue是showCover  
    3.     if ([segue.identifier isEqualToString:@"showCover"] ) {  
    4.         CoverViewController *cover = [segue destinationViewController];  
    5.         NSIndexPath *path = [self.tableView indexPathForSelectedRow];  
    6.         Novel *novel = [novels objectAtIndex:[path row]];  
    7.         [cover setCurNovel: novel];  
    8.     }      
    9. }  
    10.   
    11. - (id)initWithStyle:(UITableViewStyle)style  
    12. {  
    13.     self = [super initWithStyle:style];  
    14.     if (self) {  
    15.         // Custom initialization  
    16.     }  
    17.     return self;  
    18. }  
    19.   
    20. - (void)viewDidLoad  
    21. {  
    22.     [super viewDidLoad];  
    23.   
    24.     // 初始化小说列表  
    25.     novels = [[NSMutableArray alloc] init];  
    26.       
    27.     Novel *novel = [[Novel alloc] init];  
    28.     [novel setName: @"Fifty shades Freed"];  
    29.     [novel setCover: @"fifty_shades_freed"];  
    30.     [novel setContent: @"NO 1. 《Fifty shades Freed》by E L James"];  
    31.     [novels addObject: novel];  
    32.       
    33.     novel = [[Novel alloc] init];  
    34.     [novel setName: @"Gone Girl"];  
    35.     [novel setCover: @"gone_girl"];  
    36.     [novel setContent: @"NO 2. 《Gone Girl》 by Gillian Flynn"];  
    37.     [novels addObject: novel];  
    38.       
    39.     novel = [[Novel alloc] init];  
    40.     [novel setName: @"Fifty Shades Trilogy"];  
    41.     [novel setCover: @"fifty_shades_trilogy"];  
    42.     [novel setContent: @"NO 3.《Fifty Shades Trilogy》:Fifty Shades of Grey, Fifty Shades Darker, Fifty Shades Freed 3-volume by E.L. James"];  
    43.     [novels addObject: novel];  
    44.       
    45.     novel = [[Novel alloc] init];  
    46.     [novel setName: @"Bared to You"];  
    47.     [novel setCover: @"bared_to_you"];  
    48.     [novel setContent: @"NO 4.《Bared to You》by Sylvia Day"];  
    49.     [novels addObject: novel];  
    50.       
    51.     novel = [[Novel alloc] init];  
    52.     [novel setName: @"No Easy Day"];  
    53.     [novel setCover: @"no_easy_day"];  
    54.     [novel setContent: @"NO 5. 《No Easy Day》by Mark Owen"];  
    55.     [novels addObject: novel];  
    56.       
    57.       
    58.       
    59.     // Uncomment the following line to preserve selection between presentations.  
    60.     // self.clearsSelectionOnViewWillAppear = NO;  
    61.    
    62.     // Uncomment the following line to display an Edit button in the navigation bar for this view controller.  
    63.     // self.navigationItem.rightBarButtonItem = self.editButtonItem;  
    64. }  
    65.   
    66. - (void)didReceiveMemoryWarning  
    67. {  
    68.     [super didReceiveMemoryWarning];  
    69.     // Dispose of any resources that can be recreated.  
    70. }  
    71.   
    72. #pragma mark - Table view data source  
    73.   
    74. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView  
    75. {  
    76.     // 返回一个列表区域  
    77.     return 1;  
    78. }  
    79.   
    80. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section  
    81. {  
    82.     // 返回列表数目  
    83.     return [novels count];  
    84. }  
    85.   
    86. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath  
    87. {  
    88.     // 返回列表显示内容  
    89.     static NSString *CellIdentifier = @"NovelCell";  
    90.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];  
    91.       
    92.     if (cell == nil) {  
    93.         cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];  
    94.     }  
    95.       
    96.     curNovel = [novels objectAtIndex: [indexPath row]];  
    97.     [[cell textLabel] setText: [curNovel name]];  
    98.       
    99.     return cell;  
    100. }  


  17. 接着我们在Cover中获取内容并且显示:
    头文件:
    1. #import <UIKit/UIKit.h>  
    2.   
    3. #import "Novel.h"  
    4. #import "ContentViewController.h"  
    5.   
    6. @interface CoverViewController : UIViewController  
    7.   
    8. @property (strong, nonatomic) IBOutlet UIImageView *imageViewCover;  
    9.   
    10. @property (nonatomic, strong) Novel *curNovel;  
    11.   
    12. @end  


    .m文件:

    1. #import "CoverViewController.h"  
    2.   
    3. @interface CoverViewController ()  
    4.   
    5. @end  
    6.   
    7. @implementation CoverViewController  
    8.   
    9. @synthesize imageViewCover;  
    10. @synthesize curNovel;  
    11.   
    12. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  
    13. {  
    14.     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
    15.     if (self) {  
    16.         // Custom initialization  
    17.     }  
    18.     return self;  
    19. }  
    20.   
    21. - (void)viewDidLoad  
    22. {  
    23.     [super viewDidLoad];  
    24.       
    25.     // 设置图片和标题  
    26.     UIImage *image = [UIImage imageNamed:[curNovel cover]];  
    27.     [imageViewCover setImage:image];  
    28.     [self setTitle:[curNovel name]];  
    29. }  
    30.   
    31.   
    32. -(void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {  
    33.     ContentViewController *content = [segue destinationViewController];  
    34.     [content setCurNovel: curNovel];  
    35. }  
    36.   
    37. - (void)didReceiveMemoryWarning  
    38. {  
    39.     [super didReceiveMemoryWarning];  
    40.     // Dispose of any resources that can be recreated.  
    41. }  
    42.   
    43. @end  


  18. 接着内容界面:

    头文件:
    1. #import <UIKit/UIKit.h>  
    2.   
    3. #import "Novel.h"  
    4.   
    5. @interface ContentViewController : UIViewController  
    6.   
    7. @property (strong, nonatomic) IBOutlet UILabel *labelNovel;  
    8.   
    9. @property (nonatomic, strong) Novel *curNovel;  
    10.   
    11. - (IBAction)dismiss:(id)sender;  
    12.   
    13. @end  


    .m文件:
    1. #import "ContentViewController.h"  
    2.   
    3. @interface ContentViewController ()  
    4.   
    5. @end  
    6.   
    7. @implementation ContentViewController  
    8.   
    9. @synthesize curNovel;  
    10. @synthesize labelNovel;  
    11.   
    12.   
    13. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  
    14. {  
    15.     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
    16.     if (self) {  
    17.         // Custom initialization  
    18.     }  
    19.     return self;  
    20. }  
    21.   
    22. - (void)viewDidLoad  
    23. {  
    24.     [super viewDidLoad];  
    25.       
    26.     // 设置内容  
    27.     [labelNovel setText:[curNovel content]];  
    28.       
    29. }  
    30.   
    31. - (void)didReceiveMemoryWarning  
    32. {  
    33.     [super didReceiveMemoryWarning];  
    34.     // Dispose of any resources that can be recreated.  
    35. }  
    36.   
    37. - (IBAction)dismiss:(id)sender {  
    38.     [self dismissViewControllerAnimated:YES completion: nil];  
    39. }  
    40. @end  




    大功告成!
  评论这张
 
阅读(80)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017