使用AutoLayout实践

在对界面进行布局的时候，我们经常使用AutoLayout对界面进行布局适配。就AutoLayout的布局实现而言，一般我们经常使用的有三种方式：

• 通过苹果强大的可视化界面（Interface Builder），使用AutoLayout完成界面视图的布局。
• 通过纯代码的形式使用AutoLayout，即NSLayoutConstraint。
• 使用第三方界面布局库Masonry进行代码布局。
  下面结合一个登录界面的搭建，利用第一种方式来介绍AutoLayout。
  先看一下我们要搭建的登录界面：
  
  先看一下这个效果图的结构，然后我们使用AutoLayout布局约束来实现。
  

1.背景UIImageView约束的添加

通过固定和父控件的相对位置，确定了这个UIImageView控件的with,height,x,y的值。其实对于一个控件添加约束，不管添加多少约束，最终都是确定它的这四个值。
添加完约束以后，如果没有约束冲突，控件的周围是黄色的线，这时更新约束，控件就能进行自动布局显示了；如果添加约束后出现红色的线，那么就是出现约束冲突了，这时就需要解决冲突，这时可以点击红色的小箭头中，根据冲突的提示来解决冲突。更新约束的快捷键：shift + command + =。

2.登录框部分的约束添加
在这里”登录框”作为一个容器，将内部的一些子控件包裹着。这样做的好处就是当登录框的内容需要整体移动的时候，不用关心登录框内部的约束。登录框UIView添加的约束如下图：

如图中所标的W,H,X,Y这四个约束就将登录框部分的位置布局好了。布局好父控件的位置后，就可以布局内部的子控件的位置了。如约束中的Descenndant Constraint就是描述的子控件和父控件的位置。
在这个约束展示中，有控件和控件之间的约束关系。一般我们为一个子控件添加约束都是相对于父控件来添加的，如果我们是为相邻控件之间添加约束，那么我们可以通过如下的小箭头来改变约束关系：

我们也可以通过选中要添加约束的控件，然后按住control键，拖线到要关联约束的控件上，在弹出的上下文菜单中添加约束。如下图：

至于登录框内部的控件的约束细节就不再细说了。
3.注册框部分约束的添加
注册框在这里没有显示出来，这里添加的时候，有一个小的技巧，就是先将这个注册框在可视范围内将内部子控件的约束添加好，之后再添加和相邻控件和父控件之间的约束关系。这里如果在布局的时候不能显示出来，那么在运行的时候，也是不能显示出来，那么就需要在运行的时候，改变约束条件，然后使其可见。在这里当点击［注册账号］时，注册框部分可见于屏幕中，而登录框消失于屏幕中。实现方案是改变登录框左边距离父控件左边的位置的约束。代码如下：

leftMargin是登录框左边距离父控件左边的约束
//@property (weak, nonatomic) IBOutlet NSLayoutConstraint *leftMargin;
    if (self.leftMargin.constant) {
        self.leftMargin.constant = 0;
        button.selected = NO;
    } else {
        self.leftMargin.constant =  - self.view.width;
        button.selected = YES;
    }
    //实现动画效果
    [UIView animateWithDuration:0.25 animations:^{
        [self.view layoutIfNeeded];
    }];

4.底部快速登录整体部分的布局约束
在这里说一下三个登录按钮的布局。这三个按钮是等宽等高在屏幕中显示。布局约束方案有很多。可以先固定第一按钮的左边距约束，上下间距约束，然后添加三个按钮等宽的约束，在添加第一个按钮的右边距约束，这时第一个按钮的约束已经添加完，但由于约束整体的约束条件不够，宽度没有计算出来，约束还是不完整，这时可以添加第二个按钮的约束和第一个按钮等高和第三个按钮的左边距相等。最后对第三个按钮添加约束，和第二个按钮等高，右边距和父控件的右边距相等。这时约束才完整，更新约束即可。
这个按钮的文字和图片时左右排列的，在显示的时候是上下排列的。在这里使用了自定义的按钮，对按钮中的子控件重新进行排布了。QuickLoginButton.m主要代码如下：

- (void)layoutSubviews
{
    [super layoutSubviews];
    // 图片
    self.imageView.centerX = self.width * 0.5;
    self.imageView.y = 0;
    // 文字
    self.titleLabel.x = 0;
    self.titleLabel.width = self.width;
    self.titleLabel.y = self.imageView.height;
    self.titleLabel.height = self.height - self.imageView.height;
}

下面查看一下，布局好的xib在不同的设备上的预览图：