Here is an easy way that I’ve come up with to skin the default UIProgressView in an iOS application using just 2 images, and implementing the drawRect: method.
This is what the default progress view looks like:
…and here is our custom skinned version.
To achieve this you will need 2 images: one for the background, and
one for the fill. The images that I’ve shown here were designed by Darran Morris so please give credit if you use them.
Update: You can download the images I’ve used here: progress-bar-bg.png, progress-bar-fill.png
Once you have your images created like mine above, create a new Objective-C class. In your header file make it a subclass of UIProgressView.
#import <UIKit/UIKit.h>
@interface CustomProgressView : UIProgressView {
}
@end
Next in your implementation file we will create and use our images to draw the progress bar. Note that the images have to be “stretchable” in order to work correctly and to be able to render at different widths and heights.
#import "CustomProgressView.h"
#define kCustomProgressViewFillOffsetX 1
#define kCustomProgressViewFillOffsetTopY 1
#define kCustomProgressViewFillOffsetBottomY 3
@implementation CustomProgressView
- (void)drawRect:(CGRect)rect {
CGSize backgroundStretchPoints = {4, 9}, fillStretchPoints = {3, 8};
// Initialize the stretchable images.
UIImage *background = [[UIImage imageNamed:@"progress-bar-bg.png"] stretchableImageWithLeftCapWidth:backgroundStretchPoints.width
topCapHeight:backgroundStretchPoints.height];
UIImage *fill = [[UIImage imageNamed:@"progress-bar-fill.png"] stretchableImageWithLeftCapWidth:fillStretchPoints.width
topCapHeight:fillStretchPoints.height];
// Draw the background in the current rect
[background drawInRect:rect];
// Compute the max width in pixels for the fill. Max width being how
// wide the fill should be at 100% progress.
NSInteger maxWidth = rect.size.width - (2 * kCustomProgressViewFillOffsetX);
// Compute the width for the current progress value, 0.0 - 1.0 corresponding
// to 0% and 100% respectively.
NSInteger curWidth = floor([self progress] * maxWidth);
// Create the rectangle for our fill image accounting for the position offsets,
// 1 in the X direction and 1, 3 on the top and bottom for the Y.
CGRect fillRect = CGRectMake(rect.origin.x + kCustomProgressViewFillOffsetX,
rect.origin.y + kCustomProgressViewFillOffsetTopY,
curWidth,
rect.size.height - kCustomProgressViewFillOffsetBottomY);
// Draw the fill
[fill drawInRect:fillRect];
}
@end
That’s it! Now you can use this progress view like you would any other UIView by calling initWithFrame: and passing a CGRect – and since the images are stretchable you can make it any size you want.
출처 : http://goto11.net/skinning-a-uiprogressview-with-drawrect-and-images/
'프로그래밍 > iOS' 카테고리의 다른 글
ZXing 라이브러리를 이용한 QR코드 리더 앱 개발하기 #1. ZXing 라이브러리 추가 (0) | 2012.04.25 |
---|---|
zbar & beep sounds for QR code (0) | 2012.04.25 |
iOS 앱 개발시 AES 256으로 데이터 암호화하여 저장하기와 복호화하여 읽어오기 (0) | 2012.04.24 |
iCloud관련 리젝 사례 (0) | 2012.04.24 |
iCloude관련 리젝시 (0) | 2012.04.24 |