iOS 用 Xamarin Designerを使用した自動レイアウト

警告

iOS Designer は、Visual Studio 2019 バージョン 16.8 および Visual Studio 2019 for Mac バージョン 8.8 で非推奨とされ、Visual Studio 2019 バージョン 16.9 および Visual Studio for Mac バージョン 8.9 から削除されています。 iOS ユーザー インターフェイスを構築する推奨される方法は、Xcode を実行している Mac 上で直接行う方法です。 詳細については、「Xcode を使用したユーザーインターフェイスの設計」を参照してください。

自動レイアウト ("アダプティブ レイアウト" とも呼ばれます) は、応答性の高い設計アプローチです。 各要素の位置が画面上のポイントにハードコーディングされている遷移レイアウト システムとは異なり、自動レイアウトは リレーションシップ に関するものです。これは、デザインサーフェイス上の他の要素に対する要素の位置を基準とします。 自動レイアウトの中心となるのは、画面上の他の要素のコンテキストにおける要素または要素のセットの配置を定義する制約またはルールの概念です。 要素は画面上の特定の位置に関連付けられていないため、制約は、さまざまな画面サイズやデバイスの向きに適したアダプティブ レイアウトを作成するのに役立ちます。

このガイドでは、Xamarin iOS Designerで制約とその使用方法について説明します。 このガイドでは、プログラムによる制約の操作については説明しません。 プログラムによる自動レイアウトの使用については、 Apple のドキュメントを参照してください。

必要条件

iOS 用 Xamarin Designerは、Visual Studio 2017 以降の Windows のVisual Studio for Macで使用できます。

このガイドでは、「iOS Designerの概要」ガイドのDesignerのコンポーネントに関する知識を前提としています。

制約の概要

制約とは、画面上の 2 つの要素間の関係を数学的に表したものです。 UI 要素の位置を数学的リレーションシップとして表現すると、UI 要素の位置をハードコーディングすることに関連するいくつかの問題が解決されます。 たとえば、縦モードで画面の下部から 20px のボタンを配置すると、ボタンの位置は横モードで画面から外れます。 これを回避するために、ボタンの下端をビューの下部から 20px に配置する制約を設定できます。 その後、ボタンの端の位置は button.bottom = view.bottom - 20px として計算されます。これにより、ビューの下部から 20px のボタンが縦モードと横モードの両方に配置されます。 数学的な関係に基づいて配置を計算する機能は、UI デザインで制約が非常に役立つものです。

制約を設定するときに、制約するオブジェクトと、制約が作用するプロパティ (属性) を引数として受け取る オブジェクトを作成NSLayoutConstraintします。 iOS デザイナーでは、属性には要素の 左、 右、 上、 下 などのエッジが含まれます。 また、高さと幅などのサイズ属性、中心点の位置、centerX、centerY も含まれます。 たとえば、2 つのボタンの左境界の位置に制約を追加すると、Designerによって次のコードが生成されます。

View.AddConstraint (NSLayoutConstraint.Create (Button1, NSLayoutAttribute.Left, NSLayoutRelation.Equal, Button2, NSLayoutAttribute.Left, 1, 10));

次のセクションでは、自動レイアウトの有効化と無効化、制約ツール バーの使用など、iOS Designerを使用した制約の操作について説明します。

自動レイアウトを有効にする

既定の iOS Designer構成では、制約モードが有効になっています。 ただし、手動で有効または無効にする必要がある場合は、次の 2 つの手順で行うことができます。

1. デザイン 画面の空の領域をクリックします。 これにより、要素の選択が解除され、ストーリーボード ドキュメントのプロパティが表示されます。

2. プロパティ パネルの [ 自動レイアウトを使用 する] チェック ボックスをオンまたはオフにします。

   

既定では、サーフェスに拘束は作成または表示されません。 代わりに、コンパイル時にフレーム情報から自動的に推論されます。 制約を追加するには、デザインサーフェイスで要素を選択し、それに制約を追加する必要があります。 これを行うには、 制約ツール バーを使用します。

制約ツール バー

制約ツール バーが更新され、次の 2 つのメインパーツで構成されるようになりました。

• [制約モード] ボタンの切り替え: 以前は、デザイン 画面で選択したビューを再度クリックして、拘束モードに入ります。 ここで、制約バーで次のトグル ボタンを使用する必要があります。

  

• [制約の更新] ボタン: 制約編集モードの場合に応じて変更されることに注意してください。

  • 制約編集モードでは、このボタンは要素フレームと一致するように制約を調整します。
  • フレーム編集モードでは、このボタンは、制約が定義している位置に合わせて要素フレームを調整します。

ポップオーバーの編集に関する制約

制約エディターのポップアップを使用すると、選択ビューの複数の制約を一度に追加および更新できます。 2 つのビューの左端にビューを配置するなど、複数の間隔、縦横比、配置の制約を作成できます。

