斯坦福大学IOS开发课程笔记(第七课第二部分)

转载请注明出处

http://blog.csdn.net/pony_maggie/article/details/32163347

作者:小马

本篇是demo演示，程序其实就是上节课的心理学家那个demo, 不过在这个demo的基础上，把它作成一个通用版，可以自动识别当前运行的设备是iphone还是ipad,然后有不同的显示效果。所以，还是打开原来的Psychologist工程，在开始之前，我会用第五课讲的自动布局知识，让视图能在横屏模式下也可以正常显示。这一部分不细讲，参考第五课。

 

下面就可以讲如何能做一个通用的app来同时适配iphone和ipad。 我们希望在iphone上的运行效果是这样的（详细的可以参考第五课的博文）：

 

 

而ipad上，就会用到分屏视图，显示效果如下图所示:

   

 

 

 

好，开始了。首先，改一下工程配置，如下图：

 

可以马上运行看看效果，选择ipad模拟器，然后run,效果如下所示:

 

 

屏幕与视图的对比效果反差太大，就像把iphone上的显示直接copy到ipad上并强制拉伸了一样，非常丑。这是因为我们在ipad运行的还是原来iphone上的storyboard。Ipad需要有自己的storyboard。新建一个storyboard方法如下:

 

第一步，重命名原来的storyboard为Iphone.storyboard(名字随便起，只是为了区分)。

 

第二步，增加一个新的storyboard,起名为Ipad.storyboard。步骤如下图:

 

 

第三步，在工程设置里指定 main interface为刚才新建的这个storyboard,如下

 

 

ipad.storyboard是空的，首先给他增加一个分屏视图控制器。如下图：

 

把table view controller删除，这个用不到，然后右边剩下的两个，窄一点的是左边栏(master), 宽的是右边栏(detail),还记得上一部分讲的这两个概念吧。根据文章一开始给出的效果图来看，右边栏应该是要显示”笑脸”的, 所以要把这一部分功能重用，具体方法不说了，在第六课的博文中，我详细的讲过重用的步骤，简单来讲就是把控制对应的类设置成HappinessViewController,增加一个view, 对应的类设置成FaceView，然后连接好outlet。

 

左边栏的处理相对简单，我们从iphone.storyboard里把导航栏相关的几个controller复制过来，然后粘贴到ipad.storyboard里就要以了，然后拖一些segue 建立push关系，如下图:

 

接下来，我们建立左边栏和右边栏的连接，是否还记得在iphone.storyboard里，对于Dr.Freud, 我们是先新建一个segue,然后标识到，接着调用performSegueWithIdentifier来实现切换视图效果，那么对于ipad，因为有了分屏视图，可以在一屏显示两个视图，所以我们只要发个消息设置笑脸的幸福数就行了，如下:

[objc]  view plain copy

1. //这个函数可以判断当前运行的设备是ipad还是iphone, 因为只有ipad才有split view  
2. - (HappinessViewController *)splitViewHappinessController  
3. {  
4.     id hvc = [self.splitViewController.viewControllers lastObject]; //最后一个是右边栏  
5.     if (![hvc isKindOfClass:[HappinessViewController class]])  
6.     {  
7.         hvc = nil;  
8.     }  
9.     return hvc;  
10. }  
11.   
12. - (void)setAndShowDiagnosis:(int)diagnosis  
13. {  
14.     self.diagnosis = diagnosis;  
15.     if ([self splitViewHappinessController])  
16.     {  
17.         [self splitViewHappinessController].happiness = diagnosis;//直接设置  
18.     }  
19.     else  
20.     {  
21.         [self performSegueWithIdentifier:@"ShowDiagnosis" sender:self];  
22.     }  
23.       
24. }  

注意到代码里的splitViewHappinessController函数，我们用它来判断当前运行的设备是ipad还是iphone （当然只是这个demo这样可以，对于没有splitview的ipad应用，还有其它方法）, 因为只有ipad才有分屏视图,那么当前的viewController的splitViewConctroller的viewControllers(有点绕)属性才有分屏对应的两个元素。这里还有一个问题，究竟是什么时候触发的 self . splitViewController . viewControllers有左右栏两个元素呢？ 应该是当把 splitViewCtroller拖进storyboard后，所有在这个集合里的view controller就都具备了。

 

好了，到这里关于Dr.Freud相关的已经设置好了，可以运行看看效果，篇幅有限，这里不上图了。Dr.Pill相关的因为有三个不同的segue,情形稍复杂一些，不过也不难，篇幅有限，这里不处理了，有兴趣的可以自己做。

 

刚才都是在横屏状态下调试程序，我还没有看到竖屏的效果，它是这样的:

左边栏没有了，右边栏占据整个屏幕，当然不是我们想要的，正如第一部分讲到的，竖屏状态下我们期望有一个工具栏，然后工具栏有一个按钮可以弹出popover风格的左边栏。

 

首先我们要给分屏视图控制器指定一个代理(委托)， 用哪个控制器作为代理呢？ 因为要控制的是左边栏，所以要考虑左边的几个控制器，有三个，那很自然的就会选导航的根视图控制器了，因为两个医生的控制器并不是每次都出现，而根视图控制器是每次都会加载的，所以选它们的上级。代码如下:

[objc]  view plain copy

1. //实现协议的方法  
2. //某个状态下是否隐藏左边栏  
3. - (BOOL)splitViewController:(UISplitViewController *)svc shouldHideViewController:(UIViewController *)vc inOrientation:(UIInterfaceOrientation)orientation  
4. {  
5.       
6.     return NO;  
7. }  

运行看看效果:

