2016-06-08 56 views
0

按鈕的比例調整大小我需要佈置5個按鈕作爲該圖像中:figure 1在UIStackView

我需要他們按比例調整在不同設備上。

我有一個方法設置了5個按鈕的視圖中的代碼。

UIStackView *stackView = [[UIStackView alloc]init]; 

// Add buttons to stackView (buttons are initialised) 
[stackView addArrangedSubview:_button1]; 
[stackView addArrangedSubview:_button2]; 
[stackView addArrangedSubview:_button3]; 
[stackView addArrangedSubview:_button4]; 
[stackView addArrangedSubview:_button5]; 

stackView.translatesAutoresizingMaskIntoConstraints = false; 
[self.view addSubview:stackView]; 

stackView.axis = UILayoutConstraintAxisVertical; 
stackView.distribution = UIStackViewDistributionFillEqually; 
stackView.spacing = 5; 

//Layout Constraints for stackView 
[stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = true; 
[stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = true; 

// 80% of screen height should be used for buttons 
CGFloat screenHeightAvailableForButtons = 80/100; 
// Calculate multiplier for height of the buttons (5 buttons) 
CGFloat buttonMultiplier = screenHeightAvailableForButtons /5; 
// 25% of screen width should be used for buttons 
CGFloat screenWidthMultiplier = 25/100; 

[_button1.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier].active = true; 
[_button1.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true; 

[_button2.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier ].active = true; 
[_button2.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true; 

[_button3.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier ].active = true; 
[_button3.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true; 

[_button4.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier ].active = true; 
[_button4.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true; 

[_button5.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier ].active = true; 
[_button5.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true; 

此代碼返回空白視圖。我是否錯誤地使用了方法?
我無法弄清楚我做錯了什麼。我需要在目標c中以編程方式完成此操作。

感謝

+0

請詳細說明「我需要他們在不同設備上按比例調整。」就像「如果堆棧視圖高度是xxx按鈕偏移量是xx,那麼按鈕高度應該是xxx」,並且與寬度類似。 – BangOperator

+0

@BangOperator我需要它看起來像是在所有設備上提供的圖像,我需要以編程方式而不是IB。因此,在橫向模式下,stackView.height = screen.height從頂部和底部減去20個點,button.height =每個按鈕之間5點間距的stackView的1/5。和stackView.width = screen.width和1/4距離左邊緣20點,button.width = stackView.width。希望有道理 – sharp

回答

1

對於你的情況,你不需要設置按鈕堆棧視圖裏面的約束。堆棧視圖將自動處理。

試試這個

- (void)viewDidLoad { 
    [super viewDidLoad]; 
    // Do any additional setup after loading the view, typically from a nib. 

    UIStackView *stackView = [[UIStackView alloc]initWithFrame:self.view.bounds]; 
    stackView.backgroundColor = [UIColor darkGrayColor]; 
    _button1 = [UIButton buttonWithType:UIButtonTypeSystem]; 
    [_button1 setTitle:@"Button 1" forState:UIControlStateNormal]; 
    _button1.translatesAutoresizingMaskIntoConstraints = NO; 
    _button1.backgroundColor = [UIColor lightGrayColor]; 

    _button2 = [UIButton buttonWithType:UIButtonTypeSystem]; 
    [_button2 setTitle:@"Button 2" forState:UIControlStateNormal]; 
    _button2.translatesAutoresizingMaskIntoConstraints = NO; 
    _button2.backgroundColor = [UIColor lightGrayColor]; 

    _button3 = [UIButton buttonWithType:UIButtonTypeSystem]; 
    [_button3 setTitle:@"Button 3" forState:UIControlStateNormal]; 
    _button3.translatesAutoresizingMaskIntoConstraints = NO; 
    _button3.backgroundColor = [UIColor lightGrayColor]; 


    _button4 = [UIButton buttonWithType:UIButtonTypeSystem]; 
    [_button4 setTitle:@"Button 4" forState:UIControlStateNormal]; 
    _button4.translatesAutoresizingMaskIntoConstraints = NO; 
    _button4.backgroundColor = [UIColor lightGrayColor]; 

    _button5 = [UIButton buttonWithType:UIButtonTypeSystem]; 
    [_button5 setTitle:@"Button 5" forState:UIControlStateNormal]; 
    _button5.translatesAutoresizingMaskIntoConstraints = NO; 
    _button5.backgroundColor = [UIColor lightGrayColor]; 

    // Add buttons to stackView (buttons are initialised) 
    [stackView addArrangedSubview:_button1]; 
    [stackView addArrangedSubview:_button2]; 
    [stackView addArrangedSubview:_button3]; 
    [stackView addArrangedSubview:_button4]; 
    [stackView addArrangedSubview:_button5]; 

    stackView.translatesAutoresizingMaskIntoConstraints = false; 
    [self.view addSubview:stackView]; 

    stackView.axis = UILayoutConstraintAxisVertical; 
    stackView.distribution = UIStackViewDistributionFillEqually; 
    stackView.alignment = UIStackViewAlignmentFill; 
    stackView.spacing = 5; 

    //Layout Constraints for stackView 
    [stackView.layoutMarginsGuide.topAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.topAnchor].active = true; 
    [stackView.layoutMarginsGuide.bottomAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.bottomAnchor].active = true; 
    // 25% of screen width should be used for buttons 
    [stackView.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier:25.0/100.0].active = true; 
    [stackView.layoutMarginsGuide.centerXAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.centerXAnchor].active = true; 

} 
+0

謝謝先生。我知道我也可以使用'constraintEqualToAnchor:constant:'來進一步向約束添加一個'常量'值,以便在任何我想要的屏幕上定位stackView!偉大的東西;) – sharp

+0

@DannyHuseyin如果這個thas回答了您的問題,將其標記爲已回答。 – BangOperator

+0

完成。當我的代表允許的時候,我會確定我會贊成 – sharp