StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's what's going on:</p> <p>The images you provide to the <code>UIProgressView</code> are basically being shoved in to <code>UIImageViews</code>, and the <code>UIImageView</code> is stretching the image to fill the space.</p> <p>If you simply do:</p> <pre><code>[progressView setTrackImage:[UIImage imageNamed:@"track.png"]]; </code></pre> <p>Then you're going to get weird results, because it's trying to stretch a 10px wide image to fill (for example) a 100px wide image view. This means (roughly) that every pixel in the image will be repeated 10 times. So if the pixels in our image were:</p> <pre><code>0123456789 </code></pre> <p>Then putting that image straight into a 100px wide image view would stretch it something like this:</p> <pre><code>000000000011111111112222222222333333333344444444445555555555... </code></pre> <p>This is what's happening to you.</p> <p>What you <em>really</em> want to have happen is this:</p> <pre><code>01234567812345678123456781234567812345678...123456789 </code></pre> <p>In other words, you want the image to have a 1 point left edge that is never stretched, the center to be tiled, and to have a 1 point right edge that is also never stretched. To do this, <a href="http://developer.apple.com/library/ios/documentation/uikit/reference/UIImage_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40006890-CH3-SW50" rel="noreferrer">you'll need to make the image resizable</a>:</p> <pre><code>UIImage *track = [[UIImage imageNamed:@"track"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 1, 0, 1)]; [progressView setTrackImage:track]; </code></pre> <p>If you want this to tile appropriately vertically as well, then the edge insets should be <code>{1, 1, 1, 1}</code> (assuming you want a 1 point border).</p> <p>Do the same to the <code>progressImage</code>, and you'll end up with something that looks correct:</p> <p><img src="https://i.stack.imgur.com/hsTpl.png" alt="Correct progressView"></p> <h1>tl;dr:</h1> <p>Your images need to be resizable.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload