UIButton 高度根据屏幕大小变化

Question

我有 10 个 UIButton 一个一个。我想根据 iPhone 屏幕尺寸改变它的高度。它应该在 iPhone 6 plus 屏幕上看起来更大，在 iPhone 5s 屏幕上看起来更小。如何使用自动布局来做到这一点。

Answer 1

您首先选择一个 UIView 并设置其约束，如顶部、底部、前导和尾随，然后拖动视图上的所有 UIButton 并设置所有按钮约束，如顶部、底部、前导、尾随和等宽和等高约束可以检查这些图像 iPhone 7 Plus 屏幕：-

和 iPhone 5s 屏幕

Xcode 查看

Answer 2

为此，您必须根据设备屏幕尺寸的百分比 (%) 添加每个按钮的高度。这样按钮大小可以根据设备（iPhone4s、5s、6 plus）的屏幕大小而有所不同。

现在我将使用 KVConstraintExtensionsMaster 库以编程方式添加约束。通过从 ViewController 的 viewDidLoad 调用以下方法来尝试以下代码。

- (void)configureScrollViewHierarchyAndApplyConstraint
{
    CGFloat mainScreenHeight = [[UIScreen mainScreen] bounds].size.height;

    // here baseScreenHeight is default screen height size for which we are implementing.
    CGFloat baseScreenHeight = 667; // here default iPhone 6 height

    // Note: try by changing baseScreenHeight via any iPhone screen height(480, 568, 667, 736) and see the changes in button height & space

    // here fixed space and height are fixed size with respect to iPhone 6 height.
    CGFloat fixedSpace = 28;
    CGFloat fixedHeight = 150;

    // ratio is responsible to increase or decrease button height depends on iPhone device size.
    CGFloat ratio = mainScreenHeight/baseScreenHeight;

    CGFloat baseSpace = fixedSpace * ratio;
    CGFloat baseHeight = fixedHeight * ratio;

    // prepare scrollView for autolayout
    UIScrollView *scrollView = [UIScrollView prepareNewViewForAutoLayout];
    scrollView.backgroundColor = [UIColor brownColor];
    [self.view addSubview:scrollView];

    // prepare containerView for autolayout
    UIView *containerView = [UIView prepareNewViewForAutoLayout];
    containerView.backgroundColor = [UIColor colorWithWhite:1 alpha:0.95];
    [scrollView addSubview:containerView];

    // To add Leading and Trailing constraint
    [scrollView applyLeadingAndTrailingPinConstraintToSuperviewWithPadding:baseSpace];
    // To add Top and Bottom constraint
    [scrollView applyTopAndBottomPinConstraintToSuperviewWithPadding:baseSpace];

    // To add Top and Bottom constraint of containerView
    [containerView applyTopAndBottomPinConstraintToSuperviewWithPadding:0];

    // To Define the containerView X Position by adding HorizontalCenter constraint
    [containerView applyConstraintForHorizontallyCenterInSuperview];

    // Here To Define the width 
    [containerView applyEqualWidthPinConstrainToSuperview]; // Or
    //[containerView applyLeadingPinConstraintToSuperviewWithPadding:10];

    NSInteger count  = 20;
    UIButton *previousContentButton = nil;

    for (NSInteger i = 0; i < count; i++)
    {
        UIButton *contentButton = [UIButton prepareNewViewForAutoLayout];
        if (i&1) {
            [contentButton setBackgroundColor:[UIColor greenColor]];
        }else{
            [contentButton setBackgroundColor:[UIColor redColor]];
        }

        [contentButton setTag:i];
        [containerView addSubview:contentButton];

        // Define the contentButton Size
        [contentButton applyLeadingAndTrailingPinConstraintToSuperviewWithPadding:baseSpace];
        [contentButton applyHeightConstraint:baseHeight];

        if (i == 0) // for first
        {
            // To add top constraint
            [contentButton applyTopPinConstraintToSuperviewWithPadding:baseSpace];
        }
        else if (i == count-1) // for last
        {
            // To add vertical constraint between two buttons
            [previousContentButton applyConstraintFromSiblingViewAttribute:NSLayoutAttributeBottom toAttribute:NSLayoutAttributeTop ofView:contentButton spacing:baseSpace];

            // To add bottom constraint
            [contentButton applyBottomPinConstraintToSuperviewWithPadding:baseSpace];
        }
        else
        {
            // To add vertical constraint between two buttons
            [previousContentButton applyConstraintFromSiblingViewAttribute:NSLayoutAttributeBottom toAttribute:NSLayoutAttributeTop ofView:contentButton spacing:baseSpace];
        }

        previousContentButton = contentButton;
    }

    [containerView updateModifyConstraints];

}

Answer 3

一个简单的例子：

1. 将一个按钮从对象库拖到情节提要中视图控制器的视图中
2. ctrl 从按钮拖动到视图（向左或向右拖动）并在容器中垂直选择中心
3. ctrl 从按钮拖动到视图（拖动到顶部或底部）并在容器中水平选择中心
4. ctrl 从按钮拖动到按钮（是的，相同的按钮）并选择纵横比
5. 在尺寸检查器中检查按钮的纵横比约束是否具有 1:1 的乘数
6. ctrl 从按钮拖动到视图（向左或向右拖动）并选择相等的宽度 7 .在尺寸检查器中检查按钮的等宽约束是否具有 1:3 的乘数（或任何您喜欢的值 - 1:3 表示按钮的宽度是视图宽度的三分之一）

你可以查看这个answer。

Answer 4

只需使用 Verticle UIStackView。