Auto Layout iOS 7-无法将子视图的右边与UIScrollView的右边对齐 [英] Auto Layout iOS 7 - Can't align right of subview to right of UIScrollView
问题描述
我正在以编程方式构建视图并使用自动布局，根本没有界面生成器.在自定义ScrollView控制器中，我将添加UILabel和UIButton作为子视图.我想将标签对准屏幕的左侧，并将按钮对准屏幕的右侧.由于某种原因，我的按钮仅与滚动视图的左侧对齐.我已经缩减了代码，以便仅使用这两个标签，而我不明白为什么它无法向右对齐.
I am programmatically building a view and using autolayout, no interface builder at all. In a custom ScrollView controller, I am adding a UILabel and a UIButton as subviews. I want to align the label to the left of the screen, and the button to the right of the screen. For some reason, my button only aligns to the left of my scrollview. I've pared down my code so that it's only these two labels and I can't understand why it won't align to the right.
HWScrollViewController.m(我如何初始化主滚动视图)
HWScrollViewController.m (How I'm initializing the main scroll view)
- (void)loadView
{
self.scrollView = [[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
self.scrollView.delegate = self;
self.view = self.scrollView;
}
HWListingDetailViewController.m
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个像素的偏移量以显示其位置.)那么，为什么滚动视图的右侧实际上是左侧?如何正确对齐屏幕右侧?我哪里做错了?这让我发疯了！
As you can see, the green price label is aligned correctly, but the red button is way off of the lefthand side of the screen. (I gave it 5 pixels of offset to show where it was.) So, why is the right side of the scrollview actually the left side? How can I properly align to the right of the screen? Where did I go wrong? This is driving me crazy!
感谢您的帮助！
最终版面图片: 我希望最终的布局是这样的:
Final layout images: I'm hoping for the final layout to be something like this:
，如果旋转到横向，我希望它看起来像这样:
and I would expect it to look like this if rotated to landscape:
推荐答案
约束的数量不是问题. UILabel和UIButton都将根据其intrinsicContentSize确定其大小，并且由于您对该位置有限制，因此它应该具有布局所需的所有信息.
The number of constraints is not an issue. Both UILabel and UIButton will determine their size based on their intrinsicContentSize and since you have constraints for the position, it should have all the information it needs for layout.
但是，当涉及到自动布局时，UIScrollViews会以独特的方式表现.最好的描述来自此技术说明.有两个可用选项，包括示例，但这里是每个示例的摘要.
However, when it comes to autolayout, UIScrollViews behave in a unique way. The best description comes from this technical note. There are two options available including examples, but heres a summary of each.
混合方法
您只需要在UIScrollView中添加UIView，然后将所有子视图添加并放置在UIView的frame和UIScrollView上的contentSize.
You just need to add a UIView to the UIScrollView then add and position all your subviews in the UIView. This requires you manually setting the frame of the UIView and the contentSize on the UIScrollView.
这可能是最容易与您尝试实现的布局一起使用的布局.但是，如果contentSize可以更改，则必须手动计算和更新大小.
This is probably the easiest to use with the layout your trying to achieve. However, if the contentSize can change, you'll have to manually calculate and update the size.
纯自动布局方法
此选项使用自动布局约束来确定UIScrollView的contentSize.这需要约束到UIScrollView的所有四个边缘，并且不能依赖UIScrollView的大小.
This option uses your autolayout constraints to determine the contentSize of the UIScrollView. This requires constraints going to all four edges of the UIScrollView and can not rely on the size of the UIScrollView.
此选项很难使用，因为您需要确保有足够的约束.在您的情况下，您会遇到问题，因为UIScrollView的顶部和底部没有约束，并且没有可用于确定UIScrollView宽度的约束.但是，当您必须处理动态内容时，此选项非常棒，因为它会根据需要调整contentSize的大小.
This option is tougher to use since you need to make sure you have enough constraints. In your case, you'll run into issues because there are no constraints to the top and bottom of the UIScrollView and there are no constraints that can be used to determin the width of the UIScrollView. However, this option is amazing when you have to deal with dynamic content as it will resize the contentSize as needed.
就个人而言，我会采用自动布局"方法.处理动态内容大小的能力使额外的约束设置值得.
Personally, I would go with the Pure Auto Layout Approach. It's ability to handle dynamic content sizes makes the extra constraint setup worth it.
如果您发布所需的最终版式，我将更新答案以反映出来.
If you post what you want the final layout to be, I'll update my answer to reflect that.
更新
基于您发布的图像，这是我使用纯自动布局"方法组织子视图的方式.主要区别在于UIScrollView现在是UIViewControllers视图的子视图.
Based on the images you posted, this is the way I would organize the subviews using the Pure Auto Layout Approach. The main difference is that the UIScrollView is now a a subview of the UIViewControllers view.
- UIView (self.view)
- UIScrollView (scrollView)
- UIView (contentView)
- UIImageView, UIButtons, UILabels, etc.
scrollView需要约束，因此其边缘距self.view为0px.
scrollView needs constraints so its edges are 0px from self.view.
contentView需要约束，因此其边缘距scrollView为0px，并且其宽度等于self.view.因此，旋转设备时，scrollView的contentSize会更新.
contentView needs constraints so its edges are 0px from scrollView and that its width equals self.view. This is so the contentSize of the scrollView updates when you rotate the device.
接下来，只需将所有图像定位并按所需方式标记即可.标签将需要左右约束，以便可以计算其高度.需要注意的重要一点是contentView将基于其子视图的约束来确定其高度，因此您将需要约束来链接" contentView的顶部和底部.一个半个例子看起来像这样.
Next just position all your images and labels the way you want. The label will need to be constrained to the left and right so it can calculate its height. The important thing to note is contentView will determine its height based on the constraints for its subviews, so you will need constraints "linking" the top and bottom of the contentView. A simeple example would look like this.
- contentView顶部到imageView顶部
- imageView height ==一些值
- imageView从底部标记为顶部
- 标签底部到contentView底部
这篇关于Auto Layout iOS 7-无法将子视图的右边与UIScrollView的右边对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
