Interface Builderのインスペクタの様にビューのオンオフを切替える

2008.11.23

多数のビューを狭いウィンドウでも広いウィンドウでも使いたい

　現在新しいRepeating Motif Generatorを開発中です。その状況はCoreData版Repeating Motif Generatorの開発に随時掲載している通りですが、現在は第五のプロジェクトの準備をしている段階です。

　旧バージョンではパラメータを設定する各種ビューはドロワーの中に表示していました。右の図がそのドロワーです。

　これはこれでよく整理してあるのですが、レイヤーのパラメータが多いので表示を切替えながら使う様になっています。

　ウィンドウが狭い場合はこれでしかたないと言えますが、ウィンドウが広い場合、これでは画面を有効活用しているとは言えません。

　ウィンドウが狭い場合はコンパクトに表示し、ウィンドウが広い場合は全てのパラメータを表示する様にできないものでしょうか。

Interface Builderのインスペクタ

　バージョン3.1のInterface Builderでは、インスペクタが右の図の様になっています。薄い青色のタイトルバーでグループ分けがされており、タイトルをクリックするとそのグループを展開したり縮小したりする事ができます。

　これなら狭いウィンドウでは必要なものだけ拡げて他は縮小し、広いウィンドウでは全て拡げれば面積を有効活用できます。

　そこでこれをまねたビューを作る事にしました。

必要最低限の機能にする

　カテゴリー分けして表示するビューなのでNVKCategoryViewという名前にしました。

　Interface Builderのインスペクタは多機能ですが、こちらは必要最小限の機能にする事にしました。Interface Builderのインスペクタで実現されていてNVKCategoryViewで実現していない機能としては、以下のものがあります。

○タイトル部をクリックした時に反応する
　NVKCategoryViewはタイトル部左側のディスクロージャトライアングルしかクリックに反応しません。

○スクロールビューの中に入れる事ができる
　NVKCategoryViewはスクロールビューの中に入れると動作がおかしくなります。スクロールビューの中に入れようとすると、途端に難易度が上がるので、割り切る事にしました。下のビューが見えない時は、スクロールするのではなくビューを折り畳めばよいという割り切りです。

○タイトル部の下にあるビューのサイズを変える事ができる
　NVKCategoryViewではタイトル部の下にあるビューのサイズを変更する事はできません。

　こう書くと全然ダメの様ですが、そうでもありません。Repeating Motif Generatorに使う分にはこれで充分です。

　機能を絞り込んだので、非常に少ないコードで実現する事ができました。NVKCategoryViewは120行、タイトル部のNVKCategoryTitleViewは69行のクラスです。

　NVKCategoryViewを使うとどのような事ができるのかをデモするサンプルアプリケーションを作りました。右の図がそのスクリーンショットです。Repeating Motif Generatorのレイヤーに関係するパラメータを並べてあります。これでも全部ではないのですが。

　今回は設定内容を言葉で説明するのをなるべく避けて、アイコンで表現する様に心がけています。こうすると一目瞭然でわかりやすいのですが、その代わりにテキストで表現するよりも面積が必要になってしまいます。そこでNVKCategoryViewを作ったというわけです。

ソースコードの公開

　ソースコードを公開するコーナーを作成しました。NVKCategoryViewはこちらで公開しています。

　ドラッグ＆ドロップをサポートするクラス群もいずれ公開する予定です。まだ試行錯誤している段階なので、もう少し落ち着いてから出したいと思います。