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

Sea*_*ean 30 cocoa-touch objective-c uiprogressview ios5

我正在试验iOS 5中的一些新属性UIProgressView.他们是:

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

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

然而,我无法理解Apple如何" 延伸 "进度图像,因为文档有点不好/或者有一些我不知道的标准.无论如何,我问是否有人可以帮助我了解如何取得适当的进展和跟踪图像.

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

进展示例

我的测量结果如下:

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

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

进步图像 progressImage.png

跟踪图像 trackImage.png

Dav*_*ong 110

这是发生了什么:

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

如果您只是这样做:

[progressView setTrackImage:[UIImage imageNamed:@"track.png"]];
Run Code Online (Sandbox Code Playgroud)

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

0123456789
Run Code Online (Sandbox Code Playgroud)

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

000000000011111111112222222222333333333344444444445555555555...
Run Code Online (Sandbox Code Playgroud)

这就是发生在你身上的事.

真正想要的是:

01234567812345678123456781234567812345678...123456789
Run Code Online (Sandbox Code Playgroud)

换句话说,您希望图像具有从未拉伸的1点左边缘,要平铺的中心,以及也从不拉伸的1点右边缘.为此,您需要调整图像大小:

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

如果你希望这个也适当地垂直平铺,那么边缘插入应该是{1, 1, 1, 1}(假设你想要一个1点边框).

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

正确的进度

TL;博士:

您的图片需要调整大小.

  • 先生,你是上帝. (34认同)
  • 我可以给前评论更多点吗?@Sean LOL (2认同)