問題描述
我正在 iOS 5 中試驗(yàn)一些關(guān)于 UIProgressView 的新屬性.它們是:
I am experimenting with some new properties in iOS 5 regarding UIProgressView. They are:
@property(nonatomic, retain) UIImage *progressImage;@property(nonatomic, retain) UIImage *trackImage;
這些新屬性支持自定義progress"和track"圖像，這樣您就可以制作精美的進(jìn)度條而無需滾動(dòng)-擁有.
These new properties enable the customisation of the "progress" and the "track" image, so that you can make fancy progress bars without having to roll-your-own.
然而，我無法理解 Apple 如何拉伸"進(jìn)度圖像，因?yàn)槲臋n有點(diǎn)古怪/或者有一些我不知道的標(biāo)準(zhǔn).無論如何，我想問是否有人可以幫助我了解如何取得適當(dāng)?shù)倪M(jìn)展和跟蹤圖像.
I however cannot understand how Apple "stretches" the progress images, because documentation is a little flakey / OR there is some standard I am not aware of. Regardless, I am asking if someone can help me understand how to make appropriate progress and tracking images.
無論我嘗試哪種尺寸，當(dāng)我加載自定義圖像時(shí)都會(huì)得到類似的結(jié)果:
I get results like this when I load my custom images, no matter which sizes I try:
我的測(cè)量結(jié)果如下:
- UIProgressView 長(zhǎng)度:226 個(gè)單位
- trackingImage.png:10 像素
- progressImage.png: 7px
最后，這是我的自定義圖片:
Lastly, here are my custom images:
progressImage.png
trackImage.png
推薦答案
這是怎么回事:
您提供給 UIProgressView 的圖像基本上被推入 UIImageViews，而 UIImageView 正在拉伸圖像以填充空間.
The images you provide to the UIProgressView are basically being shoved in to UIImageViews, and the UIImageView is stretching the image to fill the space.
如果你只是這樣做:
[progressView setTrackImage:[UIImage imageNamed:@"track.png"]];
然后你會(huì)得到奇怪的結(jié)果，因?yàn)樗噲D拉伸一個(gè) 10 像素寬的圖像來填充(例如)一個(gè) 100 像素寬的圖像視圖.這意味著(大致)圖像中的每個(gè)像素都將重復(fù) 10 次.所以如果我們圖像中的像素是:
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:
0123456789
然后將該圖像直接放入 100 像素寬的圖像視圖中，會(huì)像這樣拉伸它:
Then putting that image straight into a 100px wide image view would stretch it something like this:
000000000011111111112222222222333333333344444444445555555555...
這就是發(fā)生在你身上的事情.
This is what's happening to you.
您真正希望發(fā)生的事情是這樣的:
What you really want to have happen is this:
01234567812345678123456781234567812345678...123456789
換句話說，您希望圖像有一個(gè)從不拉伸的 1 點(diǎn)左邊緣、要平鋪的中心和一個(gè)也從不拉伸的 1 點(diǎn)右邊緣.為此，你需要調(diào)整圖片大小:
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, you'll need to make the image resizable:
UIImage *track = [[UIImage imageNamed:@"track"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 1, 0, 1)];
[progressView setTrackImage:track];
如果您也希望它垂直平鋪，那么邊緣插入應(yīng)該是 {1, 1, 1, 1}(假設(shè)您想要一個(gè) 1 點(diǎn)邊框).
If you want this to tile appropriately vertically as well, then the edge insets should be {1, 1, 1, 1} (assuming you want a 1 point border).
對(duì) progressImage 做同樣的事情，你最終會(huì)得到看起來正確的東西:
Do the same to the progressImage, and you'll end up with something that looks correct:
您的圖片需要調(diào)整大小.
Your images need to be resizable.
這篇關(guān)于UIProgressView 和自定義跟蹤和進(jìn)度圖像(iOS 5 屬性)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！