使用Autolayout單擊按鈕調整UIViews的大小

Question

我是新來的自動佈局約束。我在主視圖上有2個視圖（topView和paintView），以及主視圖右上角的按鈕。在加載視圖時，topView佔據整個主視圖（不包括按鈕）。點擊按鈕後，我想讓topView佔據主視圖的70％，並使用paintView佔據其餘部分（不包括按鈕）。 我已經爲使用故事板的topView設置了X，Y和頂部約束。 paintView和相應的約束已經以編程方式設置。

我現在的代碼是這樣的：

-(void)setupPaintView 
{ 
    UIView *pPaintView = [UIView new]; 
    [pPaintView setBackgroundColor:[UIColor yellowColor]]; 
    pPaintView.translatesAutoresizingMaskIntoConstraints = NO; 
    [self.view addSubview:pPaintView]; 
    self.paintView = pPaintView; 
    [self addConstraintsToView]; 
    //[self setTopViewFrame]; 

} 

-(void)addConstraintsToView 
{ 

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.paintView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.topView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0.0]]; 

    [self.view addConstraint:[NSLayoutConstraint 
           constraintWithItem:self.paintView 
           attribute:NSLayoutAttributeWidth 
           relatedBy:NSLayoutRelationEqual 
           toItem:self.topView 
           attribute:NSLayoutAttributeWidth 
           multiplier:1.0 
           constant:0.0]]; 

    [self.view addConstraint:[NSLayoutConstraint 
           constraintWithItem:self.topView 
           attribute:NSLayoutAttributeBottom 
           relatedBy:NSLayoutRelationEqual 
           toItem:self.paintView 
           attribute:NSLayoutAttributeTop 
           multiplier:1.0 
           constant:0.0]]; 


    NSLayoutConstraint *pHeightConstraintTopView = [NSLayoutConstraint 
              constraintWithItem:self.topView 
              attribute:NSLayoutAttributeHeight 
              relatedBy:NSLayoutRelationEqual 
              toItem:self.view 
              attribute:NSLayoutAttributeHeight 
              multiplier:1.0 
              constant:0.0]; 

    self.heightconstraintTopView = pHeightConstraintTopView; 

    [self.view addConstraint:pHeightConstraintTopView]; 


    NSLayoutConstraint *pHeightConstraintPaintView = [NSLayoutConstraint 
                constraintWithItem:self.paintView 
                attribute:NSLayoutAttributeHeight 
                relatedBy:NSLayoutRelationEqual 
                toItem:self.view 
                attribute:NSLayoutAttributeHeight 
                 multiplier:0.0 
                constant:0.0]; 

    self.heightconstraintPaintView = pHeightConstraintPaintView; 

    [self.view addConstraint:pHeightConstraintPaintView]; 

} 

在按鈕點擊下面的方法被調用：

-(IBAction)detailBtnClick:(id)sender 
{ 
    if(self.heightconstraintPaintView.constant == 0) 
    { 

     self.heightconstraintTopView.constant = 0.7*self.view.frame.size.height; 
     self.heightconstraintPaintView.constant = 0.3*self.view.frame.size.height; 
     [self.view setNeedsUpdateConstraints]; 
    } 
    else 
    { 
     self.heightconstraintTopView.constant = self.view.frame.size.height; 
     self.heightconstraintPaintView.constant = 0; 
     [self.view setNeedsUpdateConstraints]; 
    } 

} 

當視圖加載，冠捷收購主視圖的高度，這是這裏需要。但是當我點擊按鈕時，topView保持在100％，即它不調整大小，paintView也不是。我正在修改topView的常量屬性和paintView約束，但我不確定這是否正確。這裏的約束是必須僅使用Autolay約束來佈置視圖。如何通過點擊按鈕來調整視圖大小？ 歡迎任何幫助。

感謝timothykc等人，我成功地解決了上述問題。但是我現在面臨另一個問題。當我將模擬器的方向改變爲橫向時，paintView幾乎保持隱藏狀態。以下是代碼（肘節是決定是否伸展/收縮的觀點的布爾值）：

