问题描述
我正在 iOS 5 中试验一些关于 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"图像,这样您就可以制作精美的进度条而无需滚动-拥有.
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 如何拉伸"进度图像,因为文档有点古怪/或者有一些我不知道的标准.无论如何,我想问是否有人可以帮助我了解如何取得适当的进展和跟踪图像.
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.
无论我尝试哪种尺寸,当我加载自定义图像时都会得到类似的结果:
I get results like this when I load my custom images, no matter which sizes I try:
我的测量结果如下:
- UIProgressView 长度:226 个单位
- 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"]];
然后你会得到奇怪的结果,因为它试图拉伸一个 10 像素宽的图像来填充(例如)一个 100 像素宽的图像视图.这意味着(大致)图像中的每个像素都将重复 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 像素宽的图像视图中,会像这样拉伸它:
Then putting that image straight into a 100px wide image view would stretch it something like this:
000000000011111111112222222222333333333344444444445555555555...
这就是发生在你身上的事情.
This is what's happening to you.
您真正希望发生的事情是这样的:
What you really want to have happen is this:
01234567812345678123456781234567812345678...123456789
换句话说,您希望图像有一个从不拉伸的 1 点左边缘、要平铺的中心和一个也从不拉伸的 1 点右边缘.为此,你需要调整图片大小:
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];
如果您也希望它垂直平铺,那么边缘插入应该是 {1, 1, 1, 1}
(假设您想要一个 1 点边框).
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).
对 progressImage
做同样的事情,你最终会得到看起来正确的东西:
Do the same to the progressImage
, and you'll end up with something that looks correct:
您的图片需要调整大小.
Your images need to be resizable.
这篇关于UIProgressView 和自定义跟踪和进度图像(iOS 5 属性)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!