[iOS] 超簡単に処理中のUIを出せるSVProgressHUDについて

2016.02.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

SVProgressHUDとは、タスクが進行中であることを簡潔に表示することができるUIです。 このライブラリでは、このトップに表示されるビューをHUDと呼んでおり、ここでもそう呼ぶことにします。

001

SVProgressHUD on Appetize.io.においてデモを確認することができます。 一発でイメージをつかめると思いますので、是非お試しください。

SVProgressHUDは、MITライセンスで公開されており、CocoaPodで簡単にインストールが可能です。

pod 'SVProgressHUD', :git => 'https://github.com/SVProgressHUD/SVProgressHUD.git'

参考:CocoaPodsによる、外部ライブラリの利用と作成

なお、2016年2月現在、GitHubのmasterの最新は、2.0-beta8です。 GitHubを指定しないで、Cocoapodsから落とすと、バージョンは、1.1.3となり、かなり機能不足ですので 、GitHubのリポジトリ指定をお勧めします。

ライブラリの導入後は、下記のインポートで利用可能になります。

#import "SVProgressHUD.h"

2 HUDの表示

HUDの表示は、次のインスタンスメソッドで簡単に行うことができます。

showメソッドで、単純に表示します。

[SVProgressHUD show]; // インジケータのみ

002

文字を一緒に表示する場合は、showWithStatusを使用します。

[SVProgressHUD showWithStatus:@"Status"]; // 文字列付き

003

showProgressだと、指定角度(0.0〜1.0)までインジケータを進めます。

[SVProgressHUD showProgress:0.3]; // 指定分だけインジケータを進める
//[SVProgressHUD showProgress:0.3 status:@"Status"]; // 指定分だけインジケータを進める(文字付きはこちら)

004

この場合、上記のようにとまってしまうので、アプリで逐次進める必要があります。 次のコードは、その一例です。

float progress;

- (IBAction)tapButton:(id)sender {
    progress = 0.1;
    [SVProgressHUD showProgress:progress];
    // 0.3秒後にintevalを呼ぶ
    [self performSelector:@selector(interval) withObject:nil afterDelay:0.3f];
}

- (void)interval {
    progress += 0.1f;// 数値を上げて
    [SVProgressHUD showProgress:progress]; // HUD表示

    if(progress < 1.0f){
        // 0.3秒後にintervelを呼ぶ
        [self performSelector:@selector(interval) withObject:nil afterDelay:0.3f];
    } else {
        // HUDを消す
        [SVProgressHUD dismiss];
    }
}

005

3 HUDの消去

dismissで直ちにHUDを消去します。

<br />  [SVProgressHUD dismiss]; // 直ちに消去
// [SVProgressHUD dismissWithDelay:0.5]; // 0.5秒後に消去

4 HUDのポップアップ

次のコードで、 HUDを一定時間ポップアップします。 表示される時間は、0.5〜5秒間、指定したメッセージの長さに依存します。

<br />[SVProgressHUD showInfoWithStatus:(NSString *)@"Infomation"];

006

<br />[SVProgressHUD showErrorWithStatus:@"ERROR"];

009

<br />[SVProgressHUD showSuccessWithStatus:@"Success"];

007

<br />UIImage *image = [UIImage imageNamed:@"classmethod.png"];
[SVProgressHUD showImage:image status:@"Classmethod, Inc."];

008

5 スタイル

setDefaultStyleを使用してスタイルを変更できます。

<br />[SVProgressHUD setDefaultStyle:SVProgressHUDStyleDark];

指定できるのは、次の3種類です。

  • SVProgressHUDStyleLight // デフォルト
  • SVProgressHUDStyleDark
  • SVProgressHUDStyleCustom
007 010 011

最後のものSVProgressHUDStyleCustomを使用して、次の設定しました。

[SVProgressHUD setDefaultStyle:SVProgressHUDStyleCustom];
[SVProgressHUD setForegroundColor: [UIColor yellowColor]];
[SVProgressHUD setBackgroundColor: [UIColor redColor]];

6 マスク

setDefaultMaskTypeを使用して、HUDを表示している間の、バックの状態を指定できます。

