iOS 约束代码自动布局正方形控件

我们说，有时候界面要求可点击的控件是类似于collectionviewcell的样式出现，横排出现三个或者四个等宽等高的UIButton控件；或者，不可点击以横排展示的方式出现三个或者四个UIImageView控件；再或者，是几段文字，当然文字很少要求是正方形的。

但当项目需要制作出几个控件横排排列，大小相同，且呈现正方形时，就可以借鉴我的经历。

以前的做法是：

一、横向约束，竖向固定大小

三个UIButton，约束成：等宽等高、中部横向对齐、button1对上和左边界约束、button1进行高度约束、button2左边界对button1右边界约束，button3左边界对button2又边界约束和button3右边界对右边框约束；此时更新后，三个button已经完成间距不变横向自动适配屏幕的等宽控件。

二、横向竖向固定高度，间距大小调控

同样是三个UIButton，约束成：等宽等高、button1约束高度和宽度值、button1和button2和button3同时约束相对于父视图水平和垂直对齐、更改button1垂直对齐比例为0.33、更改button2垂直对齐比例为0.66、更改button3垂直对齐比例为0.99；此时更新以后，三个button已经完成间距可变，边距可变，宽高固定的控件。

相比第一种方法，由于几款机型的屏幕差距还不是太大，第二种是一个接近项目需求的解决方法。但是想让控件间距和控件与边框的边距相等，就要改变对齐比例，而且我暂时还不清楚能否实现间距和边距的相等。但是这种方法可以适用于图片大小确定，间距要求高，边距不做要求的情况，是一种约束非常简便，实现相对简单的一种方法。

当然了，第一种适用于，高度确定，宽度可变，切间距和边距要求比较严格的方法。但是我想这种项目需求较少，一般都是确保控件的美观，宁可牺牲边距，也不能做控件图片的拉伸压缩，会相当难看。

那么，我来说一下最近想到的一种新方法，就是约束和代码相结合的这么一种方法。

三个UIImageView控件，约束成：等宽等高、中部横向对齐、imageview1对上和左边界约束、imageview1进行高度约束、imageview2左边界对imageview1右边界约束，imageview3左边界对imageview2又边界约束、imageview3右边界对右边框约束；此次约束跟第一种方法是一样的，当初的灵感也是从第一种修改得来的。此时我们将三个控件连线到.m文件属性，我们接下来要做的是对属性的再次修改，代码如下：

[self.viewaddConstraint:[NSLayoutConstraintconstraintWithItem:self.oneImageViewattribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:self.oneImageViewattribute:NSLayoutAttributeWidthmultiplier:1.0fconstant:0.0f]];
[self.viewaddConstraint:[NSLayoutConstraintconstraintWithItem:self.twoImageViewattribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:self.twoImageViewattribute:NSLayoutAttributeWidthmultiplier:1.0fconstant:0.0f]];

[self.viewaddConstraint:[NSLayoutConstraintconstraintWithItem:self.threeImageViewattribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:self.threeImageViewattribute:NSLayoutAttributeWidthmultiplier:1.0fconstant:0.0f]];

添加的NSLayoutConstraint会在storyboard编译完成以后做再次更改，大体意思是，在控制器view上添加约束，第一个控件是连线成属性的imageview，约束高度，方式是等于，第二个控件是本身imageview，约束宽度，比例为1，偏移为0.

由于事先storyboard已经计算出适合屏幕的控件宽度，那么再次修改的时候，我就让此控件的高度和宽度相等，这不就等于实现了正方形控件吗。

我先不做过多解释，先说一下第二种需求，就是我的控件，不是在viewcontroller中布局，而是在tableviewcell中布局，这种方式下，添加的约束修改代码就会报错，因为cell并不是self.view，所以你在self.view上加约束是不对的。当初我还尝试将storyboard中tableview的contentview连线到cell的.m文件，然后把上面的self.view改成连线后的content view，尝试后也不行。

经过一系列的折腾，后来就改成了下面这种：

约束要改变一下：等宽等高、中部横向对齐、button1对上和下和左边界约束、button2左边界对button1右边界约束，button3左边界对button2又边界约束和button3右边界对右边框约束；此时，我高度是随着cell的高度变化的，宽度是随着屏幕宽度变化的，可以想象，想要高度和宽度的相等，就只能去认为的干预cell的高度了。高度的计算：屏幕的宽度 - 三个控件的边距和间距总和 / 控件个数 + 控件距上和下边距的总和；比如我的控件之间的间距是10，边距也是10，距顶部和底部也是10： self.tableView.rowHeight = ( [UIScreen mainScreen].bounds.size.width - 50.0f) / 3.0f + 20.0f;

约束的话呢，我也没法给各位图片，我就截几个小图片，看一下约束后的情况：