恩，效果已经好很多了，不过我们还想再优化一下，因为右边栏感觉被挤压了，试试popover的效果。

 

 

我们需要实现协议的另两个方法:

[objc]  view plain copy

1. - (void)splitViewController:(UISplitViewController *)svcwillHideViewController:(UIViewController*)aViewController withBarButtonItem:(UIBarButtonItem*)barButtonItem forPopoverController:(UIPopoverController *)pc;  
2.    
3. //Called when the view is shown again in the split view, invalidating the buttonand popover controller.  
4. - (void)splitViewController:(UISplitViewController *)svcwillShowViewController:(UIViewController *)aViewControllerinvalidatingBarButtonItem:(UIBarButtonItem*)barButtonItem;  

这两个方法分别在左边栏将要隐藏时调用(比如由横屏转到竖屏)和左边栏将要显示时调用(比如由竖屏转到横屏)。我们将在第一个函数的实现显示工具栏上的按钮，第二个函数隐藏工具栏上的按钮。

 

这里思考一个问题，谁来显示和隐藏工具栏上的按钮呢，答案是右边栏视图控制器，因为在竖屏状态下，只有它是显示的，所以我们应该在这视图下放一个工具栏，然后由右边栏视图控制器来操纵这个按钮。再进一步思考，如何把上面的行为作得更通用，方法是增加一个协议，这个协议可以控制显示或隐藏按钮，然后右边栏视图控制器来实现这个协议。

 

有了上面的理论基础，就可以开始行动了，首先增加一个协议，如下;

[objc]  view plain copy

1. #import <UIKit/UIKit.h> //注意这里，改成UIKit  
2.   
3. @protocol SplitViewBarButtonItemPresenter <NSObject>  
4.   
5. @property (nonatomic, strong) UIBarButtonItem *splitViewBarButtonItem;  
6.   
7. @end  

回到PassViewController, 增加一个方法获取右边栏的对象，这样才能操作按钮，方法如下:

[objc]  view plain copy

1. //获取右边栏对象  
2. - (id <SplitViewBarButtonItemPresenter>)splitViewBarButtonItemPresenter  
3. {  
4.     id detailVC = [self.splitViewController.viewControllers lastObject];  
5.     if (![detailVC conformsToProtocol:@protocol(SplitViewBarButtonItemPresenter)])  
6.     {  
7.         detailVC = nil;  
8.     }  
9.     return detailVC;  
10. }  

协议写好之后，可以来看看上面提到的两个方法的实现了，如下:

[objc]  view plain copy

1. //实现协议的方法  
2. //某个状态下是否隐藏左边栏  
3. - (BOOL)splitViewController:(UISplitViewController *)svc shouldHideViewController:(UIViewController *)vc inOrientation:(UIInterfaceOrientation)orientation  
4. {  
5.     //注意理解这一行代码，它有两部分含义，  
6.     //一是如果没有获取到右边栏控制器或该控制器没有实现协议，就直接返回NO,让左边栏永远显示  
7.     //二是如果一不成立，就在竖屏时隐藏左边栏  
8.     return [self splitViewBarButtonItemPresenter]? UIInterfaceOrientationIsPortrait(orientation) : NO;  
9. }  
10.   
11. //左边栏将要隐藏时调用(比如由横屏转到竖屏)  
12. - (void)splitViewController:(UISplitViewController *)svc willHideViewController:(UIViewController *)aViewController withBarButtonItem:(UIBarButtonItem *)barButtonItem forPopoverController:(UIPopoverController *)pc  
13. {  
14.     //做两件事  
15.     //一，把工具栏上按钮的title设置成self.title(这里是"doctor")  
16.     //二,把按钮放到工具栏上，这个任备要由右边栏完成，因为这个时候只有右边栏是显示的。  
17.       
18.     barButtonItem.title = self.title;  
19.     [self splitViewBarButtonItemPresenter].splitViewBarButtonItem = barButtonItem;  
20.       
21.       
22. }  
23.   
24. //左边栏将要显示时调用(比如由竖屏转到横屏)  
25. - (void)splitViewController:(UISplitViewController *)svc willShowViewController:(UIViewController *)aViewController invalidatingBarButtonItem:(UIBarButtonItem *)barButtonItem  
26. {  
27.     //把工具栏上的按钮移除，因为左边栏显示，所以不需要  
28.     [self splitViewBarButtonItemPresenter].splitViewBarButtonItem = nil;  
29. }  

最后，要操作一下右边栏视图控制器，首先在storyboard里，给他增加一个工具栏，然后把默认的按钮删掉（我们要自己控制，所以不用它自带的）并给这个工具栏连接一个outlet以便于操作。接着继承协议并实现，代码如下:

[objc]  view plain copy

1. //setter方法  
2. - (void)setSplitViewBarButtonItem:(UIBarButtonItem *)splitViewBarButtonItem  
3. {  
4.     if (_splitViewBarButtonItem != splitViewBarButtonItem)  
5.     {  
6.         NSMutableArray *toolBarItems = [self.toolBar.items mutableCopy];  
7.         if (_splitViewBarButtonItem)  
8.         {  
9.             //删除原来的  
10.             [toolBarItems removeObject:_splitViewBarButtonItem];  
11.         }  
12.         if (splitViewBarButtonItem)  
13.         {  
14.             [toolBarItems insertObject:splitViewBarButtonItem atIndex:0]; //放在最左边  
15.         }  
16.         self.toolBar.items = toolBarItems;  
17.         _splitViewBarButtonItem = splitViewBarButtonItem;  
18.     }  
19. }  

 

好了，运行一下，会看到文章最开始给出的效果。

 

代码下载地址:

http://download.csdn.net/detail/pony_maggie/7502567