使用自动布局将子视图的宽度与其父视图匹配 [英] Matching subview's width to it's superview using autolayout

问题描述

目标:

使用自动布局约束，让 UIWebView 的宽度与其超级视图(即 UIScrollView)的宽度相同.

Have a UIWebView be the same width as it's superview, which is a UIScrollView, using autolayout constraints.

代码

NSLayoutConstraint *makeWidthTheSameAsScrollView =[NSLayoutConstraint
                                                       constraintWithItem:self.questionWebView
                                                       attribute:NSLayoutAttributeWidth
                                                       relatedBy:0
                                                       toItem:self.masterScrollView
                                                       attribute:NSLayoutAttributeWidth
                                                       multiplier:1.0
                                                       constant:0];

[self.view addConstraint:makeWidthTheSameAsScrollView];

 NSLog(@"The width of questionWebView *AFTER* adding the constrain is: %f", self.questionWebView.frame.size.width);
 NSLog(@"The width of scrollView *AFTER* adding the constrain is: %f", self.masterScrollView.frame.size.width);

当前结果

当我记录 self.questionWebView(UIWebView)的宽度时，应用自动布局约束时它的宽度不会改变.

When I log the width of self.questionWebView (the UIWebView), it's width does not change when the autolayout constrain is applied.

问题

• 这是正确的方法吗?
• 我做错了什么?

ps 我知道在 UIScrollView 中放置 UIWebView 违反 Apple 的建议，但是我已经关闭了滚动 UIWebView 的功能code> 使用属性 self.questionWebView.userInteractionEnabled = NO;.目前使用 UIWebView 是我显示 HTML 表格的最佳策略.

p.s I know it is against Apple's recommendations to place a UIWebView in a UIScrollView, however I've turned off the ability to scroll the UIWebView using the property self.questionWebView.userInteractionEnabled = NO;. And currently using a UIWebView is my best strategy for displaying an HTML table.

推荐答案

根据要求改进 Rob 的答案.

Improving on Rob's answer, as requested.

正如 Rob 已经提到的，UIScrollViews 在自动布局下具有特殊的行为.

As Rob already mentioned, UIScrollViews have peculiar behavior under Auto Layout.

在这种情况下有趣的是，scrollView 的总宽度是通过使用其子视图的总宽度来确定的.因此，虽然 scrollView 已经向 webView 询问其宽度，但您是在告诉 webView 也向 scrollView 询问其宽度.这就是为什么它不起作用.一个人在问另一个人，没有人知道答案.您需要另一个参考视图用作 webView 的约束，然后 scrollView 也将能够成功询问其预期宽度.

What is of interest in this case is the fact that the scrollView total width is determined by using its subviews total width. So while the scrollView already asks the webView for its width, you're telling the webView to also ask the scrollView for its width. That's why it doesn't work. One is asking another, and no one knows the answer. You need another reference view to use as a constraint for the webView, and then the scrollView will also be able to successfully ask about its expected width.

一个简单的方法可以做到这一点:创建另一个视图，containerView，并将 scrollView 作为子视图添加到其中.然后为 containerView 设置适当的约束.假设您希望 scrollView 以 viewController 为中心，边缘有一些填充.containerView 也是这样:

An easy way this could be done: create another view, containerView, and add the scrollView as a subview to that. Then set the proper constraints for containerView. Let's say you wanted the scrollView centered on a viewController, with some padding on the edges. So do it for the containerView:

NSDictionary *dict = NSDictionaryOfVariableBindings(containerView);
[self.view addConstraints:[NSLayoutConstraints constraintsWithVisualFormat:@"H|-(100)-[containerView]-(100)-|" options:0 metrics:0 views:dict];
[self.view addConstraints:[NSLayoutConstraints constraintsWithVisualFormat:@"V|-(100)-[containerView]-(100)-|" options:0 metrics:0 views:dict];

然后您可以继续将 webView 作为子视图添加到 scrollView 并设置其宽度:

Then you can proceed adding the webView as a subview to the scrollView and setting its width:

NSLayoutConstraint *makeWidthTheSameAsScrollView =[NSLayoutConstraint
                                                       constraintWithItem:self.questionWebView
                                                       attribute:NSLayoutAttributeWidth
                                                       relatedBy:0
                                                       toItem:containerView
                                                       attribute:NSLayoutAttributeWidth
                                                       multiplier:1.0
                                                       constant:0];

[self.view addConstraint:makeWidthTheSameAsScrollView];

这将使滚动视图与 webView 一样大和高，并且它们都将按预期放置(在 containerView 上设置约束).

This would make the scrollview as large and tall as the webView, and they both would be placed as intended (with the constraints set on containerView).

这篇关于使用自动布局将子视图的宽度与其父视图匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！