iOS 約束 代碼自動布局 正方形控制項

標籤：

我們說，有時候介面要求可點擊的控制項是類似於collectionviewcell的樣式出現，橫排出現三個或者四個等寬等高的UIButton控制項；或者，不可點擊以橫排展示的方式出現三個或者四個UIImageView控制項；再或者，是幾段文字，當然文字很少要求是正方形的。     但當項目需要製作出幾個控制項橫排排列，大小相同，且呈現正方形時，就可以借鑒我的經曆。     以前的做法是：     一、橫向約束，豎向固定大小     三個UIButton，約束成：等寬等高、中部橫向對齊、button1對上和左邊界約束、button1進行高度約束、button2左邊界對button1右邊界約束，button3左邊界對button2又邊界約束和button3右邊界對右邊框約束；此時更新後，三個button已經完成間距不變橫向自動適配螢幕的等寬控制項。     二、橫向豎向固定高度，間距大小調控     同樣是三個UIButton，約束成：等寬等高、button1約束高度和寬度值、button1和button2和button3同時約束相對於父視圖水平和垂直對齊、更改button1垂直對齊比例為0.33、更改button2垂直對齊比例為0.66、更改button3垂直對齊比例為0.99；此時更新以後，三個button已經完成間距可變，邊距可變，寬高固定的控制項。     相比第一種方法，由於幾款機型的螢幕差距還不是太大，第二種是一個接近項目需求的解決方案。但是想讓控制項間距和控制項與邊框的邊距相等，就要改變對齊比例，而且我暫時還不清楚能否實現間距和邊距的相等。但是這種方法可以適用於圖片大小確定，間距要求高，邊距不做要求的情況，是一種約束非常簡便，實現相對簡單的一種方法。     當然了，第一種適用於，高度確定，寬度可變，切間距和邊距要求比較嚴格的方法。但是我想這種項目需求較少，一般都是確保控制項的美觀，寧可犧牲邊距，也不能做控制項圖片的展開壓縮，會相當難看。      那麼，我來說一下最近想到的一種新方法，就是約束和代碼相結合的這麼一種方法。     三個UIImageView控制項，約束成：等寬等高、中部橫向對齊、imageview1對上和左邊界約束、imageview1進行高度約束、imageview2左邊界對imageview1右邊界約束，imageview3左邊界對imageview2又邊界約束、imageview3右邊界對右邊框約束；此次約束跟第一種方法是一樣的，當初的靈感也是從第一種修改得來的。此時我們將三個控制項連線到.m檔案屬性，我們接下來要做的是對屬性的再次修改，代碼如下：        [self.viewaddConstraint:[NSLayoutConstraintconstraintWithItem:self.oneImageViewattribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:self.oneImageViewattribute:NSLayoutAttributeWidthmultiplier:1.0fconstant:0.0f]];
    [self.viewaddConstraint:[NSLayoutConstraintconstraintWithItem:self.twoImageViewattribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:self.twoImageViewattribute:NSLayoutAttributeWidthmultiplier:1.0fconstant:0.0f]];    [self.viewaddConstraint:[NSLayoutConstraintconstraintWithItem:self.threeImageViewattribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:self.threeImageViewattribute:NSLayoutAttributeWidthmultiplier:1.0fconstant:0.0f]];     添加的NSLayoutConstraint會在storyboard編譯完成以後做再次更改，大體意思是，在控制器view上添加約束，第一個控制項是連線成屬性的imageview，約束高度，方式是等於，第二個控制項是本身imageview，約束寬度，比例為1，位移為0.     由於事先storyboard已經計算出適合螢幕的控制項寬度，那麼再次修改的時候，我就讓此控制項的高度和寬度相等，這不就等於實現了正方形控制項嗎。          我先不做過多解釋，先說一下第二種需求，就是我的控制項，不是在viewcontroller中布局，而是在tableviewcell中布局，這種方式下，添加的約束修改代碼就會報錯，因為cell並不是self.view，所以你在self.view上加約束是不對的。當初我還嘗試將storyboard中tableview的contentview連線到cell的.m檔案，然後把上面的self.view改成連線後的content view，嘗試後也不行。     經過一系列的折騰，後來就改成了下面這種：     約束要改變一下：等寬等高、中部橫向對齊、button1對上和下和左邊界約束、button2左邊界對button1右邊界約束，button3左邊界對button2又邊界約束和button3右邊界對右邊框約束；此時，我高度是隨著cell的高度變化的，寬度是隨著螢幕寬度變化的，可以想象，想要高度和寬度的相等，就只能去認為的幹預cell的高度了。高度的計算：螢幕的寬度 - 三個控制項的邊距和間距總和 / 控制項個數 + 控制項距上和下邊距的總和；比如我的控制項之間的間距是10，邊距也是10，距頂部和底部也是10： self.tableView.rowHeight = ( [UIScreen mainScreen].bounds.size.width - 50.0f) / 3.0f + 20.0f;          約束的話呢，我也沒法給各位元影像片，我就截幾個小圖片，看一下約束後的情況：    

 

這是imageview1的約束，有的大神是能看明白紅框內部的描述的，但我等菜鳥還看不大懂。這是那個viewcontroller裡的。 

 

這個是cell中的，是約束了cell高度控製圖片高度的一種方式。 

 

這個就是按照垂直對齊，修改對齊比例的，以下是幾個控制項的比例修改圖：

 另外兩個控制項就不枚舉了，我給大家上一張怎麼出現這兩張圖片的方法：

 

當你點擊上面中間那根藍色的豎線的時候，下方發約束描述也就僅剩下一條了，然後點擊那個Edit就出來了。 約束整好了就好用，不難，但是沒整好之前挺難，用著也各種不舒服，但是這類的文獻不好寫，要是按部就班的一句話一張圖，一張圖一段解釋的來太累，當然，我寫過類似的文章，下面把文章地址給大家。http://www.cnblogs.com/guoqiangx-5/p/5594634.html

iOS 約束 代碼自動布局 正方形控制項