我对以下场景使用布局约束有疑问。一切都在代码中(没有 Nib 或 Storyboard)。我想创建一个包含任意数量的项目行的 View 。每行包含任意数量的 subview 。
为了创建这个 View ,我想传入一个两层深的数组。第一级数组包含每一行。第二级数组包含每一行中的元素。因此,例如,这可能看起来像这样:
NSArray *elements = @[@[subview1, subview2, subview3], @[subview4], @[subview5, subview6]]
在这个数组中,会有 3 行:
1)第1行: subview 1、 subview 2、 subview 3
2)第2行:subview4
3)第3行: subview 5、 subview 6
我希望这些元素的格式为:
-行都应该是它们父 View 的全宽(为此我们可以假设它是屏幕的大小)
- 一行中的每个元素都应具有相同的宽度,并且它们之间的间距应相同(例如,如果有 4 个元素,则 1&2 和 2&3 之间的间距可以为 10pt)
- 每行之间的垂直间距应相同(例如,每行之间的垂直间距为 10pt)
在上面的场景中,第 1 行将有 3 个等宽的 subview ,第 2 行将有 1 个占据行的整个宽度的 subview ,第 3 行将有 2 个等宽的 subview ,并且将间距相等。
那么,问题是,我该怎么做?!
我已经研究了一段时间,但我的理解似乎并没有好转。帮助将不胜感激!
最佳答案
我认为这样的事情应该可行。我试着做一般的,所以它应该适用于不同数量的行和每行的元素。
#define subviewHeight 44
#define spaceFromTop 10
#define spaceFromSide 10
#define subviewVerticalSpacing 10
#define subviewHorizontalSpacing 10
@implementation ViewController
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
UIButton *subview1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[subview1 setTitle:@"View 1" forState:UIControlStateNormal];
UIButton *subview2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[subview2 setTitle:@"View 2" forState:UIControlStateNormal];
UIButton *subview3 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[subview3 setTitle:@"View 3" forState:UIControlStateNormal];
UIButton *subview4 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[subview4 setTitle:@"View 4" forState:UIControlStateNormal];
UIButton *subview5 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[subview5 setTitle:@"View 5" forState:UIControlStateNormal];
UIButton *subview6 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[subview6 setTitle:@"View 6" forState:UIControlStateNormal];
NSArray *arrayOfSubviews = @[@[subview1, subview2, subview3], @[subview4], @[subview5, subview6]];
[self addSubviewsWithConstraints:arrayOfSubviews];
}
-(void)addSubviewsWithConstraints:(NSArray *) arrayOfArrays {
NSMutableArray *arrayOfViewsDicts = [NSMutableArray array]; // make the views dictionaries needed for the views parameter of constraintsWithVisualFormat:options:metrics:views:. One for each row.
for (NSArray *array in arrayOfArrays) {
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
for (int i = 0; i < array.count; i++) {
[dict setObject:array[i] forKey:[NSString stringWithFormat:@"view%d",i]];
}
[arrayOfViewsDicts addObject:dict];
}
for (int i=0; i<arrayOfArrays.count; i++) {
NSString *formatString = [self makeConstraintsForRowOfSubviews:arrayOfArrays[i] withViewsDict:arrayOfViewsDicts[i]]; // Make the format string for a row of subviews
for (id subview in arrayOfArrays[i]) {
[subview setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:subview];
NSLayoutConstraint *heightCon = [NSLayoutConstraint constraintWithItem:subview attribute:NSLayoutAttributeHeight relatedBy:0 toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:subviewHeight];
[subview addConstraint:heightCon];
NSLayoutConstraint *verticalCon = [NSLayoutConstraint constraintWithItem:subview attribute:NSLayoutAttributeTop relatedBy:0 toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:spaceFromTop + ((subviewHeight + subviewVerticalSpacing)*i)];
[self.view addConstraint:verticalCon];
}
NSArray *cons = [NSLayoutConstraint constraintsWithVisualFormat:formatString options:NSLayoutFormatAlignAllBottom metrics:nil views:arrayOfViewsDicts[i]];
[self.view addConstraints:cons];
}
}
-(NSString *) makeConstraintsForRowOfSubviews:(NSArray *) arrayOfSubviews withViewsDict:(NSDictionary *) viewsDict {
NSMutableString *formatString = [NSMutableString string];
for (int i = 0; i<arrayOfSubviews.count; i++) {
if (i == 0) {
[formatString appendFormat:@"|-%d-[%@]",spaceFromSide,[viewsDict allKeysForObject:arrayOfSubviews[i]][0]];
}else{
[formatString appendFormat:@"-%d-[%@(==view0)]",subviewHorizontalSpacing,[viewsDict allKeysForObject:arrayOfSubviews[i]][0]];
}
}
[formatString appendFormat:@"-%d-|",spaceFromSide];
return formatString;
}
这段代码产生了这样的结果:
关于ios - 使用 NSLayoutConstraints 均匀间隔多行任意数量的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16205409/