選択したビューで拘束を編集するには、省略記号をクリックしてポップオーバーを表示

拘束ポップオーバーを開くと、ビューに事前設定された拘束が表示されます。 右上隅のコンボ ボックスから [ すべての辺 ] を選択するすべての間隔制約を設定し、[ すべてクリア ] を選択して削除できます。

W は幅を設定し、H は高さの制約を設定します。 [縦横比] をチェックすると、ビューの高さと幅はさまざまな画面サイズで制御され、ビューの幅は配給の分子として使用され、高さは分母として使用されます。

スペース制約の 4 つのコンボ ボックスには、制約を固定する隣接ビューが一覧表示されます

Surface-Based制約の編集

より細かく調整された制約の編集を行う場合は、デザイン サーフェイスで直接制約を操作できます。 このセクションでは、ピン間隔コントロール、ドロップ領域、さまざまな種類の制約の操作など、サーフェスベースの制約編集の基本について説明します。

制約の作成

iOS Designer ツールには、デザインサーフェイス上の要素を操作するための 2 種類のコントロールが用意されています。 次の図に示すように、コントロールとピン間隔コントロールをドラッグします。

これらを切り替えるには、制約バーの [制約モード] ボタンを選択します。

要素の両側にある 4 つの T 字形ハンドルは、制約の要素の 上、 右、 下、 および左端 を定義します。 要素の右側と下部にある 2 つの I 字型ハンドルは、それぞれ高さと幅の制約を定義します。 中央の四角形は 、centerX 制約と centerY 制約の両方を 処理します。

制約を作成するには、ハンドルを選択し、デザイン サーフェイス上のどこかにドラッグします。 ドラッグを開始すると、何を制限できるかを示す一連の緑色の線/ボックスが画面に表示されます。 たとえば、次のスクリーンショットでは、中央ボタンの上部を制約しています。

他の 2 つのボタンを横切る 3 本の破線の緑色の線に注意してください。 緑色の線は 、ドロップ領域、または制約できる他の要素の属性を示します。 上のスクリーンショットでは、他の 2 つのボタンには、ボタンを制限する 3 つの垂直ドロップ領域 ( 下部、 centerY、 top) が用意されています。 ビューの上部にある緑色の破線は、ビュー コントローラーがビューの上部に制約を提供し、緑色の実線ボックスはビュー コントローラーが上部レイアウト ガイドの下に制約を提供する点を意味します。

重要

レイアウト ガイドは、ステータス バーやツールバーなどのシステム バーの存在を考慮して上下の制約を作成できる特殊な種類の制約ターゲットです。 使用するメインの 1 つは、最新バージョンのコンテナー ビューがステータス バーの下に拡張されているため、iOS 6 と iOS 7 の間で互換性のあるアプリを持つことです。 トップ レイアウト ガイドの詳細については、Apple のドキュメントを参照 してください。

次の 3 つのセクションでは、さまざまな種類の制約の操作について説明します。

Size 制約

サイズ制約 - 高さと幅 - 2 つのオプションがあります。 1 つ目のオプションは、上の例に示すように、ハンドルをドラッグして近隣要素のサイズに制限することです。 もう 1 つのオプションは、ハンドルをダブルクリックして自己制約を作成することです。 これにより、次のスクリーンショットに示すように、定数サイズの値を指定できます。

中心の制約

正方形のハンドルは、コンテキストに応じて centerX または centerY 制約を作成します。 次のスクリーンショットに示すように、正方形のハンドルをドラッグすると、他の要素が点灯し、垂直方向と水平方向の両方のドロップ領域が提供されます。

垂直ドロップ領域を選択すると、 centerY 制約が作成されます。 水平方向のドロップ領域を選択すると、制約は centerX に基づいて行われます。

組み合わせ制約

次のスクリーンショットに示すように、2 つの要素の配置とサイズの等価性の制約の両方を作成するには、上部のツール バーから項目を選択して、水平方向の配置、垂直方向の配置、およびサイズの等価性を指定できます。

制約の視覚化と編集

制約を追加すると、項目を選択すると、デザイン サーフェイスに青い線として表示されます。

青い線をクリックし、プロパティ パネルで直接制約値を編集することで、制約を選択できます。 または、青い線をダブルクリックすると、デザイン画面で値を直接編集できるポップオーバーが表示されます。

制約の問題

制約を使用すると、いくつかの種類の問題が発生する可能性があります。

• 競合する制約 — これは、複数の制約によって要素に属性の競合値が強制され、制約エンジンがそれらを調整できない場合に発生します。
• 制約が適用されていない項目 — 要素のプロパティ (場所 + サイズ) は、制約のセットと制約が有効な組み込みサイズで完全にカバーされている必要があります。 これらの値があいまいな場合、項目は制約不足と言われます。
• フレームの配置の誤り — これは、要素のフレームとその一連の制約によって、結果として得られる 2 つの異なる四角形が定義されている場合に発生します。

