うさぎ駆動開発

UWP, Xamarin.Macを中心によしなしごとを書いていきます。

<週刊 自分のごちうサーチを作る> #3 Xcode で UI をつくる

前回はこちら。

今回のお品書き。

  • Xcodeで UI を作る
  • プロパティをコントローラに生やす
  • ユーティリティメソッドを作る

オートレイアウトが強敵だったので今回はここまで。XAMLがあればこんなことには

コントロールを選ぶ

まずはWindows FormsのUIを観察してみましょう。 f:id:ailen0ada:20160512153729p:plain

5つのコントロールが含まれていることがわかります。

  • CheckBox (ニコニコ動画を開く)
  • Label (検索レベル)
  • ComboBox
  • PictureBox
  • RichTextBox

他にPanelやSplitContainerなどを使っていると思いますが,ここでは割愛します。これらをCocoaの世界では,

  • NSButton
  • NSTextField
  • NSPopupMenu
  • NSImageView
  • NSTextView

というコントロールを使って表現していきます。

ウィンドウの設定をする

まずはXamarin StudioでMainWindow.xib をダブルクリックして開きます。iOSであればデザイナがXamarin Studioにありますが,Macはないので,Xcode が開きます。 f:id:ailen0ada:20160515162450p:plain

いつのバージョンからか,このように別のウィンドウでドキュメントが開かれるようになったので,少し不便です。いったんこのウィンドウを閉じ,Xcodeのメインウィンドウ側で開きます。左ペインのファイルツリーでMyGochiusearch->MyGochiusearch->MainWindow.xibシングルクリックします。 f:id:ailen0ada:20160515162648p:plain

まずは右ペインのインスペクタで,TitleAutosaveを設定します。 f:id:ailen0ada:20160515163033p:plain

もしもどこか別の場所をクリックしてしまってこのビューが出ていない場合は,ウィンドウの外枠をクリックして,ウィンドウを選択します。 f:id:ailen0ada:20160515163325p:plain

Titleでウィンドウタイトルが設定できます。Autosaveはステートの保存に使うキーになります。ウィンドウの場合は,そのサイズや位置が自動的に保存され,次に開いたときに再現されます。同じキーを持つウィンドウは同じ設定値を共有します。ここではxib名と同じ,MainWindowにしておきます。 f:id:ailen0ada:20160515163612p:plain

次にインスペクタの上の方にあるルーラーアイコンをクリックして,サイズインスペクタに切り替えます。ここで,最小ウィンドウサイズの設定をします。値はお好みでかまいません。 f:id:ailen0ada:20160515172342p:plain

最後にインスペクタ上部のファイルアイコンをクリックしてドキュメントインスペクタに切り替え,Use AutoLayoutを有効にします。これでこのドキュメントでオートレイアウトが使えるようになります。 f:id:ailen0ada:20160515163805p:plain

正しくできていれば,デザイナの右下に4つアイコンが出現します。 f:id:ailen0ada:20160515163936p:plain

UIデザイン

コントロールの配置

コントロールはインスペクタの下にあるライブラリからドラッグ&ドロップして配置します。コントロール一覧が出ていない場合は切り替えます。 f:id:ailen0ada:20160515164648p:plain

まずはCheck Box Buttonをドラッグ&ドロップします。 f:id:ailen0ada:20160515164259p:plain

ラベル部分をダブルクリックしてテキストを編集します。 f:id:ailen0ada:20160515164431p:plain

同じ要領でLabelPop Up Buttonを追加します。CocoaNSComboBoxでは,ユーザーがテキストボックス部分に入力できず,かつテキストボックス部分の選択操作ができないコンボボックスを作ることができません。そこでNSPopupMenuを使います。 f:id:ailen0ada:20160515165800p:plain

Constraintの追加

Constraint は,実行時にコントロールがどのようにレイアウトされるべきかを規定したものです。オートレイアウトが有効なときのみ使えます。

