我正在以编程方式构建 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 的右侧实际上是左侧?如何正确对齐屏幕右侧?我哪里做错了?这真让我抓狂!
谢谢你的帮助!
最终版面图片:
我希望最终的布局是这样的:
如果旋转到横向,我希望它看起来像这样:
最佳答案
约束的数量不是问题。 UILabel
和UIButton
都将根据其intrinsicContentSize
确定其大小,并且由于您对位置有限制,因此它应该具有布局所需的所有信息。
但是,当涉及到自动布局时,UIScrollViews
会以独特的方式运行。最好的描述来自此technical note。有两个可用选项,包括示例,但这里是每个选项的摘要。
混合方法
您只需要在UIView
中添加UIScrollView
,然后将所有 subview 添加并放置在UIView
中即可。这需要您手动设置frame
的UIView
和contentSize
上的UIScrollView
。
这可能是最容易与您尝试实现的布局一起使用的。但是,如果contentSize
可以更改,则必须手动计算和更新大小。
纯自动布局方法
此选项使用自动布局约束来确定contentSize
的UIScrollView
。这需要约束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的顶部和底部。一个半个例子看起来像这样。
关于ios - Auto Layout iOS 7-无法将 subview 的右边与UIScrollView的右边对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21616201/