Xamarin.iOS でのイメージの表示

  • [アーティクル]

この記事では、Xamarin.iOS アプリに画像資産を含め、C# コードを使用するか、iOS Designerのコントロールに割り当てることでそのイメージを表示する方法について説明します。

Xamarin.iOS アプリでのイメージの追加と整理

Xamarin.iOS アプリで使用するイメージを追加する場合、開発者は アセット カタログ を使用して、アプリに必要なすべての iOS デバイスと解像度をサポートします。

iOS 7 で追加された Asset Catalogs Image Sets には、アプリのさまざまなデバイスとスケール ファクターをサポートするために必要なすべてのバージョンまたはイメージの表現が含まれています。 イメージアセットのファイル名に依存する代わりに、 Image Sets は Json ファイルを使用して、どのイメージがどのデバイスまたは解像度に属するかを指定します。 これは、(iOS 9 以降の) iOS でイメージを管理およびサポートするための推奨される方法です。

アセット カタログ イメージ セットへのイメージの追加

前述のように、 アセット カタログ イメージ セット には、アプリのさまざまなデバイスとスケール ファクターをサポートするために必要なすべてのバージョンまたはイメージの表現が含まれています。 イメージアセットのファイル名に依存する代わりに、 Image Sets は Json ファイルを使用して、どのイメージがどのデバイスまたは解像度に属するかを指定します。

新しいイメージ セットを作成し、それにイメージを追加するには、次の操作を行います。

  1. ソリューション エクスプローラーで、ファイルをAssets.xcassetsダブルクリックして編集用に開きます。

    ソリューション エクスプローラーの Assets.xcassets

  2. [Assets List]\(アセットリスト\) を右クリックし、[New Image Set]\(新しいイメージ セット\) を選択します。

    新しいイメージ セットの追加

  3. 新しいイメージ セットを選択すると、エディターが表示されます。

    イメージ セット エディター

  4. ここから、必要なさまざまなデバイスと解像度ごとに画像をドラッグします。

  5. [アセット] リストで新しいイメージ セットの [名前] をダブルクリックして編集します。新しいイメージ セットの名前の編集

iOS Designerでイメージ セットを使用する場合は、プロパティ エディターのドロップダウン リストからセットの名前を選択するだけです。

ドロップダウン リストからイメージ セットの名前を選択する

コードで Image Set を使用する場合は、 クラスの UIImage メソッドをFromBundle呼び出して名前で参照します。 たとえば次のようになります。

MonkeyImage.Image = UIImage.FromBundle ("PurpleMonkey");

重要

イメージ セットに割り当てられたイメージが正しく表示されない場合は、正しいファイル名が メソッド (親アセット カタログ名ではなくイメージ セット) でFromBundle使用されていることを確認します。 PNG 画像の場合は、拡張子を .png 省略できます。 その他のイメージ形式の場合は、拡張子が必要です (例: PurpleMonkey.jpg)。

アセット カタログでのベクター イメージの使用

iOS 8 の時点で、開発者がさまざまな解像度で個々のビットマップ ファイルを含める代わりに、PDF 形式のベクター 画像をカセットに含めできるようにする特殊な Vector クラスが Image Sets に追加されました。 このメソッドを使用して、解像度用の @1x 1 つのベクター ファイル (ベクター PDF ファイルとして書式設定) を指定します @2x 。ファイルの バージョンと @3x バージョンはコンパイル時に生成され、アプリケーションのバンドルに含まれます。

たとえば、開発者が 150px x 150px の解像度のアセット カタログのベクターとしてファイルを含める MonkeyIcon.pdf 場合、コンパイル時に次のビットマップアセットが最終的なアプリ バンドルに含まれます。

  • MonkeyIcon@1x.png - 150px x 150px の解像度。
  • MonkeyIcon@2x.png - 300px x 300px の解像度。
  • MonkeyIcon@3x.png - 450px x 450px の解像度。

アセット カタログで PDF ベクター 画像を使用する場合は、次の事項を考慮する必要があります。

  • PDF はコンパイル時にビットマップにラスター化され、最終的なアプリケーションに付属するビットマップであるため、これは完全なベクター サポートではありません。
  • アセット カタログで設定したイメージのサイズを調整することはできません。 開発者が (コード内で、または自動レイアウトとサイズ クラスを使用して) イメージのサイズを変更しようとすると、イメージは他のビットマップと同様に歪みます。
  • アセット カタログは iOS 7 以降とのみ互換性があります。アプリで iOS 6 以下をサポートする必要がある場合は、アセット カタログを使用できません。

テンプレート イメージの操作

iOS アプリの設計に基づいて、開発者が配色の変更に合わせてユーザー インターフェイス内のアイコンまたはイメージをカスタマイズする必要がある場合があります (たとえば、ユーザー設定に基づいて)。

この効果を簡単に実現するには、イメージ アセットの レンダリング モード を テンプレート イメージに切り替えます。

iOS Designerから、イメージ アセットを UI コントロールに割り当て、イメージを色分けするように [濃淡] を設定します。

必要に応じて、Image Asset と Tint をコードで直接設定できます。

MyIcon.Image = UIImage.FromBundle ("MessageIcon");
MyIcon.TintColor = UIColor.Red;

テンプレート イメージをコードから完全に使用するには、次の操作を行います。

