iOS开发之翻译Autolayout(3)--瞄点标记和视觉格式语法

Anchor notation(瞄点符号)

继上篇《在代码中使用Autolayout》 <br >
这篇主要讲“Anchor notation”和“Visual Format Syntax”
所有代码均在github上

在iOS9中,用Anchor nonation做我之前做过的任何事情都是有可能的,创建同样的八个约束,然后把它们添加到同样的view上,使用一种更加紧凑的标记。之前的nonation有一些奇特的特点,那就是一个NSLayoutConstraint初始化方法可以创建任何约束。新的Anchor notation采用了一种相反的方式,它聚焦在简洁上,但是却牺牲了突出点。为了做到这一点,除了聚焦于约束上,它也聚焦在约束关联的属性上。这些属性被描述为UIViewanchor属性。

  • topAnchor, bottomAnchor
  • leftAnchor, rightAnchor,leadingAnchor, trailingAnchor
  • centerXAnchor, centerYAnchor
  • firstBaselineAnchor, lastBaselineAnchor <br >

所有的瞄点值都是NSLayoutAnchor的实例(其中一些也是NSLayoutAnchor子类的实例)。建立约束的方法都是NSLayoutAnchor的实例化方法,而且有很多这样的方法,选择哪一个取决于你的约束需要具体描述的另一个anchor(当然constant保持默认0,multiplier默认保持1),constant或者multiplier或者他们两个,都取决于你对以下关系的选择:

  • constraintEqualToConstant:
  • constraintGreaterThanOrEqualToConstraint:
  • constraintLessThanOrEqualConstant:
  • constraintEqualToAnchor:
  • constraintGreaterThanOrEqualToAnchor:
  • constraintLessThanOrEqualToAnchor:
  • constraintEqualToAnchor:constant:
  • constraintGreaterThanOrEqualToAnchor:constant:
  • constraintLessThanOrEqualToAnchor:constant:
  • constraintEqualToAnchor:multiplier:
  • constraintGreaterThanOrEqualToAnchor:multiplier:
  • constraintLessThanOrEqualToAnchor:multiplier:
  • constraintEqualToAnchor:multiplier:constant:
  • constraintGreaterThanOrEqualToAnchor: multiplier: constant:
  • constraintLessThanOrEqualToAnchor: multiplier: constant:

所有的这些当我描述的时候你可能挺起来非常细心,但是当你在实例中看他们的时候,你会很欣赏这些紧凑的注解所带来的好处。他们是如此地好写,(尤其多亏了Xcode的代码自动补全)如此地好读,如此地好维护。这些新的notation在和activateContraints:方法相连接的时候是非常方便的,因为我们不用去关心每一条约束被明确地添加到那个view上:(就像下面那样:)

  NSLayoutAnchor.activateContraints([
    v2.leadingAnchor.constraintEqualToAnchor(v1.leadingAnchor),
    v2.trailingAnchor.constraintEqualToAnchor(v1.trailingAnchor),
    v2.topAnchor.constraintEqualToAnchor(v1.topAnchor),
    v2.heightAnchor.constraintEqualToConstant(10),
    v3.widthAnchor.constraintEqualToConstant(20),
    v3.heightAnchor.constraintEqualToConstant(20),
    v3.trailingAnchor.constraintLessThanOrEqualToAnchor(v1.trailingAnchor),
    v3.bottomAnchor.constraintEqualToAnchor(v1.bottomAnchor)
  ])

这八行代码中的八个约束,加上包围的acitvateConstraints方法调用来把这些约束落实到我们的interface上。这儿并没有严格需要将所有的约束一下子activate,但是最好这样做。

Visual format notation(视觉符号格式)

另一种来缩写创建约束的方式是使用某种基于文本的速记,叫做视觉符号格式。这个可以让你同步的描述多种约束。它也是特别具体的当你安排一系列竖直方向或者水平方向的view的时候。我会以一个很简单的例子开头:
V:|[v2(10)]

在上述表达中,V:代表论述下的vertical deimension,另一半选择是H:,它也是默认的(因此准许不指明尺寸)。一个view的名字出现在括号里,同时一个竖直符号表示superview,所以这里我们正在描绘v2的top edge顶住它superview的top edge。数字的符号表示参数,同时数字符号伴同view的名字设置view的尺寸,所以在这里我们设置v2的height为10。
使用visual format,你不得不提供一个字典来装上面提到的view的名字字符。例如:使用之前表达的字典可以为["v2":v2]。所以这里还有之前表达的另一种方式,使用visual format的简称。

  let d = ["v2":v2, "v3":v3]
  NSLayoutConstraint.activateContraints([
    NSLayoutConstraint.constraintWithVisualFormat("H:|[v2]|", options: [], merics: nil, views: d),
    NSLayoutConstraint.constraintWithVisualFormat("V:|[v2(10)]", options: [], merics: nil, views: d),
    NSLayoutConstraint.constraintWithVisualFormat("H:[v3(20)]|", options: [], merics: nil, views: d),
    NSLayoutConstraint.constraintWithVisualFormat("V:[v3(20)]|", options: [], merics: nil, views: d)
    ].flatten().map{$0})

这个例子创建了和之前例子相同的约束,但是却使用了五行命令却不是八行。(constraintWithVisualFormat: 方法产生了一个constraints的数组,所以字面上的数组是一个装着约束数组的数组,但是activateContraintsiule 期望只有一个数组约束,所以我筛选出我想要的数组)
visual format语法将其自身展示到极致当多种的view沿着同一纬度布置彼此。在那种情况下,你可以减小很多压力。(一些约束由同一个visual format生成)这种语法,在一中程度上也被限制在乐意表达的语法中。同时他也隐藏了约束的数量和产生的约束的特征。同时就我而言,我发现当使用visual format语法的时候比完整地表达出每一个约束更容易犯错。但是,你还是希望能够熟悉visual format,不仅仅是为了隐藏具体描述某个约束的细节。
当你使用visual format语法的时候这里有一些需要深入的事情:

  • metrics: 参数是一个有用数字的字典。这可以让你使用一个visual format string的名字。
  • options: 参数是一个bitmask(NSLayoutFormatOptions), 主要让你做一些事情,例如添加alignments。alignments被应用在所有在visual format中提到的views。
  • 为了具体地别是两个连续的view之间的距离,使用连字符-环绕在数字符号周围,像:“[v1]-[20]-[v2]”。数字可以选择性的使用括号[]包围。
  • 一个在括号中的数字可能会地位高于一个同等的或者不同等的操作符。同时也可以跟随一个@符号表示priority。被逗号,分割的多种数字,也可以出现在参数中。例如[v1(>=20@400, <=30)]<br >

想要了解更多关于visual format语法,请查看"Apple's Auto Layout Guide"一章中的"Visual Format Syntax"

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

推荐阅读更多精彩内容