Question

This problem must have been solved a million times, but Google has not been my friend.

I need to programmatically space a set of boxes to fill a certain length and be separated by a certain distance.

This is what I want:

alt text http://img257.imageshack.us/img257/3362/spacingiwant.png

Here is what I’m getting:

alt text http://img194.imageshack.us/img194/3506/spacingiget.png

Since I’m working in Objective-C using Core Graphics, I need a series of Rects that I can draw or drop an image into. My naive attempt draws a set of boxes with a certain spacing but leaves a space at the end.

Here is my code, which is in a drawRect: method

CGContextRef context = UIGraphicsGetCurrentContext(); 
CGFloat barStartX = 96;
CGFloat barStartY = 64.0;

CGFloat barWidth = 16;
CGFloat barHeight = 64;
CGFloat barGutter = 8;

int barSegments = 8;    

for (int segmentNumber = 0; segmentNumber <= (barSegments - 1); ++segmentNumber) {

    // get the box rect
    CGRect segment = CGRectMake(barStartX + (barWidth * segmentNumber), barStartY , barWidth - barGutter, barHeight);

    // plot box
    CGContextFillRect(context, segment);
}

Before I create an impenetrable monstrosity of one-off code that even I won’t understand 6 months from now, I’m wondering if there is a general solution to this spacing problem.

The answer doesn’t have to be in Objective-C, as long as it’s somewhat C-like. Readability has priority over performance considerations.

Answer 1

I think that despite your effort, this question is a bit unclear. Here’s my attempt, though.

The equation that you describes in the title is:

N*x + (N-1)*S = L

Solving that for x gives us the width necessarry for each box:

x = (L - (N-1)*S) / N

This would result in code similar to something like this:

CGContextRef context = UIGraphicsGetCurrentContext(); 

int barSegments = 8;

CGFloat barStartX = 96;
CGFloat barStartY = 64.0;
CGFloat barTotalWidth = 196.0;

CGFloat barHeight = 64;
CGFloat barGutter = 8;
CGFloat barWidth = (barTotalWidth - (barSegments-1)*barGutter) / barSegments;

for (int segmentNumber = 0; segmentNumber < barSegments; ++segmentNumber) {

        // get the box rect
        CGRect segment = CGRectMake(barStartX + ((barWidth + barGutter) * segmentNumber), barStartY , barWidth, barHeight);

        // plot box
        CGContextFillRect(context, segment);
}