iOS自动布局约束的UIScrollView：子视图的大小错误

Question

我试图在代码中生成一个视图。这是我的视图对象的层次结构

• UIScrollView
  • UIView
    • UIButton

    滚动视图应该与窗口大小相同。按钮应该尽可能大。我使用iOS自动布局，所以我所有对象的约束字符串如下所示

    H:|[object]|
    V:|[object]|
    

    我还为每个对象将translatesautorexingmaskintoconstraints设置为NO。

    问题是按钮只获得默认的按钮大小。其父视图对象（UIView）仅获取其子视图所需的大小。

    

    红色：UIScrollView/黄色：UIView

    如何强制这些视图与scrollView一样大？

    当我使用UIView而不是UIScrollView时，一切都很好。。。

    以下是一些代码：

        - (void) viewDidLoad {
    
            [super viewDidLoad];
    
            // SCROLL VIEW
            UIScrollView* scrollView = [UIScrollView new];
            scrollView.backgroundColor=[UIColor redColor];
            scrollView.translatesAutoresizingMaskIntoConstraints = NO;
    
            //CONTAINER VIEW
            UIView *containerView = [UIView new];
            containerView.translatesAutoresizingMaskIntoConstraints = NO;
            containerView.backgroundColor = [UIColor yellowColor];
            [scrollView addSubview:containerView];
    
            // CONSTRAINTS SCROLL VIEW - CONTAINER VIEW
            [scrollView addConstraints:
             [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[containerView]|"
                                                     options:0 metrics:nil
                                                       views:@{@"containerView":containerView}]];
            [scrollView addConstraints:
             [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[containerView]|"
                                                     options:0 metrics:nil
                                                       views:@{@"containerView":containerView}]];
    
            // BUTTON
            UIButton* button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
            button.translatesAutoresizingMaskIntoConstraints = NO;
            [button setTitle:@"I'm way to small" forState:UIControlStateNormal];
            [containerView addSubview:button];
    
            // CONSTRAINTS CONTAINER VIEW - BUTTON
            [containerView addConstraints:
             [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[button]|"
                                                     options:0 metrics:nil
                                                       views:@{@"button":button}]];
            [containerView addConstraints:
             [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[button]|"
                                                     options:0 metrics:nil
                                                       views:@{@"button":button}]];
            self.view = scrollView;
    
        }
    

    更新：我真的不知道为什么会这样。如果在IB中设置视图，连接插座并在代码中实例化视图，则scrollview的行为类似于普通视图（垂直反弹）。其contentSize计算不正确。这里有更多。但如何正确地做到这一点呢？

Answer 1

两个观察结果：

>

滚动视图中的子视图约束与其他视图中的约束不同。它们用于设置滚动视图的内容大小。（见TN2154。）这样，您可以在滚动视图上抛出一堆内容，为其中的内容设置约束，然后计算内容大小。这是一个非常酷的特性，但它与您在这里尝试的操作相反。

更糟糕的是，除非您为按钮的宽度和高度设置明确的约束，否则按钮将根据其内容调整大小。

这两个观察结果的最终效果是，您现有的约束条件是“（a）将我的容器设置为我的按钮的大小；（b）让我的按钮根据文本的大小动态调整自身大小；（c）根据我的容器的大小（即按钮的大小）设置我的scrollview的内容大小）。”

我不清楚业务问题是什么。但以下是实现我认为您的技术问题的一些限制条件：

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIView *view = self.view;

    UIScrollView *scrollView = [[UIScrollView alloc] init];
    scrollView.backgroundColor = [UIColor redColor]; // just so I can see it
    scrollView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:scrollView];

    UIView *containerView = [[UIView alloc] init];
    containerView.backgroundColor = [UIColor yellowColor]; // just so I can see it
    containerView.translatesAutoresizingMaskIntoConstraints = NO;
    [scrollView addSubview:containerView];

    UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    button.translatesAutoresizingMaskIntoConstraints = NO;
    [button setTitle:@"I'm the right size" forState:UIControlStateNormal];
    [containerView addSubview:button];

    NSDictionary *views = NSDictionaryOfVariableBindings(scrollView, button, view, containerView);

    // set the scrollview to be the size of the root view

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollView]|"
                                                                      options:0
                                                                      metrics:nil
                                                                        views:views]];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollView]|"
                                                                      options:0
                                                                      metrics:nil
                                                                        views:views]];

    // set the container to the size of the main view, and simultaneously
    // set the scrollview's contentSize to match the size of the container

    [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[containerView(==view)]|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:views]];

    [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[containerView(==view)]|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:views]];

    // set the button size to be the size of the container view

    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[button(==containerView)]"
                                                                          options:0
                                                                          metrics:nil
                                                                            views:views]];

    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[button(==containerView)]"
                                                                          options:0
                                                                          metrics:nil
                                                                            views:views]];

}

坦率地说，我不理解你的UI的商业意图，因为这感觉就像是为了实现一个非常简单的UI而扭曲了自动布局。我不知道如果你有“屏幕大小”的内容，为什么要有滚动视图（除非你是通过按钮分页）。我不知道你为什么要有一个包含单个项目的内容视图。我不明白你为什么要使用全屏按钮（那时我会在根视图上放一个点击手势，然后收工）。

我假设你对所有这些都有很好的理由，但是备份一下，问问你想要的用户体验是什么，然后重新处理这个问题，看看是否有更有效的方法来达到预期的效果，这可能是有意义的。