如何使用Objective中的for循环将视图创建为网格(例如9*9网格、15*15网格)

Question

我试图在目标C中绘制一个15*15的网格。网格颜色是蓝色的，就像诺基亚制作“蛇”游戏的棋盘一样。

我尝试过使用for循环来创建子视图，但它似乎不起作用，我查看了整个互联网，其中大多数都使用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

一种方法是使用bezierPath绘制自定义视图。如果需要3*3网格布局，则需要9条bezier路径！

YOu可以通过使用bezier路径实现这种结果：

​

YOu甚至可以输入您需要的行/cols：

在视图.h文件中声明属性：

   @property (assign) int row;
   @property (assign) int col;

您可以使用以下方法从视图控制器调用视图：

-(void)viewDidAppear:(BOOL)animated {

    [super viewDidAppear:animated];
    testView *tv = [[testView alloc]initWithFrame:CGRectMake(30, 50, 100, 100)];

    tv.row = 3;
    tv.col = 4;

    [self.view addSubview:tv];
}

在这里，我假设网格单元格大小为20x20。

-(void)drawRect:(CGRect)frame {

    int x = 0, y = 0;

        for (int i = 1; i <= _row*_col; i++) {

            UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRect: CGRectMake(CGRectGetMinX(frame) + x + 27, CGRectGetMinY(frame) + y + 13, 20, 20)];

            [UIColor.grayColor setFill];
            [rectanglePath fill];
            [UIColor.blackColor setStroke];
            rectanglePath.lineWidth = 1;
            [rectanglePath stroke];

            x = x + 20;

            if (i%_row == 0) {
                x = 0;
                y = y + 20;
            }

        }
}

你也可以玩网格颜色！

Answer 2

如果使用iOS 9，则堆叠视图处理很好地布局视图网格：

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版本，您可以自己添加构建网格，但它需要添加更多的约束，以使所有布局都正确。