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

Question

我以编程方式构建视图并使用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的右侧实际上是左侧？如何正确对齐屏幕右侧？我哪里做错了？这真让我抓狂!

谢谢你的帮助!

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

如果旋转到横向,我希望它看起来像这样:

Answer 1

约束的数量不是问题.双方UILabel并UIButton决定根据其大小intrinsicContentSize,并因为你有约束的位置,它应该有它需要的所有布局的信息.

但是,当谈到自动布局时,UIScrollViews表现方式是独特的.最佳描述来自本技术说明.有两个选项,包括示例,但是每个选项都有摘要.

混合方法

你只需要一个添加UIView到UIScrollView在当时的添加和定位所有的子视图UIView.这需要你手动设置frame的UIView和contentSize上UIScrollView.

这可能是您尝试实现的布局最容易使用的.但是,如果contentSize可以更改,则必须手动计算并更新大小.

纯自动布局方法

该选项使用自动布局约束来确定contentSize的UIScrollView.这需要约束到UIScrollView的所有四个边缘,并且不能依赖于UIScrollView的大小.

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

就个人而言,我会选择Pure Auto Layout Approach.它能够处理动态内容大小使得额外的约束设置值得.

如果你发布你想要的最终版面,我会更新我的答案以反映这一点.

更新

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

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

scrollView需要约束,因此它的边缘是self.view的0px.

contentView需要约束,因此它的边距是scrollView的0px,宽度等于self.view.这是contentSize旋转设备时scrollView更新的内容.

接下来,只需按照您想要的方式放置所有图像和标签.标签需要左右约束,以便计算其高度.需要注意的重要事项是contentView将根据其子视图的约束来确定其高度,因此您需要约束"链接"contentView的顶部和底部.一个simeple示例看起来像这样.

• contentView top to imageView top
• imageView height ==一些值
• imageView底部标签顶部
• 标签底部到contentView底部