Xamarin での watchOS レイアウトの使用
Apple Watch の画面サイズ のレイアウトの設計には、固有の課題があります。
設計ヒント
重要なポイントは、ユーザー インターフェイスを読みやすく、大きな指で小さなウォッチ画面で使用できるようにします。 iOSシミュレーター(非常に大きく見える)とマウスポインタ(小さなタッチターゲットで動作する)の設計のトラップに陥らないようにしてください!
黒い背景を使用する - それは時計の黒いベゼルで大きな画面の錯覚を作成します。
画面レイアウトを埋め込まないでください。ベゼルは自然な視覚的なパディングを形成します。
読みやすさに重点を置く。 フォント サイズと色を慎重に使用して、テキストを読みやすくします。 組み込みのテキスト スタイルを使用して、動的型の自動サポートを取得します。
タッチ ターゲットのサイズに焦点を当てます。 テキスト ラベルを持つ Buttons/tappable テーブル行は、画面全体にまたがっている必要があります。 Apple は、テキスト ラベルではなくアイコンを使用する場合は、"3 つ以上の項目を並べて配置しないでください" と言います。
このコントロールを
Menu使用して、使用頻度の低い機能を公開して、アプリのデザインを明確かつ簡潔に保ちます。
実装
Watch Kit には、魅力的なウォッチ アプリ レイアウトを構築するのに役立つ次のコントロールが含まれています。
インターフェイス コントローラー
は WKInterfaceController 、すべてのシーンの基本クラスです。
インターフェイス コントローラーのデザイン サーフェイスは、垂直 グループのように動作します。他のコントロールをインターフェイス コントローラーにドラッグすると、自動的に他のコントロールの上にレイアウトされます。
各コントロールの Position プロパティと Size プロパティを設定して、外観を制御できます。
サイズが [コンテナーに対する相対] に設定されている場合は、比例値とオフセット調整を指定できます。 このスクリーンショットは、ウォッチ画面の幅の 80% (0.8) を使用するように設定されているボタンを示しています。
グループ
WKInterfaceGroup は、コントロールを垂直方向または水平方向にスタックするように構成できる単純なレイアウト コンテナーです。 既定では各コントロール間の間隔が含まれますが、[属性] インスペクターで間隔 (およびインセット) を変更できます。
グループ自体は、周囲のコントロールを基準にしてサイズを変更して配置でき、グループを入れ子にして複雑なレイアウトを作成できます。
Separator
区切り記号コントロールは、レイアウトの視覚的なガイダンスを提供することを目的としています。 区切り記号 (または背景色または画像) を使用して、ユーザーが画面に関連するコンテンツを理解するのに役立ちます。
画面の全幅を使用しない青と緑の区切り記号は、固定またはコンテナーの相対サイズで構成されていることに注意してください。
コンテンツ コントロール
レイアウトは、、SliderSwitch、Map、およびその他のコントロールなしでLabelImageButtonは完了しません。
これらは、グループまたは各コントロールの位置とサイズの設定を使用して、レイアウト内に配置できます。