geekband.02.iOS开发基础（三）View的定位与适配

iOS中界面的布局设置

iOS定位

以屏幕的左上角为原点，向右为x轴，向下为y轴。用了三个结构体来表示一个UIView的形状大小及位置，属性名为frame。CGRect(origin, size),其中origin为CGPoint，size为CGRect。

定位方式

以往在iOS中的定位方式有AutoResizing，但这种方式只能在上下级的views的关系中进行定位。为了能在同一级的view中也能定位，在iOS6之后引入了新的定位方式AutoLayout，现在的iOS工程中使用的都是AutoLayout布局方式。

AutoLayout

使用方式有两种：一种在storyboard里使用拖拽实现，另一种是在代码里实现。
1：按住ctrl键，把一个view1拖到另一个view2上，便可设定相对于view2的自动布局。

AutoLayout约束设定界面

2：代码的方式添加。

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"使用 AutoLayout 的方式";
    UIView *purpleView = [[UIView alloc] init];
    purpleView.backgroundColor = [UIColor purpleColor];
    // 禁止将 AutoresizingMask 转换为 Constraints
    purpleView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:purpleView];
    // 添加 width 约束
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150];
    [purpleView addConstraint:widthConstraint];
    // 添加 height 约束
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150];
    [purpleView addConstraint:heightConstraint];
    // 添加 left 约束
    NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:100];
    [self.view addConstraint:leftConstraint];
    // 添加 top 约束
    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:200];
    [self.view addConstraint:topConstraint];
}

由此可见，如果全部用代码来添加约束，会产生大量的约束代码，view中各个部件之间的关系就很难看清楚，相对来说，用storyboard中的方式添加约束，使得项目中各个部件之间的关系更加清晰，方便程序员及时的修改及查看效果。

常用的AutoLayout设置面板

Align：

Align

Pin：

Pin

Resize：

Resize

如果有多个UIView组件需要放在一块进行管理，可以将他们embed成一个stackview进行布局。同时在stackview里面也可以设置详细的参数来控制布局的规划。

stackview

stackview 设置

参考文章

[1]AutoLayout的那些事儿,http://www.cocoachina.com/ios/20160616/16732.html
[2]史上比较用心的纯代码实现 AutoLayout,http://www.cocoachina.com/ios/20160616/16732.html