IOS6之AutoLayout（五）

原創 我的無力双臂 2020-02-25 11:31


IOS6之AutoLayout（一）

http://blog.csdn.net/zfpp25_/article/details/8861221

IOS6之AutoLayout（二）

http://blog.csdn.net/zfpp25_/article/details/8861855

IOS6之AutoLayout（三）

http://blog.csdn.net/zfpp25_/article/details/8861958

IOS6之AutoLayout（四）

http://blog.csdn.net/zfpp25_/article/details/8862040

IOS6之AutoLayout（五）

http://blog.csdn.net/zfpp25_/article/details/8862157



AutoLayout和Autoresizing Mask的區別

Autoresizing Mask是我們的老朋友了…如果你以前一直是代碼寫UI的話，你肯定寫過UIViewAutoresizingFlexibleWidth之類的枚舉；如果你以前用IB比較多的話，一定注意到過每個view的size inspector中都有一個紅色線條的Autoresizing的指示器和相應的動畫縮放的示意圖，這就是Autoresizing Mask。在iOS6之前，關於屏幕旋轉的適配和iPhone，iPad屏幕的自動適配，基本都是由Autoresizing Mask來完成的。但是隨着大家對iOS app的要求越來越高，以及已經以及今後可能出現的多種屏幕和分辨率的設備來說，Autoresizing Mask顯得有些落伍和遲鈍了。AutoLayout可以完成所有原來Autoresizing Mask能完成的工作，同時還能夠勝任一些原來無法完成的任務，其中包括：
  • AutoLayout可以指定任意兩個view的相對位置，而不需要像Autoresizing Mask那樣需要兩個view在直系的view hierarchy中。
  • AutoLayout不必須指定相等關係的約束，它可以指定非相等約束（大於或者小於等）；而Autoresizing Mask所能做的佈局只能是相等條件的。
  • AutoLayout可以指定約束的優先級，計算frame時將優先按照滿足優先級高的條件進行計算。
總結
Autoresizing Mask是AutoLayout的子集，任何可以用Autoresizing Mask完成的工作都可以用AutoLayout完成。AutoLayout還具備一些Autoresizing Mask不具備的優良特性，以幫助我們更方便地構建界面。

iOS6中新加入了一個類：NSLayoutConstraint，一個形如這樣的約束

  • item1.attribute = multiplier ⨉ item2.attribute + constant
對應的代碼爲
<div class="dp-highlighter bg_cpp" style="font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; width: 936.53125px; overflow: auto; padding-top: 1px; opacity: 0.6; margin: 18px 0px !important; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/cpp.gif); background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: 100% 0%; background-repeat: no-repeat;"><div class="bar" style="padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108);"><strong>[cpp]</strong> <a target=_blank href="http://blog.csdn.net/lizhongfu2013/article/details/8862157#" class="ViewSource" title="view plain" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-image: none; background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">view plain</a><a target=_blank href="http://blog.csdn.net/lizhongfu2013/article/details/8862157#" class="CopyToClipboard" title="copy" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-image: none; background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">copy</a><a target=_blank href="http://blog.csdn.net/lizhongfu2013/article/details/8862157#" class="PrintSource" title="print" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-image: none; background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">print</a><a target=_blank href="http://blog.csdn.net/lizhongfu2013/article/details/8862157#" class="About" title="?" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 0px; margin: 0px 10px 0px 0px; font-size: 9px; background-image: none; background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">?</a><div style="position: absolute; left: 591px; top: 1151px; width: 29px; height: 15px; z-index: 99;"></div></div></div><ol start="1" class="dp-cpp" style="padding: 0px; border: none; position: relative; list-style-position: initial; list-style-image: initial; color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important;"><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">[NSLayoutConstraint constraintWithItem:button  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">                             attribute:NSLayoutAttributeBottom  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">                             relatedBy:NSLayoutRelationEqual  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">                                toItem:superview  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">                             attribute:NSLayoutAttributeBottom  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">                            multiplier:1.0  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">                              constant:-padding]  </span></li></ol></div>
這對應的約束是“button的底部（y） ＝ superview的底部 －10”。

添加

在創建約束之後，需要將其添加到作用的view上。UIView（當然NSView也一樣）加入了一個新的實例方法：
  • -(void)addConstraint:(NSLayoutConstraint *)constraint;
用來將約束添加到view。在添加時唯一要注意的是添加的目標view要遵循以下規則：
  • 對於兩個同層級view之間的約束關係，添加到他們的父view上



對於兩個不同層級view之間的約束關係，添加到他們最近的共同父view上：




對於有層次關係的兩個view之間的約束關係，添加到層次較高的父view上：



刷新


可以通過-setNeedsUpdateConstraints和-layoutIfNeeded兩個方法來刷新約束的改變，使UIView重新佈局。這和CoreGraphic的-setNeedsDisplay一套東西是一樣的～

Visual Format Language 可視格式語言

