What is this new UI component and how do i code it - iphone

Question

I need to create the UI component shown in the image below, and also i need to know;
What is it called? (The grey colored box)
How do i add an image or any other UI component to it?
Is there any sample code or tutorial available creating this?
The image

Answer 1

In answer to your questions:
1) What is it called?
I'd go with UIView - with the cornerRadius of it's CALayer set, and a semi-transparent background colour.
2) How do i add an image or any other UI component to it?
[myview addSubview: someSubview];
3) Is there any sample code or tutorial available creating this?
It really sounds like you need to read the Apple docs.

Answer 2

I think that's MBProgressHUD.
https://github.com/jdg/MBProgressHUD

Answer 3

MBProgressHud have no progress bar. I've created one by using PDColoredProgressView and Three20
It looks like this:
and goes that way:
.h file
#import <UIKit/UIKit.h>
#import "PDColoredProgressView.h"
#interface SVProgressHudView : UIView<PDColoredProgressViewDelegate>{
UIView* bgView;
UILabel* _titleLabel;
PDColoredProgressView* _progress;
UILabel* _percentLabel;
UILabel* _subtitleLabel;
NSUInteger _numOfSteps;
NSUInteger _currentStep;
CGFloat _currentStepProgress;
CGFloat _oneStepPart;
CGFloat _extraStepPart;
BOOL _removeFromSuperViewOnHide;
BOOL _extraStep;
UIButton* _closeButton;
}
#property (nonatomic, assign)BOOL removeFromSuperViewOnHide;
+(SVProgressHudView *)hudAddedTo:(UIView *)view withTitle:(NSString*)title numberOfSteps:(NSUInteger)numberOfSteps extraStep:(BOOL)exrta;
+(BOOL)isThereHudAddedToView:(UIView*)view;
-(id)initWithFrame:(CGRect)frame title:(NSString*)title numberOfSteps:(NSUInteger)numberOfSteps extraStep:(BOOL)exrta;
-(void)show:(BOOL)animated;
-(void)hide:(BOOL)animated;
-(void)setCurrentStepProgress:(CGFloat)currentProgress animated:(BOOL)animated;
-(void)setCurrentStep:(NSUInteger)currentStep animated:(BOOL)animated;
-(void)setExtraStepProgress:(CGFloat)progress animated:(BOOL)animated;
-(void)setSuccessSubtitle:(NSString*)subtitle;
-(void)setCloseButtonTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;
#end
.m file:
#import "SVProgressHudView.h"
#import <QuartzCore/QuartzCore.h>
#import <Three20/Three20.h>
#import "Three20UI/UIViewAdditions.h"
#import "Globals.h"
#import "SVGradientButton.h"
#define kMinimumWidth 100
#define kMinimumHeight 100
#define kHorizontalMargin 20
#define kVerticalMargin 20
#define kLittleVerticalMargin 7
#define kCornerRadius 10
#define kOpacity 0.85
static UIFont* regularSubtextFont;
static UIFont* successSubtextFont;
#interface SVProgressHudView(Private)
-(void)done;
#end
#implementation SVProgressHudView
#synthesize
removeFromSuperViewOnHide = _removeFromSuperViewOnHide;
+(void)initialize{
regularSubtextFont = [[UIFont systemFontOfSize:[UIFont systemFontSize]+3]retain];
successSubtextFont = [[UIFont systemFontOfSize:[UIFont systemFontSize]+3]retain];
}
- (id)initWithFrame:(CGRect)frame{
CGFloat minimumWidth = kMinimumWidth+kHorizontalMargin*2;
CGFloat minimumHeight = kMinimumHeight + kVerticalMargin*2;
//to ensure we can place it inside that frame
if(frame.size.width>=minimumWidth && frame.size.height >=minimumHeight){
self = [super initWithFrame:frame];
if (self) {
CGFloat bgWidth = frame.size.width - kHorizontalMargin*2;
bgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, bgWidth, kMinimumHeight)];
bgView.backgroundColor = [[UIColor blackColor]colorWithAlphaComponent:kOpacity];
bgView.clipsToBounds = YES;
bgView.center = CGPointMake(self.width/2.0, self.height/2.0);
bgView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin;
bgView.layer.cornerRadius = 10.0;
bgView.layer.masksToBounds = YES;
[self addSubview:bgView];
UIImage* closeImage = [UIImage imageNamed:#"xButton.png"];
_closeButton = [UIButton buttonWithType:UIButtonTypeCustom];
_closeButton.frame = CGRectMake(0, 0, closeImage.size.width*1.5, closeImage.size.height*1.5);
[_closeButton setBackgroundImage:closeImage forState:UIControlStateNormal];
[_closeButton addTarget:self action:#selector(closeFired) forControlEvents:UIControlEventTouchUpInside];
_closeButton.right = bgView.right +_closeButton.width/3;
[self addSubview:_closeButton];
_titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(kHorizontalMargin, kVerticalMargin, bgWidth-kHorizontalMargin*2, 20)];
_titleLabel.textColor = [UIColor whiteColor];
_titleLabel.textAlignment = UITextAlignmentCenter;
_titleLabel.backgroundColor = [UIColor clearColor];
[bgView addSubview:_titleLabel];
_progress = [[PDColoredProgressView alloc]initWithProgressViewStyle:UIProgressViewStyleDefault];
_progress.delegate = self;
[_progress setBackgroundColor:[UIColor clearColor]];
[_progress setTintColor:[UIColor colorWithWhite:0.5 alpha:1.0]];//[Globals defaultTintColorForNavBar]];
[bgView addSubview:_progress];
[_progress sizeToFit];
_progress.top = _titleLabel.bottom+kVerticalMargin;
_progress.width = bgWidth-kHorizontalMargin*2-kCornerRadius*2;
_progress.left = kHorizontalMargin+kCornerRadius;
_progress.progress = 0.0;
_percentLabel = [[UILabel alloc]initWithFrame:CGRectMake(_progress.left, _progress.bottom+kLittleVerticalMargin, _progress.width/2, 20)];
_percentLabel.textColor = [UIColor whiteColor];
_percentLabel.textAlignment = UITextAlignmentLeft;
_percentLabel.backgroundColor = [UIColor clearColor];
_percentLabel.font = regularSubtextFont;
[bgView addSubview:_percentLabel];
_subtitleLabel = [[UILabel alloc]initWithFrame:CGRectMake(_percentLabel.right, _percentLabel.top, _percentLabel.width, 20)];
_subtitleLabel.textColor = [UIColor whiteColor];
_subtitleLabel.textAlignment = UITextAlignmentRight;
_subtitleLabel.backgroundColor = [UIColor clearColor];
_subtitleLabel.font = regularSubtextFont;
[bgView addSubview:_subtitleLabel];
bgView.height = _subtitleLabel.bottom+kVerticalMargin;
bgView.center = self.center;
_closeButton.top = bgView.top - _closeButton.height/3;
_extraStep = NO;
}
}
return self;
}
-(id)initWithFrame:(CGRect)frame title:(NSString*)title numberOfSteps:(NSUInteger)numberOfSteps extraStep:(BOOL)exrta{
self = [self initWithFrame:frame];
if(self){
_titleLabel.text = title;
_numOfSteps = numberOfSteps;
_extraStep = exrta;
if(_extraStep){
CGFloat stepPart = 1.0/numberOfSteps;
_extraStepPart = stepPart/10;
_oneStepPart = (1.0-_extraStepPart)/numberOfSteps;
}else{
_oneStepPart = 1.0/numberOfSteps;
}
[self setCurrentStep:0 animated:NO];
}
return self;
}
-(void)dealloc{
TT_RELEASE_SAFELY(_titleLabel);
TT_RELEASE_SAFELY(_subtitleLabel);
TT_RELEASE_SAFELY(_percentLabel);
TT_RELEASE_SAFELY(_progress);
TT_RELEASE_SAFELY(bgView);
[super dealloc];
}
#pragma mark - Showing and Hiding
- (void)show:(BOOL)animated {
self.alpha = 0.0;
// Fade in
if (animated) {
[UIView animateWithDuration:0.3
animations:^{
self.alpha = 1.0;
}];
}else {
self.alpha = 1.0;
}
}
- (void)hide:(BOOL)animated {
if (animated) {
[UIView animateWithDuration:0.3
animations:^{
self.alpha = 0.2;
}
completion:^(BOOL finished) {
[self done];
}];
}
else {
[self done];
}
}
#pragma mark - Private Methods
- (void)done {
self.alpha = 0.0;
if (_removeFromSuperViewOnHide) {
[self removeFromSuperview];
}
}
#pragma mark - Public Methods
+ (BOOL)isThereHudAddedToView:(UIView*)view{
for (UIView *v in [view subviews]) {
if ([v isKindOfClass:[SVProgressHudView class]]) {
return YES;
}
}
return NO;
}
+ (SVProgressHudView *)hudAddedTo:(UIView *)view withTitle:(NSString*)title numberOfSteps:(NSUInteger)numberOfSteps extraStep:(BOOL)exrta{
SVProgressHudView *hud = [[SVProgressHudView alloc] initWithFrame:view.bounds title:title numberOfSteps:numberOfSteps extraStep:exrta];
hud.alpha = 0.0;
[view addSubview:hud];
return [hud autorelease];
}
-(void)setCurrentStepProgress:(CGFloat)currentStepProgress animated:(BOOL)animated{
if(currentStepProgress < 0.0){
currentStepProgress = 0.0;
}
if(currentStepProgress > 1.0){
currentStepProgress = 1.0;
}
CGFloat currentProgress = _oneStepPart*_currentStep;
currentProgress += _oneStepPart*currentStepProgress;
[_progress setProgress:currentProgress animated:animated];
}
-(void)setCurrentStep:(NSUInteger)currentStep animated:(BOOL)animated{
if(currentStep > _numOfSteps){
currentStep = _numOfSteps;
}
_currentStep = currentStep;
_subtitleLabel.text = [NSString stringWithFormat:#"%d/%d",currentStep+1,_numOfSteps];
_subtitleLabel.font = regularSubtextFont;
[self setCurrentStepProgress:0.0 animated:animated];
}
-(void)setExtraStepProgress:(CGFloat)progress animated:(BOOL)animated{
if(progress < 0.0){
progress = 0.0;
}
if(progress > 1.0){
progress = 1.0;
}
if(progress == 1.0){
//hide the close button
_closeButton.hidden = YES;
}
CGFloat currentProgress = _oneStepPart*_numOfSteps;
currentProgress += _extraStepPart*progress;
[_progress setProgress:currentProgress animated:animated];
}
-(void)progressUpdated:(PDColoredProgressView *)progressView toValue:(CGFloat)value{
_percentLabel.text = [NSString stringWithFormat:#"%d%%",(int)(value*100)];
}
-(void)setSuccessSubtitle:(NSString *)subtitle{
[_progress setProgress:1.0 animated:YES];
_subtitleLabel.text = subtitle;
_subtitleLabel.font = successSubtextFont;
}
-(void)closeFired{
[_progress cancelAnimations];
}
-(void)setCloseButtonTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents{
[_closeButton addTarget:target action:action forControlEvents:controlEvents];
}
#end
It's far from being perfect as it was created for specific purpose, but it's doing the job.Hope it helps.Happy coding.