我需要在我的应用程序（iOS 6.0 及更高版本）中以编程方式创建几个不同宽度的 UIButton。
我想以“环绕”样式显示按钮：从左边缘开始，每个按钮应水平放置（按定义的顺序），并且如果按钮不适合当前“行” ，它应该在前一行下方的左边缘开始新的一行。
注意：我不想要表格/网格，因为按钮有不同的宽度，我希望有一个彼此相邻。
我可以手动计算代码中每个按钮的框架，但我应该使用 AutoLayout（使用以编程方式创建的 NSLayoutConstraints）来代替吗？我究竟需要如何设置它？
编辑：通读“iOS 6 by Tutorials”的第 4 章“中级自动布局”后，我不确定使用纯 AutoLayout 是否可以实现我需要的这种“环绕”功能。
我当前的解决方案如下所示：没有自动布局，但为每种情况手动设置正确的约束（第一个按钮，新行中最左边的按钮，任何其他按钮）。
（我的猜测是直接为每个按钮设置框架会导致比使用 NSLayoutConstraints 更具可读性的代码，无论如何）
NSArray *texts = @[ @"A", @"Short", @"Button", @"Longer Button", @"Very Long Button", @"Short", @"More Button", @"Any Key"];
int indexOfLeftmostButtonOnCurrentLine = 0;
NSMutableArray *buttons = [[NSMutableArray alloc] init];
float runningWidth = 0.0f;
float maxWidth = 300.0f;
float horizontalSpaceBetweenButtons = 10.0f;
float verticalSpaceBetweenButtons = 10.0f;
for (int i=0; i<texts.count; i++) {
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button setTitle:[texts objectAtIndex:i] forState:UIControlStateNormal];
[button sizeToFit];
button.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:button];
// check if first button or button would exceed maxWidth
if ((i == 0) || (runningWidth + button.frame.size.width > maxWidth)) {
// wrap around into next line
runningWidth = button.frame.size.width;
if (i== 0) {
// first button (top left)
// horizontal position: same as previous leftmost button (on line above)
NSLayoutConstraint *horizontalConstraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0f constant:horizontalSpaceBetweenButtons];
[self.view addConstraint:horizontalConstraint];
// vertical position:
NSLayoutConstraint *verticalConstraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0f constant:verticalSpaceBetweenButtons];
[self.view addConstraint:verticalConstraint];
} else {
// put it in new line
UIButton *previousLeftmostButton = [buttons objectAtIndex:indexOfLeftmostButtonOnCurrentLine];
// horizontal position: same as previous leftmost button (on line above)
NSLayoutConstraint *horizontalConstraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:previousLeftmostButton attribute:NSLayoutAttributeLeft multiplier:1.0f constant:0.0f];
[self.view addConstraint:horizontalConstraint];
// vertical position:
NSLayoutConstraint *verticalConstraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:previousLeftmostButton attribute:NSLayoutAttributeBottom multiplier:1.0f constant:verticalSpaceBetweenButtons];
[self.view addConstraint:verticalConstraint];
indexOfLeftmostButtonOnCurrentLine = i;
}
} else {
// put it right from previous buttom
runningWidth += button.frame.size.width + horizontalSpaceBetweenButtons;
UIButton *previousButton = [buttons objectAtIndex:(i-1)];
// horizontal position: right from previous button
NSLayoutConstraint *horizontalConstraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:previousButton attribute:NSLayoutAttributeRight multiplier:1.0f constant:horizontalSpaceBetweenButtons];
[self.view addConstraint:horizontalConstraint];
// vertical position same as previous button
NSLayoutConstraint *verticalConstraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:previousButton attribute:NSLayoutAttributeTop multiplier:1.0f constant:0.0f];
[self.view addConstraint:verticalConstraint];
}
[buttons addObject:button];
}
除了使用自动布局，您可以只使用集合视图，它可以更好地选择布局按钮等元素。
它也能够更好地处理旋转下的布局。
这是我们如何使用自动布局实现包装布局的另一个示例：
@interface SCHorizontalWrapView : UIView
@property(nonatomic)NSMutableArray *wrapConstrains;
@end
@implementation SCHorizontalWrapView {
CGFloat intrinsicHeight;
BOOL updateConstraintsCalled;
}
-(id)init {
self = [super init];
if (self) {
[UIView autoSetPriority:UILayoutPriorityDefaultHigh forConstraints:^{
[self autoSetContentCompressionResistancePriorityForAxis:ALAxisVertical];
[self autoSetContentCompressionResistancePriorityForAxis:ALAxisHorizontal];
[self autoSetContentCompressionResistancePriorityForAxis:ALAxisHorizontal];
[self autoSetContentCompressionResistancePriorityForAxis:ALAxisVertical];
}];
}
return self;
}
-(void)updateConstraints {
if (self.needsUpdateConstraints) {
if (updateConstraintsCalled == NO) {
updateConstraintsCalled = YES;
[self updateWrappingConstrains];
updateConstraintsCalled = NO;
}
[super updateConstraints];
}
}
-(NSMutableArray *)wrapConstrains {
if (_wrapConstrains == nil) {
_wrapConstrains = [NSMutableArray new];
}
return _wrapConstrains;
}
-(CGSize)intrinsicContentSize {
return CGSizeMake(UIViewNoIntrinsicMetric, intrinsicHeight);
}
-(void)setViews:(NSArray*)views {
if (self.wrapConstrains.count > 0) {
[UIView autoRemoveConstraints:self.wrapConstrains];
[self.wrapConstrains removeAllObjects];
}
NSArray *subviews = self.subviews;
for (UIView *view in subviews) {
[view removeFromSuperview];
}
for (UIView *view in views) {
view.translatesAutoresizingMaskIntoConstraints = NO;
[self addSubview:view];
CGFloat leftPadding = 0;
[view autoSetDimension:ALDimensionWidth toSize:CGRectGetWidth(self.frame) - leftPadding relation:NSLayoutRelationLessThanOrEqual];
}
}
-(void)updateWrappingConstrains {
NSArray *subviews = self.subviews;
UIView *previewsView = nil;
CGFloat leftOffset = 0;
CGFloat itemMargin = 5;
CGFloat topPadding = 0;
CGFloat itemVerticalMargin = 5;
CGFloat currentX = leftOffset;
intrinsicHeight = topPadding;
int lineIndex = 0;
for (UIView *view in subviews) {
CGSize size = view.intrinsicContentSize;
if (previewsView) {
[self.wrapConstrains addObject:[view autoPinEdgeToSuperviewEdge:ALEdgeTop withInset:topPadding relation:NSLayoutRelationGreaterThanOrEqual]];
[self.wrapConstrains addObject:[view autoPinEdgeToSuperviewEdge:ALEdgeLeading withInset:leftOffset relation:NSLayoutRelationGreaterThanOrEqual]];
CGFloat width = size.width;
currentX += itemMargin;
if (currentX + width <= CGRectGetWidth(self.frame)) {
[self.wrapConstrains addObject:[view autoConstrainAttribute:ALEdgeLeading toAttribute:ALEdgeTrailing ofView:previewsView withOffset:itemMargin relation:NSLayoutRelationEqual]];
[self.wrapConstrains addObject:[view autoAlignAxis:ALAxisBaseline toSameAxisOfView:previewsView]];
currentX += size.width;
}else {
[self.wrapConstrains addObject: [view autoConstrainAttribute:ALEdgeTop toAttribute:ALEdgeBottom ofView:previewsView withOffset:itemVerticalMargin relation:NSLayoutRelationGreaterThanOrEqual]];
currentX = leftOffset + size.width;
intrinsicHeight += size.height + itemVerticalMargin;
lineIndex++;
}
}else {
[self.wrapConstrains addObject:[view autoPinEdgeToSuperviewEdge:ALEdgeTop withInset:topPadding relation:NSLayoutRelationEqual]];
[self.wrapConstrains addObject:[view autoPinEdgeToSuperviewEdge:ALEdgeLeading withInset:leftOffset relation:NSLayoutRelationEqual]];
intrinsicHeight += size.height;
currentX += size.width;
}
[view setNeedsUpdateConstraints];
[view updateConstraintsIfNeeded];
[view setNeedsLayout];
[view layoutIfNeeded];
previewsView = view;
}
[self invalidateIntrinsicContentSize];
}
@end
这里我使用PureLayout来定义约束。
你可以像这样使用这个类：
SCHorizontalWrapView *wrappingView = [[SCHorizontalWrapView alloc] initForAutoLayout];
//parentView is some view
[parentView addSubview:wrappingView];
[tagsView autoPinEdgeToSuperviewEdge:ALEdgeLeading withInset:padding];
[tagsView autoPinEdgeToSuperviewEdge:ALEdgeTrailing withInset:padding];
[tagsView autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:locationView withOffset:padding relation:NSLayoutRelationGreaterThanOrEqual];
[tagsView setNeedsLayout];
[tagsView layoutIfNeeded];
[tagsView setNeedsUpdateConstraints];
[tagsView updateConstraintsIfNeeded];
NSMutableArray *views = [NSMutableArray new];
//texts is some array of nsstrings
for (NSString *text in texts) {
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.translatesAutoresizingMaskIntoConstraints = NO;
[button setTitle:text forState:UIControlStateNormal];
button.backgroundColor = [UIColor lightGrayColor];
[views addObject:button];
}
[tagsView setViews:views];