[iOS] スワイプで画面を切り替えたり、サイドメニューを作成することができるJASidePanelsライブラリについて

1 はじめに

JASidePanelsは、左右のサイドパネルとセンターパネルを表示するUIViewControllerのコンテナです。 スワイプなどで、メニューなどの別のビューを引っ張り出すようなUIが簡単に作成できます。

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

pod 'JASidePanels', '~> 1.3'

なお、2016年2月現在の最新バージョンは1.3.2です。

2 ストーリーボードで使用する方法

コードでも、生成可能ですが、ストーリーボードを使用する方が、一般に簡単だと思います。

(1) Storyboardによる配置

プロジェクトをSingle View Applicationで作成し、Storyboardを開いて、最初からあるビューを触らないで、その他に、中央用と左右用の全部で３つのビューを配置しました。

また、少し判りやすいように、背景色を変え、ラベルも置きましたが、これについては、必須ではありません。

(2) JASidePanelControllerの継承

起動時に使用される最初からあるビュー(ViewController)をJASidePanelControllerから継承するようにする修正します。 なお、この時、　JASidePanelController.hのインポートが必要です。

#import <UIKit/UIKit.h>
#import "JASidePanelController.h" // ヘッダのインポートも必要

//@interface ViewController : UIViewController
@interface ViewController : JASidePanelController

@end

(3) パネルの初期化

ViewController.mの中で、awakeFromNibメソッドを定義し、次のように各パネルを初期化します。

この場合、中央(CenterPanel)は必須ですが、左右は必要なものだけでOKです。

-(void) awakeFromNib
{
    [self setLeftPanel:[self.storyboard instantiateViewControllerWithIdentifier:@"leftViewController"]];
    [self setCenterPanel:[self.storyboard instantiateViewControllerWithIdentifier:@"centerViewController"]];
    [self setRightPanel:[self.storyboard instantiateViewControllerWithIdentifier:@"rightViewController"]];
}

instantiateViewControllerWithIdentifierで指定する名前は、 拡張クラスの有無に関係なく、storyboard IDで指定する必要があります。

(4) 実行

ここまでの作業で、表示できるビューは、次のとおりです。

3 sidePanelControllerプロパティ

JASidePanelsは、JASidePanelController.mと、UIViewController+JASidePanel.mで構成されています。

JASidePanelController.mは、このライブラリの本体であり、UIViewController+JASidePanel.mは、下記のようにUIViewControllerを拡張して、sidePanelControllerというプロパティを追加しています。

@interface UIViewController (JASidePanel)

// The nearest ancestor in the view controller hierarchy that is a side panel controller.
@property (nonatomic, weak, readonly) JASidePanelController *sidePanelController;

@end

従って、UIViewController+JASidePanel.hをインポートすれば、中央や、左右に配置したビューでsidePanelControllerプロパティ使えるようになります。

このsidePanelControllerプロパティは、JASidePanelControllerそのものなので、併せてJASidePanelController.hをインポートすれば、このプロパティを経由で各種機能にアクセスできることになります。

次の例では、JASidePanelControllerのtoggleLeftPanel:メソッド使用して、ボタンを押すことで、左のビューの表示非表示を切り替えています。 なお、CenterViewControllerは、中央に表示されるビュー用に拡張クラスとして作成したものです。

#import "UIViewController+JASidePanel.h"
#import "JASidePanelController.h"

// ・・・省略・・・


- (IBAction)tapButton:(id)sender {
    [self.sidePanelController toggleLeftPanel:self];
}

4 角丸

中央及び、左右に配置したビューは、デフォルトで角が少し丸みがあります。

この角の丸みを変更するには、JASidePanelControllerを継承したViewControllerで以下のメソッドを追加します。

- (void)stylePanel:(UIView *)panel
{
    [super stylePanel:panel];
    panel.layer.cornerRadius = 0.0f; // 角の丸みを無しにする
}

そうすると、丸みの無いビューになります。

ちなみに、解りやすいように、極端な数値を設定してみます。

- (void)stylePanel:(UIView *)panel
{
    [super stylePanel:panel];
    panel.layer.cornerRadius = 1000.0f; // 極端に大きな数字にしてみる
}

5 JASidePanelController

JASidePanelControllerのプロパティやインスタンスメソッドには、次のようなものがあります。

(1) プロパティ

・中央、左右のビュー

ビュー自身を捕まえて、操作が可能です。

@property (nonatomic, strong) UIViewController *leftPanel
@property (nonatomic, strong) UIViewController *centerPanel
@property (nonatomic, strong) UIViewController *rightPanel

・スワイプの有効・無効

これで、スワイプを禁止にして、特定の操作で表示するようにすれば、メニュー的なUIとすることができる

@property (nonatomic, assign) BOOL allowLeftSwipe
@property (nonatomic, assign) BOOL allowRightSwipe

・最大表示幅

@property (nonatomic) CGFloat leftFixedWidth
@property (nonatomic) CGFloat rightFixedWidth

・表示幅（ReadOnly）

@property (nonatomic, readonly) CGFloat leftVisibleWidth
@property (nonatomic, readonly) CGFloat rightVisibleWidth

・サイドパネルが開いた（閉じた）時に、バウンドのアニメーションをするかどうか

@property (nonatomic) BOOL bounceOnSidePanelClose
@property (nonatomic) BOOL bounceOnSidePanelOpen

・隣のパネルに追従させるかどうか

@property (nonatomic, assign) BOOL pushesSidePanels

・パネルの状態

@property (nonatomic, readonly) JASidePanelState state

状態の種類については、次のように定義されている

typedef enum _JASidePanelStyle {
    JASidePanelSingleActive = 0,
    JASidePanelMultipleActive
} JASidePanelStyle;

typedef enum _JASidePanelState {
    JASidePanelCenterVisible = 1,
    JASidePanelLeftVisible,
    JASidePanelRightVisible
} JASidePanelState;

・現在、表示されているビュー

@property (nonatomic, weak, readonly) UIViewController *visiblePanel

(２) インスタンスメソッド

中央、左右パネルの表示

- (void)showCenterPanelAnimated:(BOOL)animated
showLeftPanel: 

- (void)showLeftPanelAnimated:(BOOL)animated
showRightPanel: 

- (void)showRightPanelAnimated:(BOOL)animated
styleContainer:animate:duration: 

左右パネルの表示・非表示切り替え

- (void)toggleLeftPanel:(id)sender
- (void)toggleRightPanel:(id)sender

6 最後に

JASidePanelsは、非常に軽易にスワイプでスライドするUIや、横から出てくるメニューなどを構築することができます。 アニメーションや、バウンズの状態も細かく設定できるようなので、使いこなして、心地よいUIを作りたいものです。

7 参考資料

http://cocoadocs.org/docsets/JASidePanels/1.3.2/index.html
JASidePanels Github