iOS AutoLayout自動布局中級開發教程(3)-等寬等高等中心

標籤：autolayout進階教程   等高等寬等中心   

前面講到了一些關於邊界約束的知識,但那些基礎知識來解決一些實際問題還是會有點力不從心的;所以我們需要更進階的設定約束的辦法,設定等高等寬等中心:

見:

圖中有3個button按鈕, 現在要求3個button等寬,等高 , 且 垂直中心在一條線上,這該如何設定?

按照前面的說法,約束其實是一次方程組的求解,那麼 通過觀察可以得之,如果我們設定好了button之間的左右邊界約束,然後再讓3個button等寬就可以;

那麼就會有  3x  = 寬度; 所以 每一個Button的寬度就可以計算出來了給button1添加  top約束

具體做法:

首先設定好 Button之間的邊界約束(先不要update Frames),假設都為20, 

等寬 設法:

選中button2 ,按住 control  滑鼠拖拽一條線到 button1上會出現如下 選項:

選擇Equal Widths等寬, Equal Heights等高,  center Y垂直中心 相等  (可能會 略有 偏差, centerY 的值是可以調節的! 預設的  center Y就是決定你當前的在的位置 )

 button 3 的操作類似, 那麼可以 想向  button1,2,3都會在 同一水平線上了,寬度高度也都相等了!

效果如下:

大家可以看到,出現了寬度高度都相等的 按鈕,但是  button 3為什麼 不和其他兩個 button 在一條水平線上呢?

這是因為  center Y預設 值會根據你的實際位置 進行調整,所以如果你需要 水平齊,需要  修改  centerY 的值為0即可!

修改  center Y的值即可

可以看出,這個設定的關鍵點是  :從一個  視圖 按住 control 拖拽到另一個 視圖(包括父視圖)來產生 ,寬高,中心,邊界的關係!

我們需要根據實際情況進行調整  其值!

即使是剛才設定的  約束 是  等寬的也是可以 隨意調節 每一個  按鈕的寬度的  ,如

可以改變其值,原理  類似 於    從   3x  = K  ,變為了  1x +1.5x +2x  =K是一樣的道理,那麼每一個視圖的寬度就算出來了!

總結一下:

我們通過  按住 選中一個  視圖後  ,按住  control 拖拽到另外一個視圖上 ,那麼就可以設定兩個 視圖的關係!

補充:

center  X可以設定,兩個  視圖(包括子視圖和父視圖)之間的 水平中心在一條線上:

如是  center X相等的  一些視圖,大家可以看到 一條很長的線的提示!

從Button4 拖拽到  他的父視圖 view上可以見到如下的選項,也可以拖拽到 左邊的 視圖列表(選項更多!)

拖拽鬆手看到如下選項:

我們選擇  Center  Horizontally ...就可以設定  button4的中心與 父視圖(或其他視圖)的水平中心是在一條線上了!

Center  Vert...就是   Center  Y,垂直中心相等

ps:如果你需要 左右移動,或者  上線移動,只需改變  Center X或  Center Y的值即可!

把 所有的 center X和 center Y改為 0即可看到如下效果:

原文地址http://blog.csdn.net/yangbingbinga/article/details/43069341

iOS AutoLayout自動布局中級開發教程(3)-等寬等高等中心