Question

我想在Objective-C中绘制一个15 * 15的网格。网格颜色为蓝色，就像制作诺基亚“蛇”游戏的主板一样。

我尝试使用for循环来创建子视图，但它似乎无法正常工作，我查看了互联网，其中大多数都使用UIImageView来制作网格，是否有任何解决方案用于制作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，堆叠视图可以很好地布置视图网格：

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

Answer 2

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

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

你甚至可以输入你需要的行/列：

在视图.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;
            }

        }
}

您也可以使用网格颜色进行游戏!!!

如何通过在Objective-C中使用for循环将视图创建为网格（例如9 * 9网格，15 * 15网格）

2 个答案: