我正在以编程方式构建 View 并使用自动布局,根本没有界面生成器。在自定义ScrollView Controller 中,我将添加UILabel和UIButton作为 subview 。我想将标签对准屏幕的左侧,并将按钮对准屏幕的右侧。由于某种原因,我的按钮仅与滚动 View 的左侧对齐。我已经缩减了代码,以便仅使用这两个标签,并且我不明白为什么它无法与右侧对齐。

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

- (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个像素的偏移量以显示其位置。)那么,为什么滚动 View 的右侧实际上是左侧?如何正确对齐屏幕右侧?我哪里做错了?这真让我抓狂!

谢谢你的帮助!

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

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

最佳答案

约束的数量不是问题。 UILabelUIButton都将根据其intrinsicContentSize确定其大小,并且由于您对位置有限制,因此它应该具有布局所需的所有信息。

但是,当涉及到自动布局时,UIScrollViews会以独特的方式运行。最好的描述来自此technical note。有两个可用选项,包括示例,但这里是每个选项的摘要。

混合方法

您只需要在UIView中添加UIScrollView,然后将所有 subview 添加并放置在UIView中即可。这需要您手动设置frameUIViewcontentSize上的UIScrollView

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

纯自动布局方法

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

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

就个人而言,我将采用“自动布局”方法。它具有处理动态内容大小的能力,因此值得进行额外的约束设置。

如果您要发布最终的布局,我将更新答案以反射(reflect)出来。

更新

根据您发布的图像,这就是我使用“自动布局”方法组织 subview 的方式。主要区别在于UIScrollView现在是UIViewControllers View 的 subview 。

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

scrollView需要约束,因此其边缘距self.view为0px。

contentView需要约束,因此其边缘距scrollView为0px,并且其宽度等于self.view。这样,当您旋转设备时,scrollView的contentSize就会更新。

接下来,只需放置所有图像并按所需方式标记即可。标签将需要左右约束,以便可以计算其高度。需要注意的重要一点是contentView将基于其 subview 的约束来确定其高度,因此您将需要约束来“链接” contentView的顶部和底部。一个半个例子看起来像这样。
  • contentView顶部到图像View顶部
  • imageView高度==一些值
  • imageView底部以标记顶部
  • 标签底部到contentView底部
  • 关于ios - Auto Layout iOS 7-无法将 subview 的右边与UIScrollView的右边对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21616201/

    10-12 14:39
    查看更多