横屏和竖屏布局不同的实现方案浅析
最近在开发中碰到了需要兼容横竖屏的布局需求，由于要兼容iOS7且要适配目前所有的iOS尺寸，刚开始思路也不怎么明朗。在尝试了好几种不同的实现方案后，磕磕绊绊，最后终于实现了业务需求。这里主要跟大家分享一下横竖屏布局方案的几种思路。

0x01 简单的横竖屏布局，约束搞定

这是一种比较简单的情形，虽然横屏和竖屏看上去不太一样，但界面中元素的相对布局没有变化，比如横屏中A元素和B元素是上下布局，竖屏中A元素和B元素也是上下布局。这种情形下，为了适配不同尺寸的iOS设备，使用Autolayout来布局比较合适。 如下图1和图2是个一个典型的业务场景；

图1

图2

图3

0x02 横屏和竖屏差别较大时的适配方案

0x02.0x01 使用xib，内置两个不同的View，方向旋转时切换

下面是一种业务场景，A,B,C,D四个View在横屏和竖屏状态下的布局分别如图-4和图-5所示。 该如何实现这种布局呢（要兼容iOS7，暂不考虑使用SizeClass）？

图4

图5

这种情形可以使用xib来布局，新建一个ViewController,添加两个与根View平行的View，其中一个称之为portraitView，负责竖屏布局；另一个称之为landscapeView，负责横屏布局，然后在ViewController的viewDidLayoutsubviews里根据屏幕方向来动态切换。废话不多说了，直接show code吧。

@property (strong, nonatomic) IBOutlet UIView *landscapeView;
@property (strong, nonatomic) IBOutlet UIView *portraitView;

@property (strong, nonatomic) UIView *currentView;

......

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    [self setupViewForOrientation];
}

- (void)setupViewForOrientation
{
    UIInterfaceOrientation oritentation = [[UIApplication sharedApplication] statusBarOrientation];
    [_currentView removeFromSuperview];
    if (UIInterfaceOrientationIsPortrait(oritentation)) {
        [self.view addSubview:_portraitView];
        _currentView = _portraitView;
        [_currentView setFrame:self.view.bounds];
        
    } else if (UIInterfaceOrientationIsLandscape(oritentation)) {
        [self.view addSubview:_landscapeView];
        _currentView = _landscapeView;
        [_currentView setFrame:self.view.bounds];
        
    }
}

xib中view的结构如下图：

图6

另外：storyboard上还不太清楚怎么添加多个平行的根view,请大神指教。

0x02.0x02 使用带有优先级的多约束，方向旋转时，动态更改约束的优先级

再来看下面图7和图8这个业务场景：横屏下A和B水平排列，竖屏下A和B垂直排列。同样，如果使用xib，添加两个不同的view，可以很快的完成需求。这里再提供一种思路，使用带有优先级的多个约束条件来实现，当屏幕方向旋转时，动态改变约束的优先级来达到目的。

图7

图8

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *colorViewHeightConstraint;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *colorViewBottomConstraint;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *colorViewWidthConstraint;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *colorViewTrailingConstraint;

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *grayViewTopToColorViewConstraint;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *grayViewTopToSuperViewConstraint;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *grayViewLeadingToSuperViewConstraint;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *grayViewLeadingToColorViewConstraint;

......

- (void)viewWillLayoutSubviews
{
    [super viewWillLayoutSubviews];
    [self setupViewForOrientation];
}

......

- (void)setupViewForOrientation
{
    UIInterfaceOrientation oritentation = [[UIApplication sharedApplication] statusBarOrientation];
 
    if (UIInterfaceOrientationIsPortrait(oritentation)) {
        
        _colorViewHeightConstraint.priority = UILayoutPriorityDefaultHigh;
        _colorViewBottomConstraint.priority = UILayoutPriorityDefaultLow;
        _colorViewTrailingConstraint.priority = UILayoutPriorityDefaultHigh;
        _colorViewWidthConstraint.priority = UILayoutPriorityDefaultLow;
        
        _grayViewTopToColorViewConstraint.priority = UILayoutPriorityDefaultHigh;
        _grayViewTopToSuperViewConstraint.priority = UILayoutPriorityDefaultLow;
        _grayViewLeadingToSuperViewConstraint.priority = UILayoutPriorityDefaultHigh;
        _grayViewLeadingToColorViewConstraint.priority = UILayoutPriorityDefaultLow;
        
    } else if (UIInterfaceOrientationIsLandscape(oritentation)) {
   
        _colorViewHeightConstraint.priority = UILayoutPriorityDefaultLow;
        _colorViewBottomConstraint.priority = UILayoutPriorityDefaultHigh;
        _colorViewTrailingConstraint.priority = UILayoutPriorityDefaultLow;
        _colorViewWidthConstraint.priority = UILayoutPriorityDefaultHigh;
        
        _grayViewTopToColorViewConstraint.priority = UILayoutPriorityDefaultLow;
        _grayViewTopToSuperViewConstraint.priority = UILayoutPriorityDefaultHigh;
        _grayViewLeadingToSuperViewConstraint.priority = UILayoutPriorityDefaultLow;
        _grayViewLeadingToColorViewConstraint.priority = UILayoutPriorityDefaultHigh;
    }
}

PS:总觉得这里要写的改变约束的代码有点啰嗦，不过确实是提供了另一种不同的思路。

0x02.0x03 基于Sizeclass(iOS8及其之后)

iOS8之后可以愉快地使用SizeClass进行布局了，不过这不是本文分享的重点，感兴趣的朋友自行Google吧。如果能够说服产品经理不再兼容iOS7,就可以统一使用SizeClass+Autolayout进行布局了。

通过几个简单的例子，本文给横竖屏适配方案提供了一些思路，实际的业务场景复杂多变，还需在实践中灵活运用。本文所有的代码可以在github上获取到，地址后续会补充上来