自动布局iOS 7 – 无法将子视图右侧的UIScrollView右对齐

我以编程方式构建视图并使用autolayout,没有任何界面构建器.在一个自定义的ScrollView控件中,我添加了一个UILabel和一个UIButton作为子视图.我想将标签对准屏幕左侧,屏幕右侧的按钮.由于某些原因,我的按钮只对齐在我的滚动视图的左边.我已经削减了我的代码,所以只有这两个标签,我不明白为什么它不会对准.

HWScrollViewController.m(如何初始化主滚动视图)

- (void)loadView
{
    self.scrollView = [[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];

    self.scrollView.delegate = self;

    self.view = self.scrollView;
}

HWListingDetailViewController.m

- (void)viewDidLoad
{
[super viewDidLoad];

UILabel *priceLabel = [[UILabel alloc] init];
UIButton *favouriteButton = [UIButton buttonWithType:UIButtonTypeContactAdd];

[priceLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
[favouriteButton setTranslatesAutoresizingMaskIntoConstraints:NO];

[priceLabel setText:@"$125.00"];
[favouriteButton setTitle:@"Add to Favourites" forState:UIControlStateNormal];

[self.view addSubview:priceLabel];
[self.view addSubview:favouriteButton];

[self.view addConstraints:@[
    [NSLayoutConstraint constraintWithItem:priceLabel 
                                 attribute:NSLayoutAttributeCenterY
                                 relatedBy:NSLayoutRelationEqual 
                                    toItem:self.view 
                                 attribute:NSLayoutAttributeCenterY 
                                multiplier:1 
                                  constant:0],[NSLayoutConstraint constraintWithItem:priceLabel 
                                 attribute:NSLayoutAttributeLeft 
                                 relatedBy:NSLayoutRelationEqual 
                                    toItem:self.view 
                                 attribute:NSLayoutAttributeLeft 
                                multiplier:1 
                                 constant:5],[NSLayoutConstraint constraintWithItem:favouriteButton 
                                 attribute:NSLayoutAttributeCenterY 
                                 relatedBy:NSLayoutRelationEqual 
                                    toItem:self.view 
                                 attribute:NSLayoutAttributeCenterY 
                                multiplier:1 
                                  constant:0],[NSLayoutConstraint constraintWithItem:favouriteButton 
                                 attribute:NSLayoutAttributeRight 
                                 relatedBy:NSLayoutRelationEqual 
                                    toItem:self.view 
                                 attribute:NSLayoutAttributeRight 
                                multiplier:1 
                                  constant:5],

}

您可以看到,绿色价格标签正确对齐,但红色按钮离开屏幕左侧. (我给它5像素的偏移量来显示它的位置.)那么,为什么scrollview的右边实际上是左边的？如何正确对齐屏幕右侧？我哪里做错了？这让我疯狂！

感谢任何帮助！

最终布局图片：
我希望最终的布局是这样的：

如果旋转到景观,我会期待它看起来像这样：

解决方法

约束的数量不是问题. UILabel和UIButton都将根据它们的intrinsicContentSize来确定它们的大小,并且由于您对该位置有约束,所以它应该具有布局所需的所有信息.

然而,当涉及到自动布局时,UIScrollViews以独特的方式表现.最好的描述来自这个technical note.有两个选项可用,包括例子,但是每个的摘要.

混合方式

您只需要向UIScrollView添加一个UIView,然后在UIView中添加和定位所有的子视图.这需要您在UIScrollView上手动设置UIView的框架和contentSize.

这可能是您尝试实现的布局最简单的方法.但是,如果contentSize可以更改,则必须手动计算和更新大小.

纯汽车布局方法

此选项使用您的autolayout约束来确定UIScrollView的contentSize.这需要限制到UIScrollView的所有四个边缘,并且不能依赖于UIScrollView的大小.

这个选项比较困难,因为你需要确保你有足够的约束.在您的情况下,您将遇到问题,因为对UIScrollView的顶部和底部没有约束,并且没有约束可用于确定UIScrollView的宽度.但是,当您必须处理动态内容时,此选项将非常惊人,因为它将根据需要调整contentSize的大小.

就个人而言,我会用纯汽车布局方法去.处理动态内容大小的能力使得额外的约束设置值得.

如果你发布你想要的最终布局,我会更新我的答案,以反映.

更新

根据您发布的图像,这是我使用纯自动布局方法组织子视图的方式.主要区别在于UIScrollView现在是UIViewControllers视图的子视图.

- UIView                                            (self.view)
  - UIScrollView                                    (scrollView)
    - UIView                                        (contentView)
      - UIImageView,UIButtons,UILabels,etc.

scrollView需要约束,所以它的边缘是0px from self.view.

contentView需要约束,所以它的边缘是从scrollView的0px,它的宽度等于self.view.这样就可以使scrollView的contentSize在旋转设备时更新.

接下来只需按照你想要的方式放置所有的图像和标签.标签将需要被限制在左右,以便它可以计算其高度.需要注意的是,ContentView将根据其子视图的约束来确定其高度,因此您将需要约束“链接”contentView的顶部和底部.一个简单的例子就像这样.

> contentView顶部到imageView顶部> imageView height ==一些值> imageView底部到标签顶部>标签底部到contentView底部