CODEWITHSUNDEEP
iosxcodeuinavigationcontrolleruinavigationbar
Jeff
Jeff

Reputation: 1403

Activity indicator at the centre of Navigation Bar

In my application I want add activity indicator at the centre of navigation bar(title position).when web service response completed it should replace with the old title.I have 5 navigation bars in my application.When I searched in google I got several codes but they are simply changing the left or right bar button.Any help ?

Upvotes: 11

Views: 5688

Answers (4)

Vyacheslav
Vyacheslav

Reputation: 27211

Swift 4

of pasql

private func showActivityIndicator() {
    let activityIndicatorView = UIActivityIndicatorView(activityIndicatorStyle: .white)
    activityIndicatorView.frame = CGRect(x: 0, y: 0, width: 14, height: 14)
    activityIndicatorView.color = .black
    activityIndicatorView.startAnimating()

    let titleLabel = UILabel()
    titleLabel.text = "...Connecting"
    titleLabel.font = UIFont.italicSystemFont(ofSize: 14)

    let fittingSize = titleLabel.sizeThatFits(CGSize(width: 200.0, height: activityIndicatorView.frame.size.height))
    titleLabel.frame = CGRect(x: activityIndicatorView.frame.origin.x + activityIndicatorView.frame.size.width + 8,
                              y: activityIndicatorView.frame.origin.y,
                              width: fittingSize.width,
                              height: fittingSize.height)

    let rect = CGRect(x: (activityIndicatorView.frame.size.width + 8 + titleLabel.frame.size.width) / 2,
                      y: (activityIndicatorView.frame.size.height) / 2,
                      width: activityIndicatorView.frame.size.width + 8 + titleLabel.frame.size.width,
                      height: activityIndicatorView.frame.size.height)
    let titleView = UIView(frame: rect)
    titleView.addSubview(activityIndicatorView)
    titleView.addSubview(titleLabel)

    navigationItem.titleView = titleView
}

private func hideActivityIndicator() {
    navigationItem.titleView = nil
}

Upvotes: 2

Waffeln
Waffeln

Reputation: 213

pasqls answer worked well for me, i've written it in swift

    func showActivityIndicator() {
        let activityIndicatorView = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.White)
        activityIndicatorView.frame = CGRectMake(0, 0, 14, 14)
        activityIndicatorView.color = UIColor.blackColor()
        activityIndicatorView.startAnimating()

        let titleLabel = UILabel.new()
        titleLabel.text = "...Connecting"
        titleLabel.font = UIFont.italicSystemFontOfSize(14)

        let fittingSize = titleLabel.sizeThatFits(CGSizeMake(200.0, activityIndicatorView.frame.size.height))
        titleLabel.frame = CGRectMake(activityIndicatorView.frame.origin.x + activityIndicatorView.frame.size.width + 8, activityIndicatorView.frame.origin.y, fittingSize.width, fittingSize.height)

        let titleView = UIView(frame: CGRectMake(((activityIndicatorView.frame.size.width + 8 + titleLabel.frame.size.width) / 2), ((activityIndicatorView.frame.size.height) / 2), (activityIndicatorView.frame.size.width + 8 + titleLabel.frame.size.width), (activityIndicatorView.frame.size.height)))
        titleView.addSubview(activityIndicatorView)
        titleView.addSubview(titleLabel)

        self.navigationItem.titleView = titleView
    }

    func hideActivityIndicator() {
        self.navigationItem.titleView = nil
    }

Upvotes: 12

pasql
pasql

Reputation: 3825

Also, if you want to add a text label next to the activity indicator (as done by Apple in the settings app, e.g. Facebook Login), you can do this:

- (void)showActivityIndicator
{
    UIActivityIndicatorView *activityIndicatorView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
    activityIndicatorView.frame = CGRectMake(0, 0, 22, 22);
    activityIndicatorView.color = [UIColor blackColor];
    [activityIndicatorView startAnimating];

    UILabel *titleLabel = [UILabel new];
    titleLabel.text = @"Creating Account";
    titleLabel.font = [UIFont boldFlatFontOfSize:18];

    CGSize fittingSize = [titleLabel sizeThatFits:CGSizeMake(200.0f, activityIndicatorView.frame.size.height)];
    titleLabel.frame = CGRectMake(activityIndicatorView.frame.origin.x + activityIndicatorView.frame.size.width + 8,
                                  activityIndicatorView.frame.origin.y,
                                  fittingSize.width,
                                  fittingSize.height);

    UIView *titleView = [[UIView alloc] initWithFrame:CGRectMake(-(activityIndicatorView.frame.size.width + 8 + titleLabel.frame.size.width)/2,
                                                                 -(activityIndicatorView.frame.size.height)/2,
                                                                 activityIndicatorView.frame.size.width + 8 + titleLabel.frame.size.width,
                                                                 activityIndicatorView.frame.size.height)];
    [titleView addSubview:activityIndicatorView];
    [titleView addSubview:titleLabel];

    self.navigationItem.titleView = titleView;
}

- (void)hideActivityIndicator
{
    self.navigationItem.titleView = nil;
}

Upvotes: 2

rdelmar
rdelmar

Reputation: 104082

You use the titleView property of the navigation item to replace the title of a navigation bar. So to add an activity indicator, just do this:

    UIActivityIndicatorView *aiView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
    aiView.hidesWhenStopped = NO; //I added this just so I could see it
    self.navigationItem.titleView = aiView;

When you want to remove it, and show the title again:

    self.navigationItem.titleView = nil;

Upvotes: 20

Related Questions