【Cocoa】ドロア（NSDrawer）
今回はドロアの使い方。NSDrawerを使う。参考にさせていただいたのはこちらの記事。
http://www.infoatmackers.jp/cocoa/programming/programming21.html
最初ドロアを知らないときにInterfaceBuilderの中を覗いていてNSDrawerという文字を見て、「何か描画（Draw）する物？」とか勘違いしていた。辞書ひっぱってみたら「引き出し」って意味もあるんだな。NSDrawerは引き出しの方の意味。ウインドウの影からニョキッと出てくるパネルのような物だ。
実際ドロアを使うだけなら、InterfaceBuilderだけでもできてしまうから驚き。
ウインドウ上にボタンを１個用意して、そいつをクリックするとドロアが出たり入ったりするサンプルを作ってみることにする。
1.プロジェクトの作成
いつものように「Cocoa Application」でプロジェクト作成。
2.InterfaceBuilderの起動
「Resources」の「MainMenu.xib(English)」をダブルクリックしてInterfaceBuilderを起動する。
3.標準のウインドウを削除する
「MainMenu.xib」ウインドウの中を見ると、メインウインドウをなる「Window(Window)」が入っているが、こいつを削除してしまう。マウスで選択しておいて「del」キーで消せる。
4.NSDrawerをMainMenu.xibに追加
「Library」ウインドウの中の「Objects」の中を覗いて、「Cocoa」→「Application」→「Windows」と追っかけていくと、「Window and Drawer」というのが見つかる。こいつを「MeinMenu.xib」ウインドウにドラッグ＆ドロップ。
そうすると自動的に３つのオブジェクトが追加される。「Window(Window)」、「Drawer Content View」（なぜかドラッグ＆ドロップ中はCustom Viewと表示される）、「Drawer」の３つだ。
この３つ、実はそれぞれ一つずつLibraryから個別にドラッグ＆ドロップして持ってこれるらしいのだが、そうした場合この３つを自力で接続してあげる必要があるらしい。「Window and Drawer」をドラッグ＆ドロップしたときは、その辺を全部自動的にやってくれるらしい。
5.ドロアのデザイン
ボタンをクリックすると顔を出すドロアの中身をデザインする。
まず、「MainMenu.xib」の中の「Drawer Content View」をダブルクリック。すると、ドロアをデザインするためのウインドウが表示される。
今回は難しいことをせず、文字だけ表示させておくことにする。ラベルを貼り付けて、適当な文字列を埋めておく。
6.ドロアの属性をいじる
「MainMenu.xib」の中の「Drawer」をクリックして選択する。そうすると「Attributes」ウインドウで、「Edge」という属性をいじることができる。デフォルトでは「Right」が選択されている。これは、ドロアが顔を出す方向。「Right」ってことはウインドウの右側にニョキッとドロアが出てくる。ここで顔を出す方向を上下左右で選ぶことができる。
あと「Size」ウインドウでドロアのサイズをいじれるんだが、とりあえず「Content」の「Width」だけ先程デザインしたドロアの幅に合わせておく。
高さをいじってみたりしたんだが、実行しても値が反映されていないっぽい。使い方間違ってるんかな・・・。
7.メインウインドウ側のデザイン
「MainMenu.xib」の「Window(Window)」をダブルクリックすると、メインウインドウのデザイン用ウインドウが表示される。こちらには、ドロアが表示されるきっかけのためのボタンを一つ用意する。
8.ボタンのアクション設定
ボタンと、ボタンをクリックしたときのアクションメソッドを接続する。アクションメソッド自体は「Drawer」の中にもう用意されているので、自分で作成する必要は無い。
ボタンから「Drawer」に向かってcontrol＋ドラッグ＆ドロップ。接続候補として「open」「close」「toggle」が表示されるが、今回は「toggle」を選ぶ。一回押す毎に出たり入ったりするアクションメソッドだ。
試してないが、おそらく「open」はドロアを出す専用、「close」はドロアをしまう専用のメソッドなんだろう。
9.コンパイル＆ゴー
以上で作成は終了。Xcode側に戻って実行してみる。ボタンをクリックするたびにニョキニョキしてくれる。
10.あとは？
ドロアの上にボタンなりなんなり好きな部品を配置して、いつものように自分で用意したコントローラクラスのアクションメソッドやアウトレットと接続してやれば、いろいろできるんだろう、きっと。まだ試してないけど。
11.ドロアの使われ方
AppleのHuman Interface Guidelinesっていうのがあって、その中にドロアについて書いてあった。「PartIII:Aqua Interface」→「Windows」→「Window Elements」だ。
和訳するのが大変なので、和訳サイト様を頼ることに(´¬｀;)
http://potting.syuriken.jp/potting_conv/XHIG_J/XHIGIntro/chapter_1.html
それによると、
ドロワーは、かなり頻繁に利用される必要があるものの、常時見えている必要はないというコントロールのためだけに使用してください
シートは第一に、「シートを使用するとき」（209ページ）で説明されているとおり、モード式ダイアログを置き換えることを意図していますが、ドロワーは付加機能を提供することを意図しています。
シートが開いたとき、それがウインドウの中心となり、ウインドウの内容を覆い隠します。ドロワーが開いたとき、親ウインドウのすべては今までどおり見えており、利用できます。
などと言ったことが書かれていた。
ダイアログやシートと違って、ドロアの場合だと親となるウインドウは常時見えていて、かつ操作も可能な状態だから、ダイアログやシート的な使い方はよろしくないってことなのかな・・・。
確かにダイアログ的な使い方をするならダイアログ使えばいいしな。隠すことができるツールバーって言うかツールパネルみたいな感覚なんだろうか。
コメント