30

我正在尝试 iOS 5 中关于UIProgressView. 他们是:

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

这些新属性可以自定义“进度”和“轨道”图像,这样您就可以制作精美的进度条,而无需自己动手。

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

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

进度示例

我的测量如下:

  • UIProgressView 长度:226 个单位
  • 跟踪图像.png:10 像素
  • 进度图像.png:7px

最后,这是我的自定义图像:

进度图 progressImage.png

跟踪图像 trackImage.png

4

1 回答 1

111

这是发生了什么:

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

如果你只是这样做:

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

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

0123456789

然后将该图像直接放入 100px 宽的图像视图中,会像这样拉伸它:

000000000011111111112222222222333333333344444444445555555555...

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

真正想要发生的是:

01234567812345678123456781234567812345678...123456789

换句话说,您希望图像有一个从不拉伸的 1 点左边缘、要平铺的中心以及也从不拉伸的 1 点右边缘。为此,您需要使图像可调整大小

UIImage *track = [[UIImage imageNamed:@"track"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 1, 0, 1)];
[progressView setTrackImage:track];

如果您希望它也可以垂直平铺,那么边缘插图应该是{1, 1, 1, 1}(假设您想要一个 1 点边框)。

对 做同样的progressImage事情,你最终会得到看起来正确的东西:

正确的进度视图

tl;博士:

您的图像需要可调整大小。

于 2011-11-02T14:19:41.043 回答