Drawing Image with Alternating Colors

Question

How can we draw a background pattern (to be set to UIImageView) programmatically like the following?

It has alternating colored squares like 20 x 20 pixels. I can do it with REAL Stupid and MS Visual Basic. I have never done it with iOS. If I run a search, one clue that I get is colorWithPatternImage. I used the following REAL Stupid code a few years ago. It works regardless of the dimensions of the canvas (equivalent to UIImageView).

Dim i,j As Integer
For j=0 To Ceil(CanvasX.Height/20)
For i=0 To Ceil(CanvasX.Width/20)
  If i Mod 2=0 And j Mod 2=0 Then
    If CField1.text="1" Then
      g.ForeColor=&cCC9900
    Elseif CField1.text="2" Then
      g.ForeColor=&c000000
    Else
      g.ForeColor=&cCCCCCC
    End if
  Elseif i Mod 2>0 And j Mod 2>0 Then
    If CField1.text="1" Then
      g.ForeColor=&cCC9900
    Else
      g.ForeColor=&cCCCCCC
    End if
  Else
    If CField1.text="1" Then
      g.ForeColor=&cE6E6E6
    Else
      g.ForeColor=&cFFFFFF
    End if
  End if
  g.FillRect i*20,j*20,20,20
Next i
Next j

Thank you for your help.

Answer 1

Approach #1: take this image:

Then set a background color by specifying a pattern image:

UIImage *bgImage = [UIImage imageNamed:@"squares"];
UIColor *bgColor = [UIColor colorWithPatternImage:bgImage];
someView.backgroundColor = bgColor;

Approach #2: use Quartz. Subclass UIView, then implement the following method:

- (void)drawRect:(CGRect)rect
{
    [super drawRect:rect];

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    NSLog(@"%@", ctx);

    CGFloat ws = self.frame.size.width;
    CGFloat hs = self.frame.size.height;

    const int side = 10;

    int nx = ws / side;
    int ny = hs / side;

    CGRect rects[nx / 2];

    for (int i = 0; i < ny; i++) {
        for (int j = 0; j < nx; j += 2) {
            rects[j / 2] = CGRectMake(j * side, i * side, side, side);
        }

        const static CGFloat w[4] = { 1.0, 1.0, 1.0, 1.0 };
        const static CGFloat g[4] = { .75, .75, .75, .75 };

        if (i % 2) {
            CGContextSetFillColor(ctx, g);
        } else {
            CGContextSetFillColor(ctx, w);
        }
        CGContextFillRects(ctx, rects, nx / 2);

        for (int j = 1; j < nx; j += 2) {
            rects[j / 2] = CGRectMake(j * side, i * side, side, side);
        }


        if (i % 2) {
            CGContextSetFillColor(ctx, w);
        } else {
            CGContextSetFillColor(ctx, g);
        }
        CGContextFillRects(ctx, rects, nx / 2);
    }
}