まずはチェックボックスにピンを設定します。ビューの左と上から20ポイントずつの位置に配置されるようにします。 f:id:ailen0ada:20160515173017p:plain

同様にポップアップボタンを選択して,今度は上と右にピンを設定します。 f:id:ailen0ada:20160515173146p:plain

この状態で,デザイナ右下のResolve Auto Layout IssuesからUpdate Framesを実行して,レイアウトを再計算します。 f:id:ailen0ada:20160515173248p:plain

すると制約を追加していないため,ラベルが左下に吹き飛びます。これをドラッグ&ドロップして,ポップアップボタンに縦中心を合わせて配置します。ガイドを参考に,文字のベースラインで揃えるといいです。 f:id:ailen0ada:20160515173547p:plain

この状態で,Resolve Auto Layout IssuesからAdd Missing Constraintsを実行すると,最適な制約条件を追加できます。 f:id:ailen0ada:20160515173737p:plain

設定された制約は,サイズインスペクタで確認できます。今後も使うので,インスペクタ上部のルーラーアイコンをクリックしてサイズインスペクタに切り替えます。 f:id:ailen0ada:20160515173824p:plain

ニコニコ動画を開く」チェックボックスの縦位置が微妙にずれているので,ドラッグ&ドロップして縦中心をラベルに合わせ,Update Constraintsを実行します。 f:id:ailen0ada:20160515174023p:plain

NSImageView と NSTextView を追加

オブジェクトライブラリからImage WellText Viewを追加します。 f:id:ailen0ada:20160515174406p:plain

サイズと配置を最終的なレイアウトのイメージに調整します。 f:id:ailen0ada:20160515183606p:plain

まずはイメージウェルの縦位置を指定します。ここではポップアップボタンから一定の距離に配置されるようにします。Ctrl+ドラッグでポップアップボタンにのばします。 f:id:ailen0ada:20160515184110p:plain

出てきたポップアップの,Vertical Spacingを選択します。 f:id:ailen0ada:20160515184128p:plain

幅と高さ,横位置をビューに追従させます。イメージウェルからCtrl+ドラッグでビューにのばします。 f:id:ailen0ada:20160515184630p:plain

出てきたポップアップで,Center Horizontally in Containerを選択します。ビューの横方向中央に配置されるようになります。2回同じ手順を繰り返し,Equal Widths, Equal Heightsも有効にします。 f:id:ailen0ada:20160515184650p:plain

テキストビューの位置とサイズをイメージウェルに追従させます。テキストビューからCtrl+ドラッグでイメージウェルにのばします。 f:id:ailen0ada:20160515185115p:plain

4回繰り返し,Vertical Spacing, Center Horizontally, Equal Widths, Equal Heights を有効にします。有効にした要素にはマークがつきます。 f:id:ailen0ada:20160515185216p:plain

ここまで設定したら,Update Framesで全体を再計算させます。 f:id:ailen0ada:20160515185241p:plain

ビューの幅と高さに追従させたまま無調整のため,盛大にコントロールがはみ出しています。 f:id:ailen0ada:20160515185251p:plain

サイズインスペクタでまず幅の制約を調整します。左右の余白は標準では20ポイントずつなので,計算された幅から40ポイント引けば同じ結果を得られます。Equal Width to に,Constant = -40を設定します。Editをクリックするとポップアップが現れ,編集することができます。 f:id:ailen0ada:20160515185507p:plain

ビューの高さの80%を二つのコントロールで分け合うように設定します。イメージウェルのEqual Height toに,Multiplier = 0.4を適用します。 f:id:ailen0ada:20160515185516p:plain

Returnキーで確定すると,すぐにデザイナに反映されます。 f:id:ailen0ada:20160515185536p:plain

保存してXcodeを終了し,デバッグ実行するとウィンドウサイズに追従してコントロールのサイズが変更される様子がわかります。

次回予告

  • コントロールのプロパティをさらに調整
  • プロパティをコントローラに生やす
  • ユーティリティメソッドを作る