UIProgressView 和自定义跟踪和进度图像(iOS 5 属性

问题描述

我正在 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 属性)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！