[iOS] UIWindow を追加して半透明のメニューを作成してみた

1 はじめに

前回、前々回と、UIWindowを追加する件について、色々確認して来ましたが、だいたいイメージが湧いたということで、今回は、これを応用して半透明のメニューを作成してみました。

[iOS] 複数のUIWindowの挙動を確認する
[iOS] UIWindowを追加する

2 半透明のメニュー

最初に、完成の様子をご覧ください。

左から出現するメニューが、独自に追加したUIWindowです。下になっているNavigationViewの上に重なっているのがわかると思います。

1 半透明のUIWindow

起動時にプロパティで宣言したUIWindowに対して生成して、とりあえず画面外に配置しています。 UIWindowの背景色は、Alpha値を0.5に設定して、下の絵が透けて見えるようにしています。

@interface ViewController ()<MenuDelegate,UIGestureRecognizerDelegate>
@property (strong,nonatomic)UIWindow *menu; // プロパティとして定義
@end

    ・・・省略・・・

- (void)viewDidLoad {
    [super viewDidLoad];

    _menu = [UIWindow new];//MyWindowの生成
    _menu.frame = CGRectMake(-180, 0, 180, [[UIScreen mainScreen] bounds].size.height); // 描画範囲(当初画面外に配置する
    _menu.backgroundColor = [UIColor.blackColor colorWithAlphaComponent:0.5];//背景色をAlpha値0.5の黒色に設定

    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Menu" bundle:nil];
    MenuViewController *menuViewController = [storyboard instantiateViewControllerWithIdentifier:@"MenuViewController"];
    menuViewController.delegate = self;
    _menu.rootViewController = menuViewController;

    [_menu makeKeyAndVisible];

    ・・・省略・・・
}

2 透明のビュー

UIWindowのルートには、ストーリーボドで作成したメニューを置きますが、こちらは、一番上のViewや、その下にあるTableViewもCellも、全て背景色を透明に設定しています。

3 ジェスチャーによるメニューの出現

viewDidLoadでSwipのジェスチャーを取得して

// swipdrag
UISwipeGestureRecognizer *leftSwip = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(didSwipe:)];
leftSwip.direction = UISwipeGestureRecognizerDirectionLeft;
[self.view addGestureRecognizer:leftSwip];

UISwipeGestureRecognizer *rightSwip = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(didSwipe:)];
rightSwip.direction = UISwipeGestureRecognizerDirectionRight;
[self.view addGestureRecognizer:rightSwip];

ジェスチャーに応じて、メニューの開閉を行っています。

#pragma mark - Gesture Recognizer Delegate

- (void) didSwipe : (UISwipeGestureRecognizer *)sender {
    if (sender.direction == UISwipeGestureRecognizerDirectionLeft){
        [self closeMenu];
    }else if(sender.direction == UISwipeGestureRecognizerDirectionRight){
        [self openMenu];
    }
}

#pragma mark - Action

- (void) openMenu
{
    [UIView animateWithDuration:0.2f animations:^ {
            _menu.frame = CGRectMake(0, 0, 180, [[UIScreen mainScreen] bounds].size.height);
        }
    ];
}

- (void) closeMenu
{
    [UIView animateWithDuration:0.2f animations:^ {
        　　　　　　　　_menu.frame = CGRectMake(-180, 0, 180, [[UIScreen mainScreen] bounds].size.height);
    　　　　　　　　}
     ];
}

4 最後に

しっかりと、動作を把握して使用すれば、UIWindowの追加もそれほど難しくないようです。 色々な表現も可能ですが、また、困った時の緊急避難にもなりそうな予感がしています。

5 参考資料

[iOS] 複数のUIWindowの挙動を確認する
[iOS] UIWindowを追加する
Objective-Cでアニメーションまとめ
[XCODE] iPhone上の画像を簡単にドラッグするUIGestureRecognizerの使い方
https://github.com/gotosleep/JASidePanels