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

Question

我正在 iOS 5 中试验一些关于 UIProgressView 的新属性。它们是：

@property(nonatomic, retain) UIImage *progressImage;
@property(nonatomic, retain) UIImage *trackImage;

这些新属性支持自定义“progress”和“track”图像，这样您就可以制作精美的进度条，而无需滚动您的-拥有。

然而，我无法理解 Apple 如何“拉伸”进度图像，因为文档有点古怪/或者有一些我不知道的标准。 无论如何，我想问是否有人可以帮助我了解如何取得适当的进展和跟踪图像。

无论我尝试哪种尺寸，当我加载自定义图像时，我都会得到这样的结果：

我的测量结果如下：

• UIProgressView 长度：226 个单位
• trackingImage.png：10px
• progressImage.png: 7px

最后，这是我的自定义图片：

progressImage.png

trackImage.png

Answer 1

这是怎么回事：

您提供给UIProgressView 的图像基本上被推入UIImageViews，UIImageView 正在拉伸图像以填充空间。

如果你只是这样做：

[progressView setTrackImage:[UIImage imageNamed:@"track.png"]];

然后你会得到奇怪的结果，因为它试图拉伸一个 10 像素宽的图像来填充（例如）一个 100 像素宽的图像视图。这意味着（大致）图像中的每个像素都将重复 10 次。所以如果我们图像中的像素是：

0123456789

然后将该图像直接放入 100 像素宽的图像视图中，会像这样拉伸它：

000000000011111111112222222222333333333344444444445555555555...

这就是发生在你身上的事情。

您真正希望发生的事情是这样的：

01234567812345678123456781234567812345678...123456789

换句话说，您希望图像有一个从不拉伸的 1 点左边缘、要平铺的中心和一个也从不拉伸的 1 点右边缘。为此，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 点边框）。

对progressImage 执行相同操作，您最终会得到看起来正确的结果：

tl;博士：

您的图片需要调整大小。