Question

in my application I have a class name playGrid which contains three objects, an NSArray of images named plays, and two NSUIntegers rowCount and columCount for the amount of rows and columns in the popover that will be used.

For this example, I have 6 images and I am trying to show them over 2 columns and three rows. I am trying to display these views in a popover. Previously I was able to do this with blocks of colors, but now that I am trying to do with images I am unable to generate the popover correctly. Listed below is my drawRect code for the successful popover that shows the colors.

How would I convert this to work with UIImages instead of the colors?

In the example below, rowCount and columnCount are 2 and 3 just like the one we are trying to make, but the array is named colors, and contains six UIColor items.

- (void)drawRect:(CGRect)rect {
CGRect b = self.bounds;
CGContextRef myContext = UIGraphicsGetCurrentContext();
CGFloat columnWidth = b.size.width / columnCount;
CGFloat rowHeight = b.size.height / rowCount;

for (NSUInteger rowIndex = 0; rowIndex < rowCount; rowIndex++) {
  for (NSUInteger columnIndex = 0; columnIndex < columnCount; columnIndex++) {
    NSUInteger colorIndex = rowIndex * columnCount + columnIndex;
    UIColor *color = [self.colors count] > colorIndex ? [self.colors objectAtIndex:colorIndex] : [UIColor whiteColor];
      CGRect r = CGRectMake(b.origin.x + columnIndex * columnWidth,
                        b.origin.y + rowIndex * rowHeight,
                        columnWidth, rowHeight);
    CGContextSetFillColorWithColor(myContext, color.CGColor);
    CGContextFillRect(myContext, r);


  }
 }
}

I know I will not need certain things like the color or the CGContextSetFillColorWithColor line, but how do i replace myContent with the image, it seems like this is what I would have to do, but I have not been able to successfully do this. Thanks again for your help as I am newer to Objective C.

Answer 1

Assuming that you want to continue to do drawing into the view using drawRect:, I think you just want to use the drawInRect: method on UIImage.

So:

UIImage *image = [plays objectAtIndex:rowIndex * columnCount + columnIndex];
[image drawInRect:r];

I’ve heard the performance of drawInRect is not great – but I haven’t measured it myself. Note also that drawInRect: scales the image to fit the rect as needed; so visually, the results may not be what you intend.

An alternative is to compose your popover’s view in a nib where you could layout your view statically. If you always want a 2×3 matrix, you could setup your view there with a 2×3 grid of UIImageView instances.

EDIT: (to clarify that you are drawing images in the rects now, no filling blocks of color)

- (void)drawRect:(CGRect)rect {
    CGRect b = self.bounds;
    CGContextRef myContext = UIGraphicsGetCurrentContext();
    CGFloat columnWidth = b.size.width / columnCount;
    CGFloat rowHeight = b.size.height / rowCount;

    for (NSUInteger rowIndex = 0; rowIndex < rowCount; rowIndex++) {
        for (NSUInteger columnIndex = 0; columnIndex < columnCount; columnIndex++) {
            CGRect r = CGRectMake(b.origin.x + columnIndex * columnWidth,
                        b.origin.y + rowIndex * rowHeight,
                        columnWidth, rowHeight);
            UIImage *image = [plays objectAtIndex:rowIndex * columnCount + columnIndex];
            [image drawInRect:r];
        }
    }
}