adding progress bar under navigation bar

Question

I am new to iOS development.

I would like to know if in iOS 7 when sending a message under UINavigationBar, which has a title called : Sending, there is a progress bar that is loading till the message is successfully sent.

My question is:

1. Is that bar a progress bar?

2. In iOS 6, the progress bar is inside the UINavigationBar?

Can someone give me some ideas about how to create this on iOS 7 and iOS6?

I haven't yet tried anything. I would like to read some tutorials or examples with this type of issue.

Here is my code:

int progress=50;

    CGRect navframe = [[self.navigationController navigationBar] frame];
    int height= navframe.size.height;
    sendView = [[UIView alloc] init];
    sendView.frame = CGRectMake(0, 0, 200, 30);
    sendView.backgroundColor = [UIColor clearColor];
    UILabel* lbl = [[UILabel alloc] init];
    lbl.frame = CGRectMake(0,0, 200, 15);
    lbl.backgroundColor = [UIColor clearColor];
    lbl.textColor = [UIColor whiteColor];
    lbl.shadowColor = [UIColor colorWithWhite:0 alpha:0.3];
    lbl.shadowOffset = CGSizeMake(0, -1);
    lbl.font = [UIFont boldSystemFontOfSize:12];
    lbl.text = @"";
    lbl.textAlignment = UITextAlignmentCenter;
    [sendView addSubview:lbl];
    UIProgressView* pv = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleBar];
    pv.frame = CGRectMake(0, 30-pv.frame.size.height, 200, pv.frame.size.height);
    pv.progress = progress/100.0;

  [sendView addSubview:pv];
    [self.navigationController.navigationBar addSubview:sendView];

Unfortunalty the progress bar is not under the navigationController. Why?

Solution 1

What I'm doing in my iOS app is to create and add a UIProgressBar as a subview of the Navigation bar, telling it [progressBar setTranslatesAutoresizingMaskIntoConstraints:NO], and adding constraints to pin it left and right to the bar, and its bottom to the bottom of the navigation bar. The navigation controller maintains an ivar to it, and offers public methods to show/hide it, and to set its value. Looks just like the one in Safari as content downloads.

EDIT: here is the code to create and add it to the nav bar:

// in UINavigationController subclass
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    UIProgressView *progress = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleBar];
    progress.tag = DISPLAY_PROGRESS_VIEW;
    [self.view addSubview:progress];
    UINavigationBar *navBar = [self navigationBar];

    NSLayoutConstraint *constraint;
    constraint = [NSLayoutConstraint constraintWithItem:progress attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:navBar attribute:NSLayoutAttributeBottom multiplier:1 constant:-0.5];
    [self.view addConstraint:constraint];

    constraint = [NSLayoutConstraint constraintWithItem:progress attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:navBar attribute:NSLayoutAttributeLeft multiplier:1 constant:0];
    [self.view addConstraint:constraint];

    constraint = [NSLayoutConstraint constraintWithItem:progress attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:navBar attribute:NSLayoutAttributeRight multiplier:1 constant:0];
    [self.view addConstraint:constraint];

    [progress setTranslatesAutoresizingMaskIntoConstraints:NO];
    progress.hidden = YES;
 }

Solution 2

I've created this simple UINavigationBar category for iOS 9 and later, which will do what you want:

UINavigationBar+MH.h

#import <UIKit/UIKit.h>

@interface UINavigationBar (MH)

@property (strong, nonatomic, readonly) UIProgressView *mh_progressView;

@end

UINavigationBar+MH.m

#import "UINavigationBar+MH.h"
#import <objc/runtime.h>

@implementation UINavigationBar (MH)

- (UIProgressView *)mh_progressView{
    // find prev instance
    UIProgressView *progress = objc_getAssociatedObject(self, "mh_progressView");
    if(!progress){
        progress = [UIProgressView.alloc initWithProgressViewStyle:UIProgressViewStyleBar];
        [self addSubview:progress];
        // pin to bottom
        [progress.leadingAnchor constraintEqualToAnchor:self.leadingAnchor].active = YES;
        [progress.trailingAnchor constraintEqualToAnchor:self.trailingAnchor].active = YES;
        [progress.bottomAnchor constraintEqualToAnchor:self.bottomAnchor].active = YES;
        progress.translatesAutoresizingMaskIntoConstraints = NO;
        // remember it
        objc_setAssociatedObject(self, "mh_progressView", progress, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    }
    return progress;
}

@end

In your view controller in viewDidLoad or later, simply do:

self.navigationController.navigationBar.mh_progressView.value = 0.5;

And it will appear exactly like it does in Safari. Because its on the navigation bar it will continue to appear even if the user navigates to a different screen, so excellent for a global task like file upload or sync.

Solution 3

may its late but hope it will help others ....

i used M13ProgressSuite for same purpose ..

Solution 4

For iOS 6: Create a custom UIView with the progress bar and a UIlabel, and then set it as the titleView property of your view controller's navigation item.

For iOS 7: Add a UIProgressBar just below the navigations' item navbar.

View more solutions

Comments

[just ME]

Thank you for your replay. I ve updated my code Could you help?

[just ME]

could you give me some concrete example?

[Sjakelien]

But how do I tell my ViewControllers to use this class as a NavigationController?

[David H]

@Sjakelien Create the subclass. Then in Interface Builder set the proper class in the class inspector.