ios - 如何在 Objective-C 中使用 for 循环将 View 创建为网格(例如 9*9 网格、15*15 网格)

Question

我想在 Objective-C 中绘制一个 15*15 的网格。格子颜色是蓝色的，就像在诺基亚制作“贪吃蛇”游戏的棋盘一样。

我试过使用 for 循环来创建 subview ，但它似乎不起作用，我查看了互联网，大多数人都使用 UIImageView 来制作网格，是否有使用 for 制作 15*15 网格的解决方案循环还是我必须使用 UIImageView 方法？

- (void)viewDidLoad {
[super viewDidLoad];

int i;
int row = 0;
int col = 0;
int firstColor=0;

if ([[UIDevice currentDevice] userInterfaceIdiom]== UIUserInterfaceIdiomPhone){
    cellWidth = 23;
    CellHeight= cellWidth;
    topY=230-4*CellHeight;
    leftX=110-4*cellWidth;
}else{

    cellWidth=46;
    CellHeight=cellWidth;
    topY=500-4*CellHeight;
    leftX=384-4*cellWidth;
}


UIView *viewA = [[UIView alloc]initWithFrame:CGRectMake(0, 30, 414, 434)];
viewA.backgroundColor = [UIColor blackColor];
[self.view addSubview:viewA];


for (int row = 0; row < rows; row = row++ ){
    for(int r = 0; r <= 414; r = r + 23){
    UIView *viewB = [[UIView alloc]initWithFrame:CGRectMake(r,5,23,23)];
    viewB.backgroundColor = [UIColor blueColor];

    [viewA addSubview:viewB];}}





col=col+1;
firstColor=1-firstColor;
if (col>18){
    row=row+1;
    firstColor=1-firstColor;
    col=0;
}

Answer 1

如果使用 iOS 9，堆叠 View 可以很好地处理 View 网格的布局:

NSInteger n = 15;

UIStackView *rowView = [[UIStackView alloc] init];
rowView.translatesAutoresizingMaskIntoConstraints = false;
rowView.axis = UILayoutConstraintAxisHorizontal;
rowView.distribution = UIStackViewDistributionFillEqually;
[self.view addSubview:rowView];

for (NSInteger row = 0; row < n; row++) {
    UIStackView *columnView = [[UIStackView alloc] init];
    columnView.translatesAutoresizingMaskIntoConstraints = false;
    columnView.axis = UILayoutConstraintAxisVertical;
    columnView.distribution = UIStackViewDistributionFillEqually;
    [rowView addArrangedSubview:columnView];
    for (NSInteger col = 0; col < n; col++) {
        UIView *view = [[UIView alloc] init];
        view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256) / 255.0
                                               green:arc4random_uniform(256) / 255.0
                                                blue:arc4random_uniform(256) / 255.0
                                               alpha:1.0];
        view.translatesAutoresizingMaskIntoConstraints = false;
        view.layer.borderColor = [UIColor blackColor].CGColor;
        view.layer.borderWidth = 0.5;

        [columnView addArrangedSubview:view];

        // make it it the width of the column stack view, and 1/n of the height of the column stack view

        [columnView addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth  relatedBy:NSLayoutRelationEqual toItem:columnView attribute:NSLayoutAttributeWidth  multiplier:1 constant:0]];
        [columnView addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:columnView attribute:NSLayoutAttributeHeight multiplier:1.0 / (CGFloat)n constant:0]];
    }
}

// make it square

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:rowView attribute:NSLayoutAttributeWidth  relatedBy:NSLayoutRelationEqual toItem:rowView attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];

// center it

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:rowView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:rowView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];

// ensure it never exceeds 80% of the width or height of super view

NSLayoutConstraint *maxWidthConstraint  = [NSLayoutConstraint constraintWithItem:rowView attribute:NSLayoutAttributeWidth  relatedBy:NSLayoutRelationLessThanOrEqual toItem:self.view attribute:NSLayoutAttributeWidth  multiplier:0.8 constant:0];
NSLayoutConstraint *maxHeightConstraint = [NSLayoutConstraint constraintWithItem:rowView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationLessThanOrEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.8 constant:0];
[self.view addConstraints:@[maxWidthConstraint, maxHeightConstraint]];

// But have it take up 80% of either the width or height of super view

NSLayoutConstraint *preferredWidthConstraint  = [NSLayoutConstraint constraintWithItem:rowView attribute:NSLayoutAttributeWidth  relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth  multiplier:0.8 constant:0];
preferredWidthConstraint.priority = 900;
NSLayoutConstraint *preferredHeightConstraint = [NSLayoutConstraint constraintWithItem:rowView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.8 constant:0];
preferredHeightConstraint.priority = 900;
[self.view addConstraints:@[preferredWidthConstraint, preferredHeightConstraint]];

产生:

如果针对较早的 iOS 版本，您可以自己添加构建网格，但这需要添加更多约束才能正确布局所有内容。