カスタムビューを配置する【実践的Macintoshプログラミング解説】

印刷用表示 |テキストサイズ 小 |中 |大 |

CoreData版 Repeating Motif Generator の開発 Repeating Motif Wonderland CoreData 実践的 Macintosh プログラミング解説

LinkIconホーム

更新日 2009-05-24

モデルとビューを連動させる

カスタムビューを配置する

customView.png ウィンドウにカスタムビューを配置して画面のデザインは完成です。

 カスタムビューはInterface Builderのライブラリパレットの中に入っているのでそこからドラッグし、ウィンドウ上でドロップします。

カスタムビューをドラッグしてウィンドウにドロップ

 Interface Builderのライブラリパレットの中からカスタムビューを探し出して、ウィンドウにドロップして下さい。Layout Viewsグループの中に入っています。

 最終的にこんな配置にしました。テーブルビューの横幅を少し縮めて、そこにカスタムビューを配置しています。またテキストフィールドを縮めて空けたスペースにスライダーを配置しています。Fetchボタンは不要なので削除しました。

GUIdesign.png

カスタムビューの設定

customViewSetting.png カスタムビューの設定について説明します。まずクラスを指定します。クラス名は発振器出力を表示するOscillatorViewです。

 これを設定すると、上の図の様にウィンドウ上の表示がCustomViewからOscillatorViewに変わります。


customViewSetting2.png 次にアウトレットを接続します。controllerアウトレットをOscillatorエンティティを管理するNSArrayControllerに接続します。

 controller行の右端にある丸をクリックし、マウスボタンを押したままドラッグすると線がのびていきます。nibウィンドウのOscillatorsアイコンの上でマウスボタンを離すと、アウトレットが接続されます。

 右の図はアウトレットが接続された状態です。間違って接続してしまった場合は、Oscillatorsの左にあるバツ印をクリックすれば切り離せます。


customViewSetting3.png サイズは120×120としました。またここではAutosizingの設定もしておきます。これは自分を包むビューのサイズが変化した時に、それに連動して自分のサイズをどう変化させるのかという設定です。

 Autosizing欄の左側にある赤い部分をクリックして設定します。その右のアニメーションは設定の結果を反映していますので、どこがどういった意味を持っているのかは実際にいじってみればすぐわかります。

 OscillatorViewはウィンドウの上下左右に対する距離を固定、幅とサイズを可変とする設定にしました。ウィンドウのリサイズに応じて伸び縮みする設定です。

テーブルビューの設定

tableViewSetting.png テーブルビューの設定はそれほど大きく変えていません。Alternating Rowsをチェックして、一行ごとに色がつく様にした事と、SelectionのMultipleのチェックを外して複数選択ができない様にした程度です。 

 なお、ウィンドウ上のテーブルビューを一回クリックした時点で選択されるのはスクロールビューなので、もう一回クリックしてテーブルビューを選択して下さい。右の図の一番上に"Table View Attributes"と表示されるので、何が選択されているかわかります。

 更にクリックするとヘッダやカラムを選択する事ができます。


scrollViewSetting.png Autosizingの設定は、テーブルビューではなく、そのスーパービューであるスクロールビューに対して行ないます。

 OscillatorViewの横幅を可変にしたので、こちらの横幅は固定にします。それ以外はOscillatorViewと同じ設定です。

スライダーの設定

sliderSetting.png スライダーのバインディング設定はテキストフィールドと同じにしておけばOKです。

 右はAmplitudeスライダーの設定です。Frequency, Phase Lagスライダーの設定はModel Key Pathの部分をそれぞれfrequencyとphaseLagにします。

 これはキーパスですから、アクセサメソッド名に対応させるという事です。


sliderSetting2.png スライダーのAutosizingは横幅可変、ウィンドウの上下左右に対する距離を固定とする設定にします。