Xamarin.iOS アプリの起動画面
この記事では、1 つの統合ストーリーボードを使用して、すべての iOS デバイスのアプリ起動画面を任意の解像度と向きで作成する方法について説明します。
警告
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 を使用したユーザーインターフェイスの設計」を参照してください。
iOS 8 より前では、iOS アプリの起動画面を作成する前に、開発者は、アプリを実行できるさまざまなデバイス のフォーム ファクターと解像度ごとにイメージ資産を提供する必要がありました。 ただし、iOS 8 のリリース以降、単一の統合ストーリーボードを使用して、すべてのケースで正しく見える起動画面を作成できるようになりました。
この簡単なチュートリアルでは、新しいプロジェクトで既定で提供されるストーリーボードまたは既存のプロジェクトに手動で追加されたストーリーボードを使用して起動画面を作成する方法について説明します。 次に、iOS デザイナーを使用して、イメージ ビューとラベルをストーリーボードに追加し、それらのビューに制約を設定し、ストーリーボードがさまざまなデバイスと向きに対して正しく見えるかどうかを確認する方法を示します。
ストーリーボードを使用した起動画面の管理
iOS 8 以降では、開発者は、1 つ以上の静的起動イメージを使用する代わりに、起動画面を提供する特別な統合ストーリーボードを作成できます。 iOS デザイナーで起動ストーリーボードを作成する場合は、サイズ クラスと自動レイアウトを使用して、表示環境ごとに異なるレイアウトを定義します。 サイズ クラスと自動レイアウトを使用すると、開発者はすべてのデバイスと表示環境に適した 1 つの起動画面を作成できます。
Visual Studio for Mac で、[新しいソリューションのファイル>] を選択し、[シングル ビュー アプリ] を選択して、新しいプロジェクトを作成します。
- 既定では、新しいプロジェクトには、Launch Screen インターフェイスを 定義する LaunchScreen.storyboard ファイルが含まれています。
- 代わりに、起動画面のストーリーボードを既存のプロジェクトに追加するには、ソリューション パッドでプロジェクト名を右クリックし、[新しいファイルの追加>]を選択します。次に、[起動画面] を選択します。
- ファイル に LaunchScreen という名前を付けます。または、選択した別の名前を付けます。
起動画面に適切なストーリーボードを使用するようにプロジェクトを構成します。
- Solution Pad の Info.plist ファイルを ダブルクリックして、編集用に開 きます。
- [Launch Images]\(イメージの起動\) セクションで、起動画面が適切なストーリーボードの名前に設定されていることを確認します。
- 既定では、LaunchScreen.storyboard を起動画面として使用するように新しいプロジェクトが構成されます。
Assets.xcassets アセット カタログにイメージを追加して、起動画面で使用できるようにします。 詳細については、「イメージの表示」ガイドの「アセット カタログ イメージ セットへのイメージの追加」セクションを参照してください。
Solution Pad でダブルクリックして、LaunchScreen.storyboard を開いて編集します。
iOS デザイナーで起動画面のストーリーボードをプレビューするデバイスと向きを選択します。 下部のツール バーのデバイス選択パネルを開き、[i電話 4S と縦] を選択します。
- デバイスと向きを選択すると、iOS デザイナーによるデザインのプレビュー方法のみが変更されることに注意してください。 ここで選択した内容に関係なく、新しく追加された制約は、[特徴の編集] ボタンを使用して指定しない限り、すべてのデバイスと向きに適用されます。
ビュー コントローラーの メイン ビューの背景色を設定します。 ビュー コントローラーの中央をクリックしてビューを選択し、プロパティ パッドを使用して背景色を調整します。
起動画面に イメージ ビュー を追加し、そのソース イメージを設定します。
- イメージ ビューをツールボックス パッドからビューの中心にドラッグします。
- [イメージ ビュー] が選択されている状態で、[プロパティ] パッドの [ウィジェット] セクションで、Assets.xcassets アセット カタログに既に追加されているイメージ セットに Image プロパティを設定します。 必要に応じて、イメージ ビューの位置とサイズを変更します。
イメージ ビューの下にラベルを追加し、プロパティ パッドを使用してその属性を設定します。
制約ツール バーの右側のボタンを使用して、制約編集モードに切り替えます。
イメージ ビューに制約を追加し、高さと幅を設定し、水平方向と垂直方向に中央揃えします。
- 制約を追加する方法の詳細については、「iOS 用 Xamarin Designer を使用した自動レイアウト」を参照してください。
ラベルに制約を追加し、水平方向に中央揃えし、高さと幅を与え、イメージ ビューから垂直方向に固定された距離に配置します。
他のデバイスと向きをテストして、設計がすべてのシナリオで意図したとおりであることを確認します。 特定のデバイスまたは方向を調整する必要がある場合は、[特性の編集] ボタンを使用して、特定のサイズ クラスの制約を追加します。
ストーリーボードへの変更を保存します。 シミュレーターまたはデバイスでアプリを実行すると、アプリの起動時に起動画面が表示されます。
Note
起動画面として使用されるストーリーボードには、単純な組み込みの UI 要素のみを含める必要があり、計算を行ったり、カスタム クラスから派生したりすることはできません。
統合ストーリーボードを使用した起動画面の作成の詳細については、統合ストーリーボード ガイドの「動的起動画面」セクションを参照してください。
起動画面のストーリーボードへの移行
起動画面にストーリーボードを使用するように既存のアプリを更新する場合は、ソリューション エクスプローラーでプロジェクト名を右クリックし、[新しいファイルの追加>]を選択します。...[iOS>起動画面] を選択し、[新規] ボタンをクリックします。
次にInfo.plist、ソリューション エクスプローラー内のファイルをダブルクリックして、編集用に開きます。 [起動画面] で、上記で作成した新しいストーリーボード ファイルを選択します。
新しいストーリーボードを起動画面として使用するには、次の操作を行います。
ソリューション エクスプローラー内のファイルをダブルクリック
Info.plistして、編集用に開きます。エディターの [ユニバーサル起動イメージ] セクションまでスクロールし、[起動画面] ドロップダウンを開き、上で作成したストーリーボードの名前を選択します。
