详解iPad横竖屏切换解决方案

移动开发 iOS
本文介绍的是详解iPad横竖屏切换解决方案,详细的介绍了横竖屏切换的实例,来看详细内容。

详解iPad横竖屏切换解决方案是本文要介绍的内容,不多说,先来看内容。由于ipad横竖屏不同,所以好的应用,横竖屏的页面布局也不一样。那么就需要横竖屏的整体解决方案。先看一个横竖屏布局不一样的界面。

详解iPad横竖屏切换解决方案 详解iPad横竖屏切换解决方案

上面两张图是来自同一个界面的横竖版的截屏。可以看出,横竖版显示的内容相同,但是界面布局不同。要实现上述布局,主要是运用UIView中layoutSubviews方法。当UIView设置为自动适配屏幕时,当用户旋转设备的时候,会调用layoutSubviews方法,我们只需重写这个方法,然后判断用户屏幕的方向。在调整每个空间的位置即可。

下面是实现上述界面的最简单的原型:

首先分析可以知道左面是图片,右面是一个图片加文字的视图。下面就实现一个左面视图右面是一个图加一段字的事例。

事例的截图如下:

详解iPad横竖屏切换解决方案 详解iPad横竖屏切换解决方案

其中右面的文字和绿色部分是用一个子视图封装的。

整个布局是我在主视图中添加了一个ContentView视图,在ContentView视图中添加了一个ArticleView视图。

其中ArticleView和ContentView的xib文件都打开了

详解iPad横竖屏切换解决方案

在ContentView中重写layoutSubviews方法,然后根据stausbar的方向判断当前视图的横竖屏。具体代码:

  1. -(void)layoutSubviews{   
  2.     [super layoutSubviews];   
  3.     UIDeviceOrientation interfaceOrientation=[[UIApplication sharedApplication] statusBarOrientation];   
  4.     if (interfaceOrientation == UIDeviceOrientationPortrait || interfaceOrientation == UIDeviceOrientationPortraitUpsideDown) {   
  5.         //翻转为竖屏时   
  6.         [self setVerticalFrame];   
  7.     }else if (interfaceOrientation==UIDeviceOrientationLandscapeLeft || interfaceOrientation == UIDeviceOrientationLandscapeRight) {   
  8.         //翻转为横屏时   
  9.         [self setHorizontalFrame];   
  10.     }   
  11. }   
  12.  
  13. -(void)setVerticalFrame   
  14. {   
  15.     NSLog(@"竖屏");   
  16.     [titleLable setFrame:CGRectMake(283, 0, 239, 83)];   
  17.     [leftView setFrame:CGRectMake(38, 102, 384, 272)];   
  18.     [rightView setFrame:CGRectMake(450, 102, 282, 198)];   
  19. }   
  20.  
  21. -(void)setHorizontalFrame   
  22. {   
  23.     NSLog(@"横屏");   
  24.     [titleLable setFrame:CGRectMake(183, 0, 239, 83)];   
  25.     [leftView setFrame:CGRectMake(168, 122, 384, 272)];   
  26.     [rightView setFrame:CGRectMake(650, 122, 282, 198)];   

在具体的横竖屏方法中,从新设置各个组件的坐标即可。

接下来在ContentView中添加ArticleView视图。

  1. -(id)initWithCoder:(NSCoder *)aDecoder   
  2. {   
  3.     if ((self = [super initWithCoder:aDecoder])) {   
  4.  
  5.         NSArray *arrayContentView =[[NSBundle mainBundle] loadNibNamed:@"ArticleView" owner:self options:nil];   
  6.         rightView=[arrayContentView objectAtIndex:0];   
  7.         [self addSubview:rightView];   
  8.     }   
  9.     return self;   

由于我用的是xib,所以初始化方法为initWithCoder,在这个中添加新的视图。

同样在ArticleView中设置横竖屏相应空间的坐标即可。

  1. -(void)layoutSubviews{   
  2.     [super layoutSubviews];   
  3.     UIDeviceOrientation interfaceOrientation=[[UIApplication sharedApplication] statusBarOrientation];   
  4.     CGRect rect=self.frame;   
  5.     rect.size.width=282;   
  6.     rect.size.height=198;   
  7.     [self setFrame:rect];   
  8.     if (interfaceOrientation == UIDeviceOrientationPortrait || interfaceOrientation == UIDeviceOrientationPortraitUpsideDown) {   
  9.         //翻转为竖屏时   
  10.         [self setVerticalFrame];   
  11.     }else if (interfaceOrientation==UIDeviceOrientationLandscapeLeft || interfaceOrientation == UIDeviceOrientationLandscapeRight) {   
  12.         //翻转为横屏时   
  13.         [self setHorizontalFrame];   
  14.     }   
  15. }   
  16.  
  17. -(void)setVerticalFrame   
  18. {   
  19.     NSLog(@"竖屏");   
  20.     [contentView setFrame:CGRectMake(12, 6, 250, 125)];   
  21.     [textLable setFrame:CGRectMake(50, 139, 182, 39)];   
  22. }   
  23.  
  24. -(void)setHorizontalFrame   
  25. {   
  26.     NSLog(@"横屏");   
  27.     [contentView setFrame:CGRectMake(12, 6, 106, 158)];   
  28.     [textLable setFrame:CGRectMake(135, 11, 147, 39)];   

源代码:http://easymorse-iphone.googlecode.com/svn/trunk/IpadLayOut/

小结:详解iPad横竖屏切换解决方案的内容介绍完了,通过ipad屏幕切换的内容,是不是以及很清楚了,最后希望本文对你有所帮助。

责任编辑:zhaolei 来源: 互联网
相关推荐

2013-08-21 11:15:54

iOS横竖屏方案

2013-05-23 10:51:28

Android开发移动开发横竖屏切换

2010-01-25 15:23:12

Android横竖屏切

2010-02-23 14:56:18

WCF Bug

2017-12-26 14:05:21

润乾大屏可视化

2011-12-06 14:44:02

iPad企业级解决方案

2011-06-08 15:05:43

J2ME

2009-12-02 13:39:34

SAP认证Novell

2018-11-12 11:12:46

2023-03-05 18:23:38

分布式ID节点

2010-05-07 16:30:01

Oracle数据集成

2009-11-04 16:03:59

2017-05-11 17:11:13

SDNOpenFlow网络

2009-12-22 15:50:11

2019-11-11 17:34:16

前端开发技术

2009-10-15 10:39:31

综合布线解决方案

2009-10-12 16:29:25

有线网络布线解决方案

2009-11-05 09:42:44

智能小区宽带接入

2024-06-14 15:21:15

2012-05-27 16:21:31

IDC华为
点赞
收藏

51CTO技术栈公众号