if (MyIcon.Image != null) {
    var mutableImage = MyIcon.Image.ImageWithRenderingMode (UIImageRenderingMode.AlwaysTemplate);
    MyIcon.Image = mutableImage;
    MyIcon.TintColor = UIColor.Red;
}

の RenderModeUIImage プロパティは読み取り専用であるため、 メソッドを ImageWithRenderingMode 使用して、目的の [レンダリング モード] 設定でイメージの新しいインスタンスを作成します。

列挙型を介して の UIImage.RenderMode 設定が 3 つ存在する UIImageRenderingMode 可能性があります。

  • AlwaysOriginal - イメージを変更せずに、元のソース イメージ ファイルとして強制的にレンダリングします。
  • AlwaysTemplate - 指定した Tint 色でピクセルを色分けして、イメージをテンプレート イメージとしてレンダリングします。
  • Automatic - 使用されている環境に基づいて、イメージをテンプレートまたは元のイメージとしてレンダリングします。 たとえば、イメージが でUIToolBarUINavigationBarUITabBar使用されている場合、または UISegmentControl テンプレートとして扱われます。

新しい資産コレクションの追加

Assets Catalogs でイメージを操作する場合は、アプリのすべてのイメージ Assets.xcassets をコレクションに追加するのではなく、新しいコレクションが必要になることがあります。 たとえば、オンデマンド リソースを設計する場合などです。

新しい Assets Catalog をプロジェクトに追加するには:

  1. ソリューション エクスプローラーで [プロジェクト名] を右クリックし、[新しいファイルの追加>]を選択します。

  2. [iOS>アセット カタログ] を選択し、コレクションの [名前] を入力し、[新規] ボタンをクリックします。

    新しいアセット カタログの作成

ここから、プロジェクトに自動的に含まれる既定 Assets.xcassets のコレクションと同じ方法でコレクションを操作できます。

コントロールでのイメージの使用

iOS では、アプリをサポートするために画像を使用するだけでなく、タブ バー、ツール バー、ナビゲーション バー、テーブル、ボタンなどのアプリ コントロールの種類の画像も使用します。 コントロールにイメージを表示する簡単な方法は、コントロールの Image プロパティにインスタンスを割り当てることUIImageです。

FromBundle

FromBundleメソッド呼び出しは同期 (ブロック) 呼び出しであり、さまざまな解像度のイメージ ファイルのキャッシュサポートや自動処理など、多数のイメージ読み込みと管理機能が組み込まれています。

次の例は、 で の UITabBarItem イメージを設定する方法を UITabBar示しています。

TabBarItem.Image = UIImage.FromBundle ("MyImage");

が MyImage 、上記のアセット カタログに追加されたイメージ アセットの名前であると仮定します。 Asset Catalog イメージを操作する場合は、PNG 形式の画像のメソッドで FromBundle Image Set の名前を指定するだけです。

TabBarItem.Image = UIImage.FromBundle ("MyImage");

その他のイメージ形式の場合は、拡張子を名前に含めます。 次に例を示します。

TabBarItem.Image = UIImage.FromBundle ("MyImage.jpg");

アイコンと画像の詳細については、 カスタム アイコンとイメージ作成ガイドラインに関する Apple のドキュメントを参照してください。

ストーリーボードに画像を表示する

アセット カタログを使用して Xamarin.iOS プロジェクトにイメージを追加すると、iOS Designer で を使用してUIImageViewストーリーボードに簡単に表示できます。 たとえば、次の Image Asset が追加されている場合は、次のようになります。

サンプルの Image Asset が追加されました

ストーリーボードに表示するには、次の操作を行います。

  1. ソリューション エクスプローラー内のファイルをダブルクリックしてMain.storyboard、iOS Designerで編集するために開きます。

  2. [ツールボックス] からイメージ ビューを選択します。

    ツールボックスからイメージ ビューを選択する

  3. イメージ ビューをデザインサーフェイスにドラッグし、必要に応じて配置してサイズを変更します。

    デザイン サーフェイス上の新しいイメージ ビュー

  4. [プロパティ] エクスプローラーの [ウィジェット] セクションで、表示する目的の画像アセットを選択します。

    表示する画像アセットを選択します

  5. [ 表示 ] セクションで、[ モード] を 使用して、 イメージ ビュー のサイズを変更するときにイメージのサイズを変更する方法を制御します。

  6. [イメージ ビュー] を選択した状態で、もう一度クリックして制約を追加します。

    制約の追加

  7. イメージ ビューの各端にある "T" 形状のハンドルを画面の対応する側にドラッグして、画像を側面に "ピン留め" します。 この方法では、画面のサイズが変更されると、 イメージ ビュー が縮小および拡大します。

  8. ストーリーボードへの変更を保存します。

コードでのイメージの表示

ストーリーボードに画像を表示するのと同様に、アセット カタログを使用して Xamarin.iOS プロジェクトにイメージを追加すると、C# コードを使用して簡単に表示できます。

次の例を参照してください。

// Create an image view that will fill the
// parent image view and set the image from
// an Image Asset

var imageView = new UIImageView (View.Frame);
imageView.Image = UIImage.FromBundle ("Kemah");

// Add the Image View to the parent view
View.AddSubview (imageView);

このコードでは、新しい UIImageView を作成し、初期サイズと位置を指定します。 次に、プロジェクトに追加された Image Asset からイメージを読み込み、 を親UIViewに追加UIImageViewして表示します。