因爲ipad的橫豎屏不一樣,因此好的應用,橫豎屏的頁面佈局也不同。那麼就須要橫豎屏的總體解決方案。先看一個橫豎屏佈局不同的界面。spa ![image image](http://static.javashuo.com/static/loading.gif)
上面兩張圖是來自同一個界面的橫豎版的截屏。能夠看出,橫豎版顯示的內容相同,可是界面佈局不一樣。要實現上述佈局,主要是運用UIView中 layoutSubviews方法。當UIView設置爲自動適配屏幕時,當用戶旋轉設備的時候,會調用layoutSubviews方法,咱們只需重寫 這個方法,而後判斷用戶屏幕的方向。在調整每一個空間的位置便可。code 下面是實現上述界面的最簡單的原型:orm
事例的截圖以下:ip ![image image](http://static.javashuo.com/static/loading.gif)
其中右面的文字和綠色部分是用一個子視圖封裝的。get
整個佈局是我在主視圖中添加了一個ContentView視圖,在ContentView視圖中添加了一個ArticleView視圖。
其中ArticleView和ContentView的xib文件都打開了
![image image](http://static.javashuo.com/static/loading.gif)
在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)]; }
|