objective-c - UIProgressView とカスタムのトラックと進行状況の画像 (iOS 5 プロパティ)

Question

に関して、iOS 5 でいくつかの新しいプロパティを試していますUIProgressView。彼らです：

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

これらの新しいプロパティにより、「progress」および「track」イメージのカスタマイズが可能になり、独自のロールを作成しなくても派手なプログレスバーを作成できます。

ただし、ドキュメントが少し不安定である/または私が認識していない標準があるため、Appleが進行状況の画像を「引き伸ばす」方法を理解できません。とにかく、誰かが適切な進歩と画像の追跡の方法を理解するのを手伝ってくれるかどうか尋ねています.

カスタム画像をロードすると、どのサイズを試しても、次のような結果が得られます。

進行例

私の測定値は次のとおりです。

最後に、これが私のカスタムイメージです。

進捗イメージ progressImage.png

追跡画像 trackImage.png

score 111 · Accepted Answer

何が起こっているかは次のとおりです。

に提供する画像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;dr:

画像はサイズ変更可能である必要があります。