Positioning stretched UIImages correctly
<p>I am creating a UISegmentedControl replacement so that it works with your own custom images. Because the separators need different colors on both sides I decided to give the middle item the two borders.</p>

<p>Now to display the UISegmentedControl replacement, I calculate the available width for one item (frame.size.width / numberOfItems). Then I create a UIButton with a custom background image (the stretchable middle segment image). The next thing is to position everything. Because the 1px separators need to be visible when you select an item, I give every item a 1px larger frame than it actually should have. So the next item overlaps 1px to the left.</p>

<pre><code>segmentRect = CGRectMake(indexOfObject * (self.frame.size.width / numberOfSegments), 0, (self.frame.size.width / numberOfSegments) + 1, self.frame.size.height);
</code></pre>

<p>Using this result I get a <em>nearly</em> perfect custom UISegmentedControl (retina): <img src="http://i.stack.imgur.com/ZbkzC.png" alt="alt text"></p>

<p>Now things look pretty ok, but it all changes when adding more/less segments. This was a 300px wide control by the way, so each segment gets 25px of space. If I change that number to let's say 13, this shows up: <img src="http://i.stack.imgur.com/Q1YnT.png" alt="alt text"></p>

<p>Notice the slightly different border between the '3' and '4'. (Easier to spot on non-retina actually because of pixel doubling) I think this is caused by the not so nice amount of space each segment gets. (300 / 13 = 
23,0769) One should think that the stretchable image would accommodate for this, no? The separators are exactly 1px in width and I change the frame by 1px, so the two separators should be placed <em>exactly</em> on top of each other, which is definitely not the case here.</p>

<p>Does anyone have an explanation why this happens and more important a way to fix this?</p>
