詳解iPad橫豎屏切換解決方案

詳解iPad橫豎屏切換解決方案是本文要介紹的內容，不多說，先來看內容。由於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, 0, 239, 83)];   
  
    [leftView setFrame:CGRectMake(38, 102, 384, 272)];   
  
    [rightView setFrame:CGRectMake(450, 102, 282, 198)];   
  
}   
  
 
  
-(void)setHorizontalFrame   
  
{   
  
    NSLog(@"橫屏");   
  
    [titleLable setFrame:CGRectMake(183, 0, 239, 83)];   
  
    [leftView setFrame:CGRectMake(168, 122, 384, 272)];   
  
    [rightView setFrame:CGRectMake(650, 122, 282, 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, 6, 106, 158)];   
  
    [textLable setFrame:CGRectMake(135, 11, 147, 39)];   
  
} 
 

原始碼：http://easymorse-iphone.googlecode.com/svn/trunk/IpadLayOut/

小結：詳解iPad橫豎屏切換解決方案的內容介紹完了，通過ipad螢幕切換的內容，是不是以及很清楚了，最後希望本文對你有所協助。