使用autolayout将子视图的宽度与其超级视图匹配

时间:2013-08-20 17:39:25

标签: ios uiwebview uiscrollview autolayout

目标:

使用自动布局约束,使UIWebView的宽度与其超级视图相同,即UIScrollView

代码

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.questionWebViewUIWebView)的宽度时,当应用自动布局约束时,它的宽度不会改变。

问题

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

ps我知道在UIWebView中放置UIScrollView是违反Apple的建议的,但是我已经关闭了使用属性{{1}滚动UIWebView的功能}。目前使用UIWebView是我显示HTML表格的最佳策略。

2 个答案:

答案 0 :(得分:16)

根据要求改进Rob的答案。

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

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

这可以轻松完成:创建另一个视图containerView,并将scrollView添加为子视图。然后为containerView设置适当的约束。假设您希望scrollView以viewController为中心,边缘有一些填充。所以对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并设置其宽度:

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

[self.view addConstraint:makeWidthTheSameAsScrollView];

这会使scrollview像webView一样大和高,并且它们都将按预期放置(在containerView上设置约束)。

答案 1 :(得分:3)

Scrollviews在如何与自动布局交互时有点奇怪。请参阅TN2154(UIScrollView和Autolayout)。

另见UIScrollView doesn't use autolayout constraints

通常,您需要以“滚动视图的当前宽度”之外的其他方式获取所包含视图的宽度,因为在自动布局中,滚动视图的宽度(即内容宽度)是根据其内容定义的。因此,您当前的请求是循环的。