iOS 約束 代碼自動佈局 正方形控件

咱們說，有時候界面要求可點擊的控件是相似於collectionviewcell的樣式出現，橫排出現三個或者四個等寬等高的UIButton控件；或者，不可點擊以橫排展現的方式出現三個或者四個UIImageView控件；再或者，是幾段文字，固然文字不多要求是正方形的。

     但當項目須要製做出幾個控件橫排排列，大小相同，且呈現正方形時，就能夠借鑑個人經歷。

     之前的作法是：

     1、橫向約束，豎向固定大小

     三個UIButton，約束成：等寬等高、中部橫向對齊、button1對上和左邊界約束、button1進行高度約束、button2左邊界對button1右邊界約束，button3左邊界對button2又邊界約束和button3右邊界對右邊框約束；此時更新後，三個button已經完成間距不變橫向自動適配屏幕的等寬控件。

     2、橫向豎向固定高度，間距大小調控

     一樣是三個UIButton，約束成：等寬等高、button1約束高度和寬度值、button1和button2和button3同時約束相對於父視圖水平和垂直對齊、更改button1垂直對齊比例爲0.3三、更改button2垂直對齊比例爲0.6六、更改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