自動(dòng)布局是蘋果為了適配不同大小屏幕而推出一種技術(shù)方案,旨在實(shí)

自動(dòng)布局是蘋果公司為了適配不同大幕而推出的一種技術(shù)方案,旨在實(shí)現(xiàn)一次編寫(xiě)布局界面I,自動(dòng)適應(yīng)所有屏幕布局。在這之前多屏幕適配需要跟進(jìn)不同屏幕分辨率尺寸計(jì)算控件的坐標(biāo),大幕發(fā)生旋轉(zhuǎn)變化后還需要重新計(jì)算,開(kāi)發(fā)多屏適配需要花費(fèi)很多人力時(shí)間成本,而使用自動(dòng)布局技術(shù)可以非常容易方便的解決這些問(wèn)題。自動(dòng)布局同時(shí)還具有支際化根據(jù)內(nèi)容動(dòng)態(tài)調(diào)整布局支持動(dòng)態(tài)字體的獨(dú)有的優(yōu)點(diǎn)本章簡(jiǎn)單說(shuō)明了自動(dòng)布局的原理介紹了NSStackVew的概念內(nèi)容視圖中CCR的概念說(shuō)明Xcoe對(duì)自動(dòng)布局的支持工具的使用說(shuō)明,自動(dòng)布局的多種解決方案的選擇原則常見(jiàn)的自動(dòng)布局的實(shí)例,NSScrllView中如何使用自動(dòng)布局,通過(guò)代碼使用自動(dòng)布局的多種方式局的常見(jiàn)錯(cuò)誤。AutoLayout原在tLayt之前傳統(tǒng)的布局方式是基于Frme來(lái)做控件的界面布局的即設(shè)置控件在父視圖中的起始坐標(biāo)點(diǎn)rg(x)和控件的大e(tegt)。為了適應(yīng)屏幕變化或者windw窗口調(diào)整大小,還需要Aoeizig屬性設(shè)置,確定子控件在父視圖中的相對(duì)位置關(guān)系以及高和寬是否自適應(yīng)伸縮,關(guān)于Aoeizig的不同屬性參數(shù)請(qǐng)參考View和Windw章節(jié)中相關(guān)的描述。自動(dòng)布局是一種約束關(guān)系描述的是控件與父視圖或與最近相鄰的元間相對(duì)位置關(guān)系,控件的FrmetLayt引擎在視圖顯示時(shí)自動(dòng)計(jì)算。比如下面的xtView控件4個(gè)邊在父視圖中的相對(duì)位置關(guān)系為:距頂部p為40像素,底部tm為120像素,左邊為0,右邊為6。而根據(jù)這4個(gè)約束關(guān)系,一旦父視圖的位置和大小固定,Aulaot在運(yùn)行時(shí)能自動(dòng)計(jì)算出xView的rame,即起始坐標(biāo)和大小。如果用戶拉伸視圖的windw窗口,父視圖的大小位置變化后xView的Frame又會(huì)被重新計(jì)算,因此不管窗口如何變化xView距離父視圖4個(gè)方向的相對(duì)位置距離不變。自動(dòng)布局從數(shù)學(xué)角度看是在元素間定義了一組屬性的約束關(guān)系形式上是通過(guò)等式方程,等式方程和優(yōu)先級(jí)約束來(lái)確定了運(yùn)行時(shí)布局的自動(dòng)調(diào)整。把父視圖用p表示,子視圖用s表示,則上面TextView跟父視圖的關(guān)系可以s.top=p.top+40p.bottom=s.bottom+120s.left=p.left+60p.rigth=s.right+60p.frame=(0,0,300,400)通過(guò)上面5個(gè)關(guān)系條件,就可以唯一確定TextView的frame,實(shí)現(xiàn)了UI的自動(dòng)布局自動(dòng)更通用的自動(dòng)布局關(guān)系描述定義Item1.Attribute=Multiplier*Item2.Attribute+Constant(其中關(guān)系符不限于等號(hào)=,還可以為其中Item1,Item2代表了UIRelationship包括=,>=,<=Multiplier為比例系數(shù),通常默認(rèn)為1。如果為0則表示Item1的某屬性Constant自動(dòng)優(yōu)先為了解決多個(gè)約束條件之間的引出了優(yōu)先級(jí)的概念即在多個(gè)約束條件中優(yōu)先滿足優(yōu)級(jí)最高的某個(gè)條件最大優(yōu)先級(jí)為0。button1.width=80button2.width>=button1.widthbutton2.trailing=parentView.trailing-上面第一個(gè)條件規(guī)定了ton1的寬度為0,第二個(gè)條件約束了ton2的寬度大于等于on1,第三個(gè)條件約束了bton2的右邊邊距跟父視圖view為20像素。如果不斷拉寬父視圖,這2個(gè)約束條件可以同時(shí)滿足沒(méi)有任何問(wèn)題。如果不斷縮小父視圖的寬度,則第二個(gè)約束必然會(huì)不能滿足,這時(shí)候說(shuō)第二個(gè)條件和第三個(gè)條件發(fā)生了,解決的辦法是給第二個(gè)約束設(shè)置比第三個(gè)條件更小的優(yōu)先級(jí),這樣就會(huì)按第三個(gè)條件去計(jì)算ton2的寬度。IntrinsicContent對(duì)于文本/等一些視圖控件,可以通過(guò)其內(nèi)在content推算出控件的大小,不是所有的控件都有IntrinsicContentSize,按鈕,文本label,文字輸入TextField,TextView,ImageView都可以根據(jù)基于控件的內(nèi)容content,有2個(gè)特定的約束:contenthugging收縮約束和contentcompression擴(kuò)張約束,這2個(gè)約束簡(jiǎn)稱為CHCR。IntrinsicHeight代表內(nèi)容的高,IntrinsicWidth代表內(nèi)容的contentcompression的約束條件View.height>=IntrinsicHeightView.width>=IntrinsicWidthcontenthugging的約束條件：View.height<=IntrinsicHeightView.width<=IntrinsicWidth從這幾組約束來(lái)看,如果需要完整的顯示內(nèi)容就需要contentcompression的優(yōu)先級(jí)盡量高,而如果需要盡量顯示的緊湊一些占用空間小一些可以將contenthugging優(yōu)先級(jí)盡量設(shè)置高一StakVew是自動(dòng)布局的優(yōu)化升級(jí)技術(shù),可以把自動(dòng)布局比作一個(gè)大箱子,里面堆放了各種小UI控件的布局設(shè)置而StacVe的出現(xiàn)可以想象成小箱子允許整體的自動(dòng)布局可以嵌套包括小箱子每個(gè)小箱子可以有自己的局部自動(dòng)布局設(shè)置小箱子之間可以嵌套。StackView可以根據(jù)布局元素的方向分為水平和垂直布局2種StackViewOrientation布局方向:Vertical垂直/Hirozontal水Alignment對(duì)其方式:布局方向?yàn)榇怪睍r(shí)為頂部/居中/頂部對(duì)齊;水平時(shí)為左中右對(duì)齊Spacing間距:布局中每個(gè)元素間的空白AutoLayout-沒(méi)有StackView:所有的UI控件都是View的直接子視圖,AutoLayout-有StackView:View布局有了分級(jí)關(guān)系,整個(gè)View包括一個(gè)直接的下級(jí)StackView，StackView分為上中下3個(gè)部分：最上面的幾個(gè)控件整體在Pro?leStackView內(nèi),左邊是一個(gè)ImageView,右邊是一個(gè)NameStackView,NameStackView又分為上下FNameStackView和LNameStackView;中間部分為一個(gè)最下面為ButtonStackView,里面包括3個(gè)按鈕控件Xcode中的AutoLayout設(shè)新建項(xiàng)目中默認(rèn)是使用atayt如果不想使用atayt而使用傳統(tǒng)的布局可以去掉下圖右邊面板中atayt勾選選擇界面上的多個(gè)控件,點(diǎn)擊底部Stack按鈕可以將這些控件放置在StackView里面管理布局。如果需要改變StackView的方向,從右邊屬性面板Orientation中選擇切換。如果需要去掉StackView,從Editor菜單選擇Unembed點(diǎn)擊gn工具按鈕出現(xiàn)g面板,上面有9種約束關(guān)系設(shè)置。其中前面7種需要同時(shí)至少選擇2個(gè)控件后才能允許設(shè)置,其中最后2個(gè)Hoizonallyinotaier和erialyinotaoer是約束選中的控件與父視圖的關(guān)系。每種關(guān)系都可以通過(guò)右邊的輸入框輸入一個(gè)costant常量,如果不輸入默認(rèn)為0。先選中控件再點(diǎn)擊g呼出工具面板在g面板上選擇約束關(guān)系輸入ct值最后點(diǎn)擊Ag面板底部的ddCostrants按鈕完成約束的添加。添加完成的約束會(huì)顯示在左邊xib文件導(dǎo)航區(qū),點(diǎn)擊這個(gè)約束可以在右邊屬性面板看到約束關(guān)系可以對(duì)Iem和SecondItem通過(guò)下拉框修改屬性或者對(duì)調(diào)交換和Second元Pin面板最上部用來(lái)設(shè)置選擇的控件四個(gè)邊o,botm,leadig,trailing距離父視圖或最近的控件之間的間距。對(duì)需要設(shè)置的屬性點(diǎn)擊紅色虛線后表示設(shè)置此方向的屬性Width和Heigth用來(lái)設(shè)置控EqualWidths:選中的至少2個(gè)控件,約定它們的寬度相同EqualHeigths:選中的至少2個(gè)控件,約定它們的高度相同AspectRatio:選中控件,約定高度和寬度的比例關(guān)系。g:可以下拉選擇不同的屬性類似通過(guò)面板設(shè)置的各種屬性因此這里可以代替大部前面lig面板中大部分的約束設(shè)置的操作。分別針對(duì)選中的控件或所有的控件提供一組菜單功能用于更新Frame更束自動(dòng)增加缺少的約束基于系統(tǒng)建議重置約束刪除約束。UpdateFrame：基于目前的約束,更新UI的Frame,使用這個(gè)菜單需要注意如果約束不足或不正確會(huì)使UI控件或出現(xiàn)在不合適的位置。UpdateConstraints：基于目前的位置,更新UI的Constraints,這個(gè)菜單常用在在xib中拖動(dòng)調(diào)整ClearConstraints:如果覺(jué)得約束有問(wèn)題,可以清除AutoLayout的多種解決方需求:設(shè)置TextView的Autolayout使其在父視圖SuperView中居中顯示方案1:設(shè)置TextView4個(gè)邊margin,左右相距50個(gè)像素,頂部和底部各121像素ScrollView.leading=SuperView.leading+50SuperView.trailing=ScrollView.trailing+50ScrollView.top=SuperView.top+121SuperView.bottom=ScrollView.bottom+121方案2:設(shè)置xView的左邊相距父視圖左邊50個(gè)像素,頂部距父視圖頂部121像素xView的X方向中心和父視圖enerX相同xView的Y方向中心和父視圖eeY相同。(即水平和垂直方向居中)ScrollView.leading=SuperView.leading+50ScrollView.top=SuperView.top+121ScrollView.centerX=SuperView.centerXScrollView.centerY=方案3：設(shè)置xtView的寬度為父視圖寬度減去50*2個(gè)像素,高度為父視圖高度減去121*2像素xtView的X方向中心和父視圖enerX相同xtView的Y方向中心和父視圖enerY相同。ScrollView.width=SuperView.width-100ScrollView.height=SuperView.height-242ScrollView.centerX=centerXScrollView.centerY=可以看出對(duì)于一種問(wèn)題會(huì)有多種Autolayout約束解決方案,從前面的約束表達(dá)Item1.Attribute=Multiplier*Item2.Attribute+Constant來(lái)看,這個(gè)表達(dá)式可以有多種等價(jià)的交換item的位置：Item2.Attribute＝Multiplier*Item1.Attribute乘法因子變?yōu)槌ǎ篒tem2.Attribute＝Item1.Attribute/0.5某些屬性的等價(jià)替換:leading使用left，trailing使用right選擇不同的參照物:比如說(shuō)要使某個(gè)元素居中顯示既可以選擇父視圖為參照一個(gè)居中的元素為參考。具體使用哪一種約束是最優(yōu)的方案,每個(gè)人的看法也不盡相同。一般的原則和建議如下對(duì)每個(gè)UI組件,按語(yǔ)言閱讀順序從左到右或從右到左,即先設(shè)置leading,在設(shè)置trailing,不要和right屬性。從頂部top到底部bottom設(shè)置屬性約束對(duì)UI的4個(gè)邊距設(shè)置參考物為最近的元素,沒(méi)有相鄰UI元素參考時(shí)使用父視對(duì)Constant使用正整數(shù),即＋加上某個(gè)數(shù),而不是減去某個(gè)Multiplier因子使用乘法而不是除法AutoLayout使用示通過(guò)各種AutoLayout實(shí)例來(lái)更好地理解這個(gè)技術(shù)的使用注:沒(méi)有item而直接使用屬性的,默認(rèn)item為superView,比如top等價(jià)于設(shè)置約束如下Button.leading=leading+Button.top=top+DynamicButton.leading=Button.trailing+DynamicButton.top=top+DynamicButton.width=trailing=DynamicButton.trailing+Button1.top=top+Button1.leading=leading+Button2.leading=Button1.trailing+Button2.top=top+Button2.width=Button3.width=Button3.top=top+Button3.leading=Button2.trailing+trailing=Button3.trailing+(1)Name.leading=leading+(2)Name.top=top+TextField.baseline=TextField.leading=Name.trailing+TextField.top=top+trailing=TextField.trailing+TextLabel.leading=leading+TextLabel.top=top+22TextLabel.top≥top+TextLabel.baseline=TextTextField.leading=TextLabel.trailing+TextField.top=top+20TextField.top≥top+trailing=TextField.trailing+在上面第2個(gè)約束中設(shè)置o=top 優(yōu)先級(jí)別為 。第個(gè)約束為xtaelp≥p+2,默認(rèn)優(yōu)先級(jí)為000,是最高的。extael可以在運(yùn)行時(shí)修改字體,修改大字體后ael高度變大,此時(shí)第2個(gè)和第個(gè)約束不能同時(shí)滿足,優(yōu)先采用高優(yōu)先級(jí)。因此當(dāng)字體變大時(shí)看到的效果如下:Name:.leading=leading+FTextField.leading Name:.trailing+FTextField.top=top+trailing=FTextField.trailing+Name:.baseline=FTextField.baselineMoiddleName:.leading=leading+MTextField.leading=MoiddleName:.trailing+MTextField.top=FTextField.bottom+trailing=MTextField.trailing+MoiddleName:.baseline=MTextLastName:.leading=leading+LTextField.leading=LastName:.trailing+LTextField.top=MTextField.bottom+trailing=LTextField.trailing+LastName:.baseline=LTextMTextField.width=FTextLTextField.width=MTextLabel.leading=leading+Label.top=top+22Label.top≥top+FTextField.leading Label.trailing+FTextField.top=top+20FTextField.top≥top+trailing=FTextField.trailing+FTextField.baseline=MiddleLabel.leading=leading+MiddleLabel.top=Label.bottom+14MiddleLabel.top≥Label.bottom+MTextField.leading=MiddleLabel.trailing+MTextField.top=FTextField.bottom+8MTextField.top≥FTextField.bottom+MTextField.width=FTexttrailing=MTextField.trailing+MTextField.baseline=MiddleLastLabel.leading=leading+LastLabel.top=MiddleLabel.bottom+14LastLabel.top≥MiddleLabel.bottom+LTextField.leading=LastLabel.trailing+LTextField.top≥MTextField.bottom+LTextField.top=MTextField.bottom+10LTextField.width=MTexttrailing=LTextField.trailing+LTextField.baseline=Last修改Label字體后的效果,3個(gè)文本輸入框?qū)挾缺３炙悸?在2個(gè)ButtonView之間填充3個(gè)CustomView(NSView)做為輔助,3個(gè)CustomView寬度相CustomView1.leading=CustomView1.top=top+CustomView1.heigth=Button1.leading=CustomView1.trailing+Button1.top=top+CustomView2.leading=Button1.trailing+CustomView2.top=top+CustomView2.width=CustomCustomView2.heigth=Button2.leading=CustomView2.trailing+Button2.top=top+Button2.width=CustomView3.leading=Button2.trailing+CustomView3.top=top+CustomView3.width=CustomCustomView3.heigth=trailing=Custom運(yùn)行簡(jiǎn)單的StackStackView.leading=leading+trailing=StackView.trailing-StackView.top=bottom=Stack復(fù)雜界面未使用StackImageView.leading=leading+ImageView.top=top+ImageView.width=ImageView.height=Name.leading=ImageView.trailing+8FTextField.leading=Name.trailing+FTextField.baseline=FTextField.top=top+trailing=TextField.trailing+LastName.leading=ImageView.trailing+LTextField.leading=LastName.trailing+LTextField.baseline=LastLTextField.top=TextField.bottom+trailing=LTextField.trailing+ScrollView.leading=leading+trailing=ScrollView.trailing+ScrollView.top=ImageView.bottom+Button1.leading=leading+Button1.top=ScrollView.bottom+bottom=Button1.bottom+Button2.leading=Button1.trailing+Button2.top=ScrollView.bottom+bottom=Button2.bottom+Button2.width=Button3.leading=Button2.trailing+Button3.top=ScrollView.bottom+bottom=Button3.bottom+trailing=Button3.trailing+Button3.width= StackView.leading=leading+trailing=StackView.trailing+StackView.top=top+bottom=StackView.bottom+imageView.width=可以看出同樣的UI布局使用NSStackView可以大幅度減少約束的設(shè)置,因此在復(fù)雜布局中推新建xib文件,拖放一個(gè)ScrllView控件到視圖,設(shè)置其居中,使用Pin工具設(shè)置它的4個(gè)邊距約束如圖示:ScrollView.leading=leading+53ScrollView.top=top+66trailing=ScrollView.trailing+53bottom=ScrollView.bottom+66設(shè)置ScrollView的內(nèi)容View的約束,距離頂部和左邊都是,添加約束后xib文件導(dǎo)航樹(shù)右邊出現(xiàn)了紅色告警,暫時(shí)忽略等添加完ImageView后自動(dòng)會(huì)View.top=topView.leading=leading從控件工具箱拖一個(gè)ImageView到ScrollView的內(nèi)容視圖Vew上,設(shè)置mageView約束距離4個(gè)邊都是,點(diǎn)擊Ad4ostraints完成,這時(shí)候紅色告警ImageView.top=bottom=ImageView.bottomImageView.leading=leadingtrailing=ImageView.trailing選取一張比較大的添加到工程,給mageView設(shè)置image屬性為新加的名,運(yùn)行工程發(fā)現(xiàn)可以在水平和垂直2個(gè)方向拖動(dòng)。注意：上面每個(gè)約束屬性前面沒(méi)有item的默認(rèn)表示item為SuperView,即bottom表示Super總結(jié)一下NSScrollView的使用xib設(shè)置約束的步驟設(shè)置NSScrollView4個(gè)方設(shè)置NSScrollView的contentView的top和leading與父視圖距離都是拖放需要的UI控件到NSScrollView的contentView上,設(shè)置其距離父視圖4個(gè)方向的邊距都0通過(guò)代碼設(shè)置Cocoa有兩種方式通過(guò)代碼使用NSLayoutConstraintNSLayoutConstraint類中屬性,分別對(duì)應(yīng)了約束關(guān)系表達(dá)式中@property@propertyNSLayoutPrioritypriority;@property(readonly,assign)id @property(readonly)NSLayoutAttribute @property(readonly)NSLayoutRelationrelation;@property(nullable,readonly,assign)idsecondItem;@property(readonly)NSLayoutAttributesecondAttribute;@property(readonly)CGFloatmultiplier;@propertyCGFloat使用代碼構(gòu)造的NSLayoutConstraint實(shí)例等價(jià)與前面的關(guān)系表Item1.Attribute=Multiplier*Item2.Attribute+下面是一個(gè)例子,新建一個(gè)currentView實(shí)例,構(gòu)造其與父視圖4個(gè)邊的距離都是NSView*currentView=[[NSViewalloc]init];[self.contentViewaddSubview:currentView];[self.viewsetTranslatesAutoresizingMaskIntoConstraints:NO];NSLayoutConstraint*viewTop=[NSLayoutConstraintconstraintWithItem:currenNSLayoutConstraint*viewBottom=[NSLayoutConstraintconstraintWithItem:curNSLayoutConstraint*viewLeading=[NSLayoutConstraintconstraintWithItem:cuNSLayoutConstraint*viewTrailing=[NSLayoutConstraint[self.viewaddConstraint:viewTop];[self.viewaddConstraint:viewBottom];[self.viewaddConstraint:viewLeading];}使用NSLayoutConstraint類來(lái)添加約束的步驟首先將子視圖使用addSubview添加到父視圖設(shè)置父視圖的raatestreszgMasktCats為N否則系統(tǒng)會(huì)根據(jù)frme自動(dòng)創(chuàng)建一組cts可能會(huì)跟代碼創(chuàng)建的產(chǎn)生。使用NSLayoutConstraint的constraintWithItem方法構(gòu)使用addConstraint添加約使用更簡(jiǎn)化的表達(dá)方法(僅限于OSX系統(tǒng)NSVi類中擴(kuò)展了約束的屬性,每個(gè)屬性繼承NSatchr類,可以直接使用下面的屬性設(shè)置關(guān)系@interface@interfaceNSView@property(readonly,strong)NSLayoutXAxisAnchor*leadingAnchor;@property(readonly,strong)NSLayoutXAxisAnchor*trailingAnchor;@property(readonly,strong)NSLayoutXAxisAnchor*leftAnchor;@property(readonly,strong)NSLayou