-(IBAction)detailBtnClick:(id)sender 
{ 


     if(self.toggle == FALSE) 
     { 
      self.topViewHeightConstraint.constant = 0.7*self.bounds.frame.size.height; 
      self.heightconstraintPaintView.constant = 0.3*self.bounds.frame.size.height; 

      //[self.view layoutIfNeeded]; 
     } 
     else 
     { 
      self.topViewHeightConstraint.constant = self.view.bounds.size.height; 
      self.heightconstraintPaintView.constant = 0; 
      //[self.view layoutIfNeeded]; 

     } 

    self.toggle = !self.toggle; 


} 

的topViewHeightConstraint已被添加作爲一個屬性由timothykc所示。這適用於縱向，但對於橫向無法正常工作，因爲topView的高度不會根據需要更改（70％），這意味着比率得不到正確處理。

Answer 1

我將提供一個故事板驅動的解決方案，可以幫助您解決其他自動佈局問題。

我解決您的具體問題，你有兩種觀點（1和2如下圖）：

視圖1針視圖左側，頂部和上海華權。然後設置高度常數。（例如，568，iphone 5s的全高）

對於視圖2，將其固定到超視圖的左側，底部和右側。然後其引腳的視圖底部1.

開拓助理編輯視圖，這裏的關鍵trick-- 開啓高度約束的視圖1到nslayoutconstraint財產上的VC 。您可以通過查找約束來完成此操作，然後控制 - 拖動到VC上。 （例如。`

---

@property（強，非原子）IBOutlet中NSLayoutConstraint * viewHeight;`

---

現在你可以操縱這個屬性與鏈接到您的按鈕的動作，如

- (IBAction)scale:(id)sender { 
    self.viewHeight.constant = 397.6; //%70 of 568.... 
} 

在我的示例中，我手動將nslayoutconstraint.CONSTANT更改爲任意值。

要了解發生了什麼，您需要知道自動佈局是確定任何佈局對象（x座標，y座標，寬度，高度）的方法。當xcode無法確定所有4個值時會發生警告...

在視圖1中，我們給出了高度的約束。 X，Y和寬度從距離超視圖的距離外推。 （如果左邊和右邊有東西是0，那麼寬度就會填滿整個屏幕......;如果從左上角0，那麼座標必須是（0,0））

在視圖2中，X必須是0，因爲從左邊的距離是0.寬度整個屏幕...高度和Y是根據視圖1的高度外推的！

所以當我們在視圖1中弄亂了高度約束時，它會影響視圖2的高度和Y座標！

Answer 2

要在視圖上更新約束條件，在設置新常量（無論您想要更新的約束條件）後，需要調用[self.view layoutIfNeeded];而不是[self.view setNeedsUpdateConstraints];。

Answer 3

其實這更多的是我的方法的評論，但我決定將它張貼作爲一個答案，因爲首先，這解決了我的問題，其次，它涉及到的一些代碼片斷這是很難閱讀評論部分。關於編輯中提到的方向問題，我想出了一個解決方法，以適應與切換按鈕有關的視圖重設需求以及方向更改。用於此目的的三種方法是： 在按鈕單擊事件上調用以下方法。

-(IBAction)detailBtnClick:(id)sender 
{ 
    [self updateViewConstraints:self.toggle]; 
    self.toggle = !self.toggle; 

} 

以下方法更新約束。

-(void)updateViewConstraints :(BOOL)toggleValue 
{ 
    if(toggleValue == FALSE) 
    { 
     self.topViewHeightConstraint.constant = 0.7*self.view.bounds.size.height; 
     self.heightconstraintPaintView.constant = 0.3*self.view.bounds.size.height; 
    } 
    else 
    { 
     self.topViewHeightConstraint.constant = self.view.bounds.size.height; 
     self.heightconstraintPaintView.constant = 0; 
    } 
} 

下面的方法調用上面的方法來定向變化的情況下更新限制：

-(void)viewWillLayoutSubviews 
{ 
      [self updateViewConstraints:!self.toggle]; 
}