前端约束设置的一般性研究及其数学建模

         笔者自大学毕业后即开始从事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此时不再是未知数,而是一个常数,即右边控件也有大小位置的唯一特解。

     此数学建模算法对于数学基础不是很好的读者可能会造成一定的困扰,但是对于数学基础良好的读者能够在实际编程中瞬间理解本文的中心思想,同时数学基础不是很好的读者在阅读本文两至三次后,理解了本文的中心思想后,会有一种恍然大悟的感觉。同时作者也尽力以通俗的语言去解释本观点。

     作者的一位同事在一次复杂布局中,遇到了麻烦,但是在作者详细讲述本文观点后,非常顺利地完成了布局约束。本文为作者多年工作经验总结,引用本文观点请注明出处或联系作者,未经允许不得转载,请尊重作者的劳动。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,176评论 5 469
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,190评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,232评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,953评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,879评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,177评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,626评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,295评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,436评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,365评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,414评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,096评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,685评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,771评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,987评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,438评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,032评论 2 341

推荐阅读更多精彩内容