[SVProgressHUD setDefaultMaskType:SVProgressHUDMaskTypeBlack];

指定できるのは、次の4種類です。

  • SVProgressHUDMaskTypeBlack
  • SVProgressHUDMaskTypeClear // バッグのUIは操作できない
  • SVProgressHUDMaskTypeGradient
  • SVProgressHUDMaskTypeNone  //バッグのUIも操作できる

SVProgressHUDMaskTypeClearSVProgressHUDMaskTypeNoneは、見た目は同じですが、バッグになっているUIを操作できるかどうか違いがあります。

012 013 014 015

6 アニメーション

setDefaultAnimationTypeを使用して、アニメメーションの種類を変更できます。

[SVProgressHUD setDefaultAnimationType:SVProgressHUDAnimationTypeNative];

指定できるのは、次の2種類です。

  • SVProgressHUDAnimationTypeFlat // デフォルト
  • SVProgressHUDAnimationTypeNative
016 017

7 カスタム

上記の他にも、次のようなメソッドが用意されており、きめ細かく設定できそうです。

// default is CGSizeZero, can be used to avoid resizing for a larger message
+ (void)setMinimumSize:(CGSize)minimumSize;                         
// default is 2 pt
+ (void)setRingThickness:(CGFloat)width;                            
// default is 18 pt
+ (void)setRingRadius:(CGFloat)radius;                              
// default is 24 pt
+ (void)setRingNoTextRadius:(CGFloat)radius;                        
// default is 14 pt
+ (void)setCornerRadius:(CGFloat)cornerRadius;                      
// default is [UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline]
+ (void)setFont:(UIFont*)font;                                      
// default is [UIColor blackColor], only used for SVProgressHUDStyleCustom
+ (void)setForegroundColor:(UIColor*)color;                         
// default is [UIColor whiteColor], only used for SVProgressHUDStyleCustom
+ (void)setBackgroundColor:(UIColor*)color;                         
// default is the bundled info image provided by Freepik
+ (void)setInfoImage:(UIImage*)image;                               
// default is bundled success image from Freepik
+ (void)setSuccessImage:(UIImage*)image;                            
// default is bundled error image from Freepik
+ (void)setErrorImage:(UIImage*)image;                              
// default is nil, only used if #define SV_APP_EXTENSIONS is set
+ (void)setViewForExtension:(UIView*)view;                          
+ (void)setMinimumDismissTimeInterval:(NSTimeInterval)interval;

8 通知

SVProgressHUDでは、次の4種類の通知が実装されています。

  • SVProgressHUDWillAppearNotification //アニメーション開始
  • SVProgressHUDDidAppearNotification // アニメーション完了
  • SVProgressHUDWillDisappearNotification // アニメーションの消える前
  • SVProgressHUDDidDisappearNotification // アニメーションが消えた後

このNitificationを通信センターに登録しておくと、それぞれのタイミングで処理を記述することが可能になります。

- (void)viewDidLoad {
    [super viewDidLoad];

    [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(willDisappearNotification) name:SVProgressHUDWillDisappearNotification object: nil];
    [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(didDisappearNotification) name:SVProgressHUDDidDisappearNotification object: nil];
    [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(willAppearNotification) name:SVProgressHUDWillAppearNotification object: nil];
    [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(didAppearNotification) name:SVProgressHUDDidAppearNotification object: nil];
}

上記のようにNSNotificationCenterを設定すれば、下記のそれぞれのメソッドで通知を受け取ることができます。

<br />- (void) didDisappearNotification {
    NSLog(@"DidDisappearNotification");
}
- (void) willDisappearNotification {
    NSLog(@"WillDisappearNotification");
}
- (void) willAppearNotification {
    NSLog(@"DidDisappearNotification");
}
- (void) didAppearNotification {
    NSLog(@"DidAppearNotification");
}

画像をクリックすると動作が確認できます。

018

9 最後に

SVProgressHUDを使用すると、非常に簡単に処理中の表現が可能です。 一世代前より設定できる項目も増えているようなので今回まとめてみました。

10 参考資料


https://github.com/SVProgressHUD/SVProgressHUD
https://cocoapods.org/pods/SVProgressHUD