ipad 横竖屏切换解决方案_app

概述原文：http://wangjun.easymorse.com/?p=1326 由于ipad的横竖屏不同，所以好的应用，横竖屏的页面布局也不一样。那么就需要横竖屏的整体解决方案。先看一个横竖屏布局不一样的界面。上面两张图是来自同一个界面的横竖版的截屏。可以看出，横竖版显示的内容相同，但是界面布局不同。要实现上述布局，主要是运用UIView中layoutSubviews方法。当UIView设置

原文：http://wangjun.easymorse.com/?p=1326

由于ipad的横竖屏不同，所以好的应用，横竖屏的页面布局也不一样。那么就需要横竖屏的整体解决方案。先看一个横竖屏布局不一样的界面。

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

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

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

事例的截图如下：

其中右面的文字和绿色部分是用一个子视图封装的。整个布局是我在主视图中添加了一个ContentVIEw视图，在ContentVIEw视图中添加了一个ArticleVIEw视图。其中ArticleVIEw和ContentVIEw的xib文件都打开了

在ContentVIEw中重写layoutSubvIEws方法，然后根据stausbar的方向判断当前视图的横竖屏。具体代码：

-(voID)layoutSubvIEws{
    [super layoutSubvIEws];
    UIDeviceOrIEntation interfaceOrIEntation=[[UIApplication sharedApplication] statusbarOrIEntation];
    if (interfaceOrIEntation == UIDeviceOrIEntationPortrait || interfaceOrIEntation == UIDeviceOrIEntationPortraitUpsIDeDown) {
        //翻转为竖屏时
        [self setVerticalFrame];
    }else if (interfaceOrIEntation==UIDeviceOrIEntationLandscapeleft || interfaceOrIEntation == UIDeviceOrIEntationLandscapeRight) {
        //翻转为横屏时
        [self setHorizontalFrame];
    }
}

-(voID)setVerticalFrame
{
    NSLog(@"竖屏");
    [TitleLable setFrame:CGRectMake(283,239,83)];
    [leftVIEw setFrame:CGRectMake(38,102,384,272)];
    [rightVIEw setFrame:CGRectMake(450,282,198)];
}

-(voID)setHorizontalFrame
{
    NSLog(@"横屏");
    [TitleLable setFrame:CGRectMake(183,83)];
    [leftVIEw setFrame:CGRectMake(168,122,272)];
    [rightVIEw setFrame:CGRectMake(650,198)];
}

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

接下来在ContentVIEw中添加ArticleVIEw视图。

-(ID)initWithCoder:(NSCoder *)aDecoder
{
    if ((self = [super initWithCoder:aDecoder])) {

        NSArray *arrayContentVIEw =[[NSBundle mainBundle] loadNibnamed:@"ArticleVIEw" owner:self options:nil];
        rightVIEw=[arrayContentVIEw objectAtIndex:0];
        [self addSubvIEw:rightVIEw];
    }
    return self;
}

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

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

-(voID)layoutSubvIEws{
    [super layoutSubvIEws];
    UIDeviceOrIEntation interfaceOrIEntation=[[UIApplication sharedApplication] statusbarOrIEntation];
    CGRect rect=self.frame;
    rect.size.wIDth=282;
    rect.size.height=198;
    [self setFrame:rect];
    if (interfaceOrIEntation == UIDeviceOrIEntationPortrait || interfaceOrIEntation == UIDeviceOrIEntationPortraitUpsIDeDown) {
        //翻转为竖屏时
        [self setVerticalFrame];
    }else if (interfaceOrIEntation==UIDeviceOrIEntationLandscapeleft || interfaceOrIEntation == UIDeviceOrIEntationLandscapeRight) {
        //翻转为横屏时
        [self setHorizontalFrame];
    }
}

-(voID)setVerticalFrame
{
    NSLog(@"竖屏");
    [contentVIEw setFrame:CGRectMake(12,6,250,125)];
    [textLable setFrame:CGRectMake(50,139,182,39)];
}

-(voID)setHorizontalFrame
{
    NSLog(@"横屏");
    [contentVIEw setFrame:CGRectMake(12,106,158)];
    [textLable setFrame:CGRectMake(135,11,147,39)];
}