我在UIStackView
内包含一个UICollectionViewCell
,以表示社交网络上的帖子(与Instagram的单元格类似的样式)。 UIStackView
包含作者 header (自定义UIView
),内容图像的UIImageView
,帖子正文的UILabel
和操作的UIToolbar
。最终 View 看起来像this。
通过设置尺寸调整单元格来设置UICollectionViewCell的高度,如下所示:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
NTVFeedBlogCollectionViewCell *cell = [[NTVFeedBlogCollectionViewCell alloc] initWithFrame:CGRectMake(10.0f, 0.0f, collectionView.frame.size.width - 20.0f, 900000.0)];
// ...
// Configure the cell
// ...
[cell setNeedsLayout];
[cell layoutIfNeeded];
CGSize size = [cell systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
return CGSizeMake(CGRectGetWidth(collectionView.frame) - 20.0f, size.height);
}
问题在于UIImageView似乎正在增加UICollectionViewCell的大小,而没有增加 ImageView 的大小。当我将大图像添加到 ImageView 时,为This is the result。期望的结果是使图像保持1:1的纵横比,并限制在UIStackView的宽度上。
主体标签与其余内容之间的间隙大小根据我使用的图像而变化。这使我相信
UIStackView
在某种程度上仅考虑了单元格大小的图像大小,因为在视觉上 ImageView 是其正确大小。如您在发布的第一张图像中所看到的,当未设置 ImageView 的图像时,该单元完美地布置。这是堆栈 View , ImageView 和标签的设置代码:
self.stackView = [[UIStackView alloc] initWithFrame:CGRectZero];
self.stackView.translatesAutoresizingMaskIntoConstraints = NO;
self.stackView.axis = UILayoutConstraintAxisVertical;
self.stackView.distribution = UIStackViewDistributionFill;
self.stackView.alignment = UIStackViewAlignmentFill;
self.stackView.spacing = 10.0f;
self.stackView.layoutMargins = UIEdgeInsetsMake(10.0f, 10.0f, 0.0f, 10.0f);
self.stackView.layoutMarginsRelativeArrangement = YES;
[self addSubview:self.stackView];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[stackView]-0-|"
options:0
metrics:nil
views:@{@"stackView": self.stackView}]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[stackView]-0-|"
options:0
metrics:nil
views:@{@"stackView": self.stackView}]];
self.imageView = [[UIImageView alloc] initWithFrame:CGRectZero];
[self.imageView setImage:[UIImage imageNamed:@"sample_image.png"]];
self.imageView.translatesAutoresizingMaskIntoConstraints = NO;
self.imageView.contentMode = UIViewContentModeScaleAspectFill;
self.imageView.clipsToBounds = YES;
self.imageView.layer.masksToBounds = YES;
self.imageView.backgroundColor = [UIColor greenColor];
[self.imageView setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisVertical];
[self.imageView setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisVertical];
[self.stackView addArrangedSubview:self.imageView];
[self.stackView addConstraint:[NSLayoutConstraint constraintWithItem:self.imageView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:self.stackView
attribute:NSLayoutAttributeWidth
multiplier:1.0f
constant:0.0f]];
self.bodyLabel = [[UILabel alloc] initWithFrame:CGRectZero];
[self.bodyLabel setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisVertical];
[self.bodyLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisVertical];
self.bodyLabel.font = [UIFont ntv_lightFontWithSize:17.0f];
self.bodyLabel.textColor = [UIColor whiteColor];
self.bodyLabel.numberOfLines = 0;
self.bodyLabel.text = @"While the stack view allows you to layout its contents without using Auto Layout directly, you still need to use Auto Layout to position the stack view, itself.";
[self.stackView addArrangedSubview:self.bodyLabel];
self.accessoryView = [[NTVAccessoryView alloc] initWithFrame:CGRectZero];
self.accessoryView.viewModel = [NTVAccessoryManagerViewModel_Stubbed new];
[self.stackView addArrangedSubview:self.accessoryView];
有任何想法吗?
最佳答案
我们想通了!如文档中所述,UIStackView
使用其intrinsicContentSize
的arrangedSubviews
计算其高度。UIImageView
将其intrinsicContentSize
报告为图像的整个大小(正如您所期望的那样)。 UIStackView
忽略了我的高度限制,只使用了 ImageView 的intrinsicContentSize
。
为了解决这个问题,我创建了一个UIImageView
子类,该子类允许调用者设置intrinsicContentSize
。可以在here中找到此代码。
然后,在布局传递完成后,在UICollectionViewCell
中设置UIImageView子类的intrinsicContentSize
:
- (void)layoutSubviews {
[super layoutSubviews];
// Constrain the image view's content size to match the stackview's width.
self.imageView.constrainedSize = CGSizeMake(self.stackView.frame.size.width, self.stackView.frame.size.width);
[super layoutSubviews];
}
关于ios - UIStackView错误地计算了UIImageView的高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33369666/