笔者自大学毕业后即开始从事ios开发，在学习之初即发现线性代数与控件条件之间有一种微妙的关系，而且如果一个理论能够找到数学的支持，那么这个理论将会有非常强大的理论支持，而不再是经验支持。本数学建模算法主要解决我们在进行控件布局过程中的约束过少，约束过多，约束冲突等问题。但是一个好的理论应该具有一般性和通用性，于是笔者并未在工作之初就发表文章，而是在工作中深入研究这种算法，并验证算法的一般性，虽然在IOS中我们可以利用像Masonry这样的第三方框架加上丰富的经验，可以完成约束，但是本数学建模算法对于使用StoryBoard和XIB会非常有用，即使是在纯代码配合Masonry情况下，进行非常复杂的控件布局，也依然非常有效和好用，最重要的是我们可以给我们的布局约束找到很好的数学支持，而不再是通过经验这种不是百分之百拿得准的不稳定支持，本文以IOS为例讲解，相信其他前端开发的读者也可以找到合适的对应的东西。
我们先通过一些简单的回忆给后面的数学建模打下基础，但凡学习过数学的人应该对二元一次非齐次方程组有解的条件非常熟悉
式1
以上的这个式子在我们初中就已经会做了，大学的时候进入了深入的学习，探讨了其有解的本质，此方程组的系数矩阵为
式2
此系数举证在经过线性变换后，可以保证矩阵的秩为满，这就是式1具有特解的原因。这是我们的第一种情况，方程组系数矩阵满秩，有特解
同时我们再看一个列子
式3
此方程组的系数矩阵为
式4
可以看出此方程组的系数矩阵通过线性变换后不满秩，那么肯定就没有特解了，同时，上下方程明显矛盾，造成连通解也没有，这是第二种情况，方程组系数矩阵不满秩，且式子有冲突，无特解。
再举一个例子，这是第三种种情况
式5
此方程组的系数矩阵和式4是一样的，系数矩阵不满秩，即没有特解，但是由于上下式子没有冲突，此方程组存在通解，这就是第三种情况，方程组系数矩阵不满秩，但是有通解。
第四种情况
式6
此方程的系数矩阵为
式7
很显然系数矩阵方程满秩，但是这里多了一个方程，例如最后一个方程可以由第三个方程和第二个方程变换得来。这是第四种情况，系数矩阵满秩，有特解，但是条件多了
其实确定我们一个控件的位置，一般情况下（在IOS中，UILable，UITextField等除外）需要确定4个参数，即frame中x,y,width,height四个参数，那么按照我们上述的理论，我们就需要四个方程式来解出这四个参数，当然，我们根本就不需要解出这四个值，我们只需要得到系数矩阵判断我们的约束是否合适，为了更方便地建模，我们需要对常用的其他控件位置大小描述方法做一个约定,而且width和height分别简称为w和h，屏幕宽度或父控件高度分别为W和H,常数量为c,如果本控件是相对于另外一个控件的相对位置，则另外一个空间的四个未知数表示为x',y',w',h'，centerX=x+1/2w，centerY=y+1/2h。trailing = x+w,bottom=y+h 。以此，maxX，midX,maxY,midY读者按照刚才的方法也可以转换为x和w的关系式。接下来我们将对XCode提供的StoryBoard系统方法进行数学建模。
图1
按照图1提供的约束方法，数学式分别为：Leading Edges:x = x'. Trailing Edges: x+w = x'+w'. Top Edges: y=y'. Bottom Edges:y+h = y'+h'. Horizontal Centers:x+1/2w = x'+1/2w'. Vertical Centers:y+1/2h = y'+1/2h'.Horizontally in Container:x+1/2w = 1/2W. Vertically in Container:y+1/2h = 1/2H
图2
按照图二提供的约束方法,数学式分别为：top:x=c. left:y=c. bottom:y+h+c=H. right:x+w+c=W. height:h=c. width:w=c. Equal Width:w = w'. Equal Height:h = h'。
现在我们已经对系统给的重要约束方法有了一个完整的数学建模，及时是Masonry提供的方法，几乎也离不开此数学建模，我们将举例说明我们在文章最初说的三种情况，因为组合的可能性太多，我就不一一列举所有的组合情况，关于系数矩阵解的情况分别只列举一个例子
第一种情况：方程组系数矩阵满秩，有非齐次特解，即能确定控件的位置和大小，先以单控件为例，我们经常使用的top.left.bottom.right。可以得到一个方程组
式8
其中C1,C2,C3,C4为我们自己设置的常数，此方程组的系数矩阵为
式9
显然，在经过线性变换后，该系数矩阵方程满秩，由我们上述的结论，该方程组有特解，我们可以唯一确定控件大小和位置。
第二种情况。例如我们设置了top和bottom，此时根据上文的数学建模的两个式子，我们可以得到两个式子y=c1 ,y+h=H-c2。有这两个式子，我们已经可以得到控件的唯一高度，如果此时我们再对控件的高度进行设置，且高度设置不等于唯一特解，即出现约束冲突，此时XCode会报出红色箭头警报。如果此时我们也设置了高度，但是高度和唯一特解一致，则出现第四种情况
同时我们在此处再举一个有通解的，我们在实际编程中可能出现的问题。
以图中两个控件为例，我们分别设置了两个控件的上下左右约束，只不过左边控件的right约束以右边控件的左边为参考，右边控件的Left以左边控件的right为参考。在XCode8.0之前不会报出红色箭头和绿色箭头，运行之后却发现不是我们想要的效果。XCode8.0后有绿色箭头警报，我们更新布局之后发现，控件的大小和位置也不是我们想的那样，是因为此时的左边控件的方程组为
式10
右边控件的方程组为
式11
可以看出此时为变相的系数矩阵秩不满。因为两个方程组有一个式子完全相同，相当于多了一个未知数
其实在我们经验性地约束控件时，我们是在潜意识地运用线性代数避免此类情况的发生，我们通常让一个控件的方程组右边等于常数或依赖于屏幕的长宽。还是以上一个例子为例，比如我们的左边控件的right以屏幕为参考，式10的第三个方程式变换为x+w=W-c3.此时就可以完全确认左边控件大小位置的唯一特解。右边控件的约束不变，但是此时的式11第三个方程式中的x此时不再是未知数，而是一个常数，即右边控件也有大小位置的唯一特解。
此数学建模算法对于数学基础不是很好的读者可能会造成一定的困扰，但是对于数学基础良好的读者能够在实际编程中瞬间理解本文的中心思想，同时数学基础不是很好的读者在阅读本文两至三次后，理解了本文的中心思想后，会有一种恍然大悟的感觉。同时作者也尽力以通俗的语言去解释本观点。
作者的一位同事在一次复杂布局中，遇到了麻烦，但是在作者详细讲述本文观点后，非常顺利地完成了布局约束。本文为作者多年工作经验总结，引用本文观点请注明出处或联系作者，未经允许不得转载，请尊重作者的劳动。
网友评论