このセクションでは、上記の 3 つの問題について詳しく説明し、その処理方法について詳しく説明します。

競合する制約

競合する制約は赤でマークされ、警告記号が付いています。 警告シンボルをポイントすると、競合に関する情報を含むポップアップが表示されます。

制約のないアイテム

制約のない項目がオレンジ色で表示され、ビュー コントローラー オブジェクト バーのオレンジ色のマーカー アイコンの外観がトリガーされます。

そのマーカー アイコンをクリックすると、シーン内の制約の低い項目に関する情報を取得し、次のスクリーンショットに示すように、それらを完全に制約するか、制約を削除することによって問題を解決できます。

フレームの置き忘れ

フレームの誤配置では、制約のない項目と同じ色コードが使用されます。 アイテムは常にネイティブ フレームを使用してサーフェスにレンダリングされますが、フレームが正しく配置されていない場合は、次のスクリーンショットに示すように、アプリケーションの実行時に項目が終了する場所が赤い四角形によってマークされます。

フレームの誤配置エラーを解決するには、制約ツールバーの [ 制約に基づいてフレームを更新 ] ボタン (右端のボタン) を選択します。

これにより、コントロールによって定義された位置と一致するように要素フレームが自動的に調整されます。

コードでの制約の変更

アプリの要件に基づいて、コード内の制約を変更する必要がある場合があります。 たとえば、制約がアタッチされているビューのサイズや位置を変更したり、制約の優先度を変更したり、制約を完全に非アクティブ化したりします。

コード内の制約にアクセスするには、まず、次の手順を実行して、iOS Designerで制約を公開する必要があります。

1. 制約を通常どおりに作成します (上記のいずれかのメソッドを使用)。

2. [ドキュメント アウトライン] エクスプローラーで、目的の制約を見つけて選択します。

   

3. 次に、[プロパティ] エクスプローラーの [ウィジェット] タブの [制約] に名前を割り当てます。

   

4. 変更を保存します。

上記の変更を行うと、コード内の制約にアクセスし、そのプロパティを変更できます。 たとえば、次のコマンドを使用して、アタッチされたビューの高さを 0 に設定できます。

ViewInfoHeight.Constant = 0;

iOS Designerの制約に対して次の設定を指定します。

遅延レイアウト パス

制約の変更に応じてアタッチされたビューを直ちに更新する代わりに、自動レイアウト エンジンは近い将来の 遅延レイアウト パス をスケジュールします。 この遅延パスでは、指定されたビューの制約が更新されるだけでなく、階層内のすべてのビューの制約が再計算され、新しいレイアウトに合わせて更新されます。

親ビューの メソッドまたは SetNeedsUpdateConstraints メソッドを呼び出SetNeedsLayoutすことで、いつでも独自の遅延レイアウト パスをスケジュールできます。

遅延レイアウト パスは、ビュー階層を通過する 2 つの一意のパスで構成されます。

• Update Pass - このパスでは、自動レイアウト エンジンによってビュー階層が走査され、すべてのビュー コントローラーで メソッドとすべてのビューの メソッドがUpdateConstraints呼び出UpdateViewConstraintsされます。
• レイアウト パス - 繰り返しになりますが、自動レイアウト エンジンはビュー階層を走査しますが、今回はすべてのビュー コントローラーで メソッドを呼び出し、すべてのビューで メソッドをLayoutSubviews呼び出ViewWillLayoutSubviewsします。 メソッドは LayoutSubviews 、 Frame 自動レイアウト エンジンによって計算された四角形を使用して、各サブビューの プロパティを更新します。

制約の変更をアニメーション化する

制約プロパティの変更に加えて、コア アニメーションを使用してビューの制約に対する変更をアニメーション化できます。 次に例を示します。

UIView.BeginAnimations("OpenInfo");
UIView.SetAnimationDuration(1.0f);
ViewInfoHeight.Constant = 237;
View.LayoutIfNeeded();

//Execute Animation
UIView.CommitAnimations();

ここでのキーは、アニメーション ブロック内の親ビューの メソッドを呼び出 LayoutIfNeeded すことです。 これにより、アニメーション化された場所またはサイズの変更の各 "フレーム" を描画するようにビューに指示されます。 この行がないと、ビューはアニメーション化せずに最終的なバージョンにスナップされます。

まとめ

このガイドでは、iOS Auto (または "アダプティブ") レイアウトと、デザイン サーフェイス上の要素間のリレーションシップの数学的表現としての制約の概念について説明しました。 iOS デザイナーで自動レイアウトを有効にする方法、 制約ツール バーを操作する方法、デザイン画面で制約を個別に編集する方法について説明しました。 次に、3 つの一般的な制約の問題をトラブルシューティングする方法について説明しました。 最後に、コード内の制約を変更する方法を示しました。

関連リンク

• ストーリーボードの概要
• iOS デザイン可能コントロールのチュートリアル
• Android Designerの概要
• プログラムによる制約