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

Question

I need to create the UI component shown in the image below, and also i need to know;

1. What is it called? (The grey colored box)
2. How do i add an image or any other UI component to it?
3. 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

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.

Answer 3

I think that's MBProgressHUD.

https://github.com/jdg/MBProgressHUD