UIKit團隊這次相當有愛，估計他們自己也覺得新加約束的API名字太長了，因此他們發明了一種新的方式來描述約束條件，十分有趣。這種語言是對視覺描述的一種抽象，大概過程看起來是這樣的： accept按鈕在cancel按鈕右側默認間距處 








生成的字典爲 
{ acceptButton = ""; cancelButton = ""; }
當然，不嫌累的話自己手寫也未嘗不可。現在字典啊數組啊寫法相對簡化了很多了，因此也不復雜。關於Objective-C的新語法，可以參考我之前的一篇WWDC 2012筆記：WWDC 2012 Session筆記——405 Modern Objective-C。 在view名字後面添加括號以及連接處的數字可以賦予表達式更多意義，以下進行一些舉例：
  • [cancelButton(72)]-12-[acceptButton(50)]
    • 取消按鈕寬72point，accept按鈕寬50point，它們之間間距12point
  • [wideView(>=60@700)]
    • wideView寬度大於等於60point，該約束條件優先級爲700（優先級最大值爲1000，優先級越高的約束越先被滿足）
  • V:[redBox][yellowBox(==redBox)]
    • 豎直佈局，先是一個redBox，其下方緊接一個寬度等於redBox寬度的yellowBox
  • H:|-[Find]-[FindNext]-[FindField(>=20)]-|
    • 水平佈局，Find距離父view左邊緣默認間隔寬度，之後是FindNext距離Find間隔默認寬度；再之後是寬度不小於20的FindField，它和FindNext以及父view右邊緣的間距都是默認寬度。（豎線'|‘ 表示superview的邊緣）


佈局動畫

動畫是UI體驗的重要部分，更改佈局以後的動畫也非常關鍵。說到動畫，Core Animation又立功了..自從CA出現以後，所有的動畫效果都非常cheap，在auto layout中情況也和collection view裏一樣，很簡單（可以參考WWDC 2012 Session筆記——219 Advanced Collection Views and Building Custom Layouts），只需要把layoutIfNeeded放到animation block中即可～


[UIView animateWithDuration:0.5 animations:^{
    [view layoutIfNeeded];
}];


轉載請保留，原文鏈接：http://write.blog.csdn.net/postedit/8862157

若發現有不合適或錯誤之處，還請批評指正，不勝感激。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

WWDC2016 Session筆記 - Xcode 8 Auto Layout新特性

目錄 1.Incrementally Adopting Auto Layout 2.Design and Runtime Constraints 3.NSGridView 4.Layout Feedback Loop Debug

HelloWord杰少 2020-06-21 07:02:49

Attribute Unavailable: First baseline layout attribute on iOS versions prior to 8.0

Attribute Unavailable: First baseline layout attribute on iOS versions prior to 8.0,這是由於這個constraint支持iOS8以後的版本，所以導致的，並

fengSane 2020-06-16 07:45:49

學習 iOS Autolayout的一點經驗

隨着IOS系統的不斷推新，IOS開發的方式也將發生不少變化，就以IOS開發中的Autolayout來說，AutoLayout在IOS6就已經出來了，但到到目前爲止，IOS8已經出來小半年了，在開發中AutoLayout還是沒有被徹底使用，

Boz_blog 2020-06-07 16:20:25

IOS6之AutoLayout（二）

我的無力双臂 2020-02-25 11:31:13

IOS6之AutoLayout（三）

我的無力双臂 2020-02-25 11:31:13

IOS6之AutoLayout（四）

我的無力双臂 2020-02-25 11:31:12

IOS6之AutoLayout（一）

我的無力双臂 2020-02-25 11:31:12

Masonry介紹與使用實踐

Nvermore_ 2020-02-24 17:26:57

自動佈局之autoresizingMask使用詳解（Storyboard&Code）

数青峰 2020-02-22 18:54:27

Android AutoLayout全新的適配方式 堪稱適配終結者

鸿洋_ 2020-02-21 04:03:25

Masonry介紹與使用實踐：快速上手Autolayout

high_flying_boy 2020-02-20 23:40:51

NSLayoutConstraint-代碼實現自動佈局的函數用法說明

rainbownight 2019-07-19 13:48:10

IOS開發系列——Masonry手寫Autolayout專題【整理，部分原創】

Masonry手寫Autolayout專題   Masonry常規開發指導整理自此篇文檔（可別說我轉載不註明出處哦，^_^），後面加入了筆者在實際開發使用過程中遇到過的一些問題，希望對你有所幫助。 Masonry介紹與使用實踐：快速

junbaozi 2020-07-05 08:49:59

iOS 8 AutoLayout與Size Class有感筆記

iOS8和iPhone6發佈已經過去蠻久了,廣大的果粉終於迎來了大屏iPhone,再也不用糾結爲大屏買三星舍蘋果了…但是對於iOS開發人員來說,迎來了和Android開發開發一樣的問題—>各種屏幕的適配(是不是可以要求加工資的節奏).對於

想追上的大牛 2020-07-03 09:11:54

autolayout 心得

一，在stroyBoard中實現自動佈局的核心原理 二，在代碼中實現自動佈局

LeaderQiu 2020-07-02 04:02:57