<週刊 自分のごちうサーチを作る> #3 Xcode で UI をつくる
前回はこちら。
今回のお品書き。
オートレイアウトが強敵だったので今回はここまで。XAMLがあればこんなことには
コントロールを選ぶ
まずはWindows FormsのUIを観察してみましょう。
5つのコントロールが含まれていることがわかります。
- CheckBox (ニコニコ動画を開く)
- Label (検索レベル)
- ComboBox
- PictureBox
- RichTextBox
他にPanelやSplitContainerなどを使っていると思いますが,ここでは割愛します。これらをCocoaの世界では,
- NSButton
- NSTextField
- NSPopupMenu
- NSImageView
- NSTextView
というコントロールを使って表現していきます。
ウィンドウの設定をする
まずはXamarin StudioでMainWindow.xib
をダブルクリックして開きます。iOSであればデザイナがXamarin Studioにありますが,Macはないので,Xcode が開きます。
いつのバージョンからか,このように別のウィンドウでドキュメントが開かれるようになったので,少し不便です。いったんこのウィンドウを閉じ,Xcodeのメインウィンドウ側で開きます。左ペインのファイルツリーでMyGochiusearch
->MyGochiusearch
->MainWindow.xib
をシングルクリックします。
まずは右ペインのインスペクタで,Title
とAutosave
を設定します。
もしもどこか別の場所をクリックしてしまってこのビューが出ていない場合は,ウィンドウの外枠をクリックして,ウィンドウを選択します。
Title
でウィンドウタイトルが設定できます。Autosave
はステートの保存に使うキーになります。ウィンドウの場合は,そのサイズや位置が自動的に保存され,次に開いたときに再現されます。同じキーを持つウィンドウは同じ設定値を共有します。ここではxib名と同じ,MainWindow
にしておきます。
次にインスペクタの上の方にあるルーラーアイコンをクリックして,サイズインスペクタに切り替えます。ここで,最小ウィンドウサイズの設定をします。値はお好みでかまいません。
最後にインスペクタ上部のファイルアイコンをクリックしてドキュメントインスペクタに切り替え,Use AutoLayout
を有効にします。これでこのドキュメントでオートレイアウトが使えるようになります。
正しくできていれば,デザイナの右下に4つアイコンが出現します。
UIデザイン
コントロールの配置
コントロールはインスペクタの下にあるライブラリからドラッグ&ドロップして配置します。コントロール一覧が出ていない場合は切り替えます。
まずはCheck Box Button
をドラッグ&ドロップします。
ラベル部分をダブルクリックしてテキストを編集します。
同じ要領でLabel
とPop Up Button
を追加します。Cocoa のNSComboBox
では,ユーザーがテキストボックス部分に入力できず,かつテキストボックス部分の選択操作ができないコンボボックスを作ることができません。そこでNSPopupMenu
を使います。
Constraintの追加
Constraint は,実行時にコントロールがどのようにレイアウトされるべきかを規定したものです。オートレイアウトが有効なときのみ使えます。
まずはチェックボックスにピンを設定します。ビューの左と上から20ポイントずつの位置に配置されるようにします。
同様にポップアップボタンを選択して,今度は上と右にピンを設定します。
この状態で,デザイナ右下のResolve Auto Layout Issues
からUpdate Frames
を実行して,レイアウトを再計算します。
すると制約を追加していないため,ラベルが左下に吹き飛びます。これをドラッグ&ドロップして,ポップアップボタンに縦中心を合わせて配置します。ガイドを参考に,文字のベースラインで揃えるといいです。
この状態で,Resolve Auto Layout Issues
からAdd Missing Constraints
を実行すると,最適な制約条件を追加できます。
設定された制約は,サイズインスペクタで確認できます。今後も使うので,インスペクタ上部のルーラーアイコンをクリックしてサイズインスペクタに切り替えます。
「ニコニコ動画を開く」チェックボックスの縦位置が微妙にずれているので,ドラッグ&ドロップして縦中心をラベルに合わせ,Update Constraints
を実行します。
NSImageView と NSTextView を追加
オブジェクトライブラリからImage Well
とText View
を追加します。
サイズと配置を最終的なレイアウトのイメージに調整します。
まずはイメージウェルの縦位置を指定します。ここではポップアップボタンから一定の距離に配置されるようにします。Ctrl+ドラッグでポップアップボタンにのばします。
出てきたポップアップの,Vertical Spacing
を選択します。
幅と高さ,横位置をビューに追従させます。イメージウェルからCtrl+ドラッグでビューにのばします。
出てきたポップアップで,Center Horizontally in Container
を選択します。ビューの横方向中央に配置されるようになります。2回同じ手順を繰り返し,Equal Widths
, Equal Heights
も有効にします。
テキストビューの位置とサイズをイメージウェルに追従させます。テキストビューからCtrl+ドラッグでイメージウェルにのばします。
4回繰り返し,Vertical Spacing
, Center Horizontally
, Equal Widths
, Equal Heights
を有効にします。有効にした要素にはマークがつきます。
ここまで設定したら,Update Frames
で全体を再計算させます。
ビューの幅と高さに追従させたまま無調整のため,盛大にコントロールがはみ出しています。
サイズインスペクタでまず幅の制約を調整します。左右の余白は標準では20ポイントずつなので,計算された幅から40ポイント引けば同じ結果を得られます。Equal Width to
に,Constant = -40
を設定します。Editをクリックするとポップアップが現れ,編集することができます。
ビューの高さの80%を二つのコントロールで分け合うように設定します。イメージウェルのEqual Height to
に,Multiplier = 0.4
を適用します。
Returnキーで確定すると,すぐにデザイナに反映されます。
保存してXcodeを終了し,デバッグ実行するとウィンドウサイズに追従してコントロールのサイズが変更される様子がわかります。
次回予告
- コントロールのプロパティをさらに調整
- プロパティをコントローラに生やす
- ユーティリティメソッドを作る