转载请注明出处
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,因为有了分屏视图,可以在一屏显示两个视图,所以我们只要发个消息设置笑脸的幸福数就行了,如下:
//这个函数可以判断当前运行的设备是ipad还是iphone, 因为只有ipad才有split view - (HappinessViewController *)splitViewHappinessController { id hvc = [self.splitViewController.viewControllers lastObject]; //最后一个是右边栏 if (![hvc isKindOfClass:[HappinessViewController class]]) { hvc = nil; } return hvc; } - (void)setAndShowDiagnosis:(int)diagnosis { self.diagnosis = diagnosis; if ([self splitViewHappinessController]) { [self splitViewHappinessController].happiness = diagnosis;//直接设置 } else { [self performSegueWithIdentifier:@"ShowDiagnosis" sender:self]; } }
注意到代码里的splitViewHappinessController函数,我们用它来判断当前运行的设备是ipad还是iphone(当然只是这个demo这样可以,对于没有splitview的ipad应用,还有其它方法), 因为只有ipad才有分屏视图,那么当前的viewController的splitViewConctroller的viewControllers(有点绕)属性才有分屏对应的两个元素。这里还有一个问题,究竟是什么时候触发的self.splitViewController.viewControllers有左右栏两个元素呢?
应该是当把splitViewCtroller拖进storyboard后,所有在这个集合里的view controller就都具备了。
好了,到这里关于Dr.Freud相关的已经设置好了,可以运行看看效果,篇幅有限,这里不上图了。Dr.Pill相关的因为有三个不同的segue,情形稍复杂一些,不过也不难,篇幅有限,这里不处理了,有兴趣的可以自己做。
刚才都是在横屏状态下调试程序,我还没有看到竖屏的效果,它是这样的:
左边栏没有了,右边栏占据整个屏幕,当然不是我们想要的,正如第一部分讲到的,竖屏状态下我们期望有一个工具栏,然后工具栏有一个按钮可以弹出popover风格的左边栏。
首先我们要给分屏视图控制器指定一个代理(委托), 用哪个控制器作为代理呢? 因为要控制的是左边栏,所以要考虑左边的几个控制器,有三个,那很自然的就会选导航的根视图控制器了,因为两个医生的控制器并不是每次都出现,而根视图控制器是每次都会加载的,所以选它们的上级。代码如下:
//实现协议的方法 //某个状态下是否隐藏左边栏 - (BOOL)splitViewController:(UISplitViewController *)svc shouldHideViewController:(UIViewController *)vc inOrientation:(UIInterfaceOrientation)orientation { return NO; }
运行看看效果:
恩,效果已经好很多了,不过我们还想再优化一下,因为右边栏感觉被挤压了,试试popover的效果。
我们需要实现协议的另两个方法:
- (void)splitViewController:(UISplitViewController *)svcwillHideViewController:(UIViewController*)aViewController withBarButtonItem:(UIBarButtonItem*)barButtonItem forPopoverController:(UIPopoverController *)pc; //Called when the view is shown again in the split view, invalidating the buttonand popover controller. - (void)splitViewController:(UISplitViewController *)svcwillShowViewController:(UIViewController *)aViewControllerinvalidatingBarButtonItem:(UIBarButtonItem*)barButtonItem;
这两个方法分别在左边栏将要隐藏时调用(比如由横屏转到竖屏)和左边栏将要显示时调用(比如由竖屏转到横屏)。我们将在第一个函数的实现显示工具栏上的按钮,第二个函数隐藏工具栏上的按钮。
这里思考一个问题,谁来显示和隐藏工具栏上的按钮呢,答案是右边栏视图控制器,因为在竖屏状态下,只有它是显示的,所以我们应该在这视图下放一个工具栏,然后由右边栏视图控制器来操纵这个按钮。再进一步思考,如何把上面的行为作得更通用,方法是增加一个协议,这个协议可以控制显示或隐藏按钮,然后右边栏视图控制器来实现这个协议。
有了上面的理论基础,就可以开始行动了,首先增加一个协议,如下;
#import <UIKit/UIKit.h> //注意这里,改成UIKit @protocol SplitViewBarButtonItemPresenter <NSObject> @property (nonatomic, strong) UIBarButtonItem *splitViewBarButtonItem; @end
回到PassViewController, 增加一个方法获取右边栏的对象,这样才能操作按钮,方法如下:
//获取右边栏对象 - (id <SplitViewBarButtonItemPresenter>)splitViewBarButtonItemPresenter { id detailVC = [self.splitViewController.viewControllers lastObject]; if (![detailVC conformsToProtocol:@protocol(SplitViewBarButtonItemPresenter)]) { detailVC = nil; } return detailVC; }
协议写好之后,可以来看看上面提到的两个方法的实现了,如下:
//实现协议的方法 //某个状态下是否隐藏左边栏 - (BOOL)splitViewController:(UISplitViewController *)svc shouldHideViewController:(UIViewController *)vc inOrientation:(UIInterfaceOrientation)orientation { //注意理解这一行代码,它有两部分含义, //一是如果没有获取到右边栏控制器或该控制器没有实现协议,就直接返回NO,让左边栏永远显示 //二是如果一不成立,就在竖屏时隐藏左边栏 return [self splitViewBarButtonItemPresenter]? UIInterfaceOrientationIsPortrait(orientation) : NO; } //左边栏将要隐藏时调用(比如由横屏转到竖屏) - (void)splitViewController:(UISplitViewController *)svc willHideViewController:(UIViewController *)aViewController withBarButtonItem:(UIBarButtonItem *)barButtonItem forPopoverController:(UIPopoverController *)pc { //做两件事 //一,把工具栏上按钮的title设置成self.title(这里是"doctor") //二,把按钮放到工具栏上,这个任备要由右边栏完成,因为这个时候只有右边栏是显示的。 barButtonItem.title = self.title; [self splitViewBarButtonItemPresenter].splitViewBarButtonItem = barButtonItem; } //左边栏将要显示时调用(比如由竖屏转到横屏) - (void)splitViewController:(UISplitViewController *)svc willShowViewController:(UIViewController *)aViewController invalidatingBarButtonItem:(UIBarButtonItem *)barButtonItem { //把工具栏上的按钮移除,因为左边栏显示,所以不需要 [self splitViewBarButtonItemPresenter].splitViewBarButtonItem = nil; }
最后,要操作一下右边栏视图控制器,首先在storyboard里,给他增加一个工具栏,然后把默认的按钮删掉(我们要自己控制,所以不用它自带的)并给这个工具栏连接一个outlet以便于操作。接着继承协议并实现,代码如下:
//setter方法 - (void)setSplitViewBarButtonItem:(UIBarButtonItem *)splitViewBarButtonItem { if (_splitViewBarButtonItem != splitViewBarButtonItem) { NSMutableArray *toolBarItems = [self.toolBar.items mutableCopy]; if (_splitViewBarButtonItem) { //删除原来的 [toolBarItems removeObject:_splitViewBarButtonItem]; } if (splitViewBarButtonItem) { [toolBarItems insertObject:splitViewBarButtonItem atIndex:0]; //放在最左边 } self.toolBar.items = toolBarItems; _splitViewBarButtonItem = splitViewBarButtonItem; } }
好了,运行一下,会看到文章最开始给出的效果。
代码下载地址:
http://download.csdn.net/detail/pony_maggie/7502567
斯坦福大学IOS开发课程笔记(第七课第二部分)