読者です 読者をやめる 読者になる 読者になる

MBProgressHUD を使ったローディング表示

iOS アプリがサーバーと通信している間ローディング表示を出すために、 MBProgressHUD を導入することにした。

MBProgressHUD の基本的な使い方。 まずサブビューに追加し、

self.hud = [[MBProgressHUD alloc] initWithView:self.view];
[self.view addSubview:self.hud];

メッセージをセットして表示。

self.hud. labelText = @"Logding...";
[self.hud show:YES];

閉じるときは

[self.hide hide:YES];

で OK。

MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:self.view animated:YES];

でも表示できるけど、中で勝手にサブビューに追加されるのが気に入らない。 ViewController 内で使いまわしたいので、メンバとして保持するようにしている。

MBProgressHUD が提供するのは、ローディング表示して閉じるだけ。 似た名前の SVProgressHUD みたいに、成功や失敗を表示する気の利いた機能は提供していない。 その代わりカスタムビューをセットできるから、自分で画像なり表示しろ、って感じだ。

SVProgressHUD っぽく使いたいので、自分は下記のようなカテゴリを作っている。

#import "MBProgressHUD.h"

@interface MBProgressHUD (Utils)

- (void)showWithStatus:(NSString*)string;
- (void)showSuccessWithStatus:(NSString*)string;
- (void)showErrorWithStatus:(NSString*)string;

@end
#import "MBProgressHUD+Utils.h"

@implementation MBProgressHUD (Utils)

- (void)showWithStatus:(NSString *)string
{
    self.labelText = string;
    self.mode = MBProgressHUDModeIndeterminate;
    [self show:YES];
}

- (void)showErrorWithStatus:(NSString *)string
{
    FAKIcon *icon = [FAKIonIcons ios7CloseIconWithSize:28];
    [icon addAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor]];
    UIImage *image = [icon imageWithSize:CGSizeMake(28, 28)];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    self.labelText = string;
    self.mode = MBProgressHUDModeCustomView;
    self.customView = imageView;
    [self hide:YES afterDelay:2.0];
}

- (void)showSuccessWithStatus:(NSString *)string
{
    FAKIcon *icon = [FAKIonIcons ios7CheckmarkIconWithSize:28];
    [icon addAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor]];
    UIImage *image = [icon imageWithSize:CGSizeMake(28, 28)];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    self.labelText = string;
    self.mode = MBProgressHUDModeCustomView;
    self.customView = imageView;
    [self hide:YES afterDelay:2.0];
}

@end

成功・失敗で表示するアイコンは FontAwesomeKit のものを使用。

使い方はこんな感じ。

[self.hud showWithStatus:@"Loading..."];
[self.hud showSuccessWithStatus:@"Success"];