Xamarin.Forms Image のチュートリアル
このチュートリアルを試行する前に、以下を正常に完了しておく必要があります。
- 初めての Xamarin.Forms アプリのビルドに関するクイックスタート。
- StackLayout のチュートリアル。
このチュートリアルでは、次の作業を行う方法について説明します。
- XAML で Xamarin.Forms
Imageを作成する。 Imageの外観をカスタマイズする。- 各プラットフォーム プロジェクトからローカルのイメージ ファイルを表示する。
画像を表示し、その外観をカスタマイズする方法を示す簡単なアプリケーションを作成するには、Visual Studio 2019 または Visual Studio for Mac を使用します。 次のスクリーンショットは、最終的なアプリケーションです。
また、Xamarin.Forms 向け XAML ホット リロードを使用して、アプリケーションをリビルドせずに UI の変更を確認することもできます。
イメージを作成する
このチュートリアルを完了するには、 .NET によるモバイル開発ワークロードがインストールされた、Visual Studio 2019 (最新リリース) が必要です。 さらに、iOS でチュートリアル アプリケーションを構築するには、ペアリング済みの Mac が必要になります。 Xamarin プラットフォームのインストールについては、「Xamarin のインストール」を参照してください。 Mac ビルド ホストへの Visual Studio 2019 の接続については、「Xamarin.iOS 開発のために Mac とペアリングする」を参照してください。
Visual Studio を起動し、ImageTutorial という名前の新しい空の Xamarin.Forms アプリを作成します。
重要
このチュートリアルの C# スニペットと XAML スニペットでは、ImageTutorial という名前のソリューションが必要です。 別の名前を使用すると、コードをこのチュートリアルからソリューションにコピーするときに、ビルド エラーが発生します。
作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイック スタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。
ソリューション エクスプローラーの [ImageTutorial] プロジェクトで、 [MainPage.xaml] をダブルクリックして開きます。 次に、 [MainPage.xaml] のテンプレート コードをすべて削除し、次のコードに置き換えます。
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ImageTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" HeightRequest="300" /> </StackLayout> </ContentPage>このコードでは、
StackLayoutの中のImageから構成されるページのユーザー インターフェイスを宣言によって定義します。Image.Sourceプロパティでは、URI を使用して、表示するイメージを指定します。Image.Sourceプロパティの型はImageSourceです。これにより、イメージをファイル、URI、またはリソースから取得できます。 詳細については、「Xamarin.Forms のイメージ」ガイドの「画像の表示」を参照してください。HeightRequestプロパティでは、Imageの高さをデバイスに依存しない単位で指定します。Note
この例では、
WidthRequestプロパティを設定する必要はありません。 既定では、Imageでイメージの縦横比が維持されるためです。Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。
注意
Imageビューでは、ダウンロードしたイメージが 24 時間、自動的にキャッシュされます。 詳細については、「Xamarin.Forms のイメージ」ガイドの「ダウンロードされたイメージのキャッシュ」を参照してください。
外観をカスタマイズする
[MainPage.xaml] で、
Image宣言を変更してその外観をカスタマイズします。<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" Aspect="Fill" HeightRequest="{OnPlatform iOS=300, Android=250}" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />このコードでは、イメージのスケーリング モードを定義する、
AspectプロパティをFillに設定します。Fillメンバーは、Aspect列挙型で定義され、イメージがゆがんでいるかどうかに関係なく、ビューを完全に埋めるためにそのイメージを拡大します。 イメージのスケーリングの詳細については、「Xamarin.Forms のイメージ」ガイドの「画像の表示」を参照してください。OnPlatformマークアップ拡張では、プラットフォームごとに UI の外観をカスタマイズできます。 この例では、マークアップ拡張を使用して、HeightRequestおよびWidthRequestプロパティを、iOS では 300 (デバイスに依存しない単位) に、Android では 250 (デバイスに依存しない単位) に設定します。OnPlatformマークアップ拡張の詳細については、「Consuming XAML Markup Extensions」 (XAM マークアップ拡張の使用) ガイドの「OnPlatform markup extension」 (OnPlatform マークアップ拡張) を参照してください。また、
HorizontalOptionsプロパティでは、イメージが水平方向の中央に配置されるように指定します。アプリケーションがまだ実行されている場合は、変更内容をファイルに保存すると、アプリケーションのユーザー インターフェイスがシミュレーターまたはエミュレーターで自動的に更新されます。 もしくは、Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。
Visual Studio で、アプリケーションを停止します。
ローカル イメージを表示する
イメージ ファイルをプラットフォーム プロジェクトに追加したり、Xamarin.Forms 共有コードから参照したりすることができます。 このイメージ配布方法は、イメージがプラットフォーム固有の場合に必要になります。例えば、異なるプラットフォームで異なる解像度を使用する場合や、わずかに異なるデザインを使用する場合などです。
この演習では、URI からダウンロードしたイメージではなく、ローカル イメージを表示するように ImageTutorial ソリューションを変更します。 ローカル イメージは Xamarin のロゴです。下のボタンをクリックしてダウンロードする必要があります。
重要
すべてのプラットフォームで単一のイメージを使用するには、すべてのプラットフォームで同じファイル名を使用する必要があります。また、ファイル名は有効な Android リソース名である必要があります (つまり、小文字、数字、アンダースコア、およびピリオドのみが許可されます)。
ソリューション エクスプローラーの ImageTutorial.iOS プロジェクトで、 [資産カタログ] を展開し、 [資産] をダブルクリックして開きます。 次に、 [Assets.xcassets] タブで [プラス] ボタンをクリックし、 [イメージ セットの追加] を選択します。
[Assets.xcassets] タブで、新しいイメージ セットを選択するとエディターが表示されます。
XamarinLogo.png をファイル システムから [ユニバーサル] カテゴリの [1x] ボックスにドラッグします。
[Assets.xcassets] タブで、新しいイメージ セットの名前を右クリックし、名前を XamarinLogo に変更します。
[Assets.xcassets] タブを保存して閉じます。
ソリューション エクスプローラーの ImageTutorial.Android プロジェクトで、 [リソース] フォルダーを展開します。 次に、XamarinLogo.png をファイル システムから、 ドローアブル フォルダーにドラッグします。
Note
Visual Studio はイメージのビルド アクションを自動的に AndroidResource に設定します。
ImageTutorial プロジェクトの MainPage.xaml で、ローカルの XamarinLogo ファイルを表示するように
Image宣言を変更します。<Image Source="XamarinLogo" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />このコードは、
Sourceプロパティを、表示するローカル ファイルに設定します。WidthRequestプロパティは、iOS では 300 デバイス非依存単位、Android では 250 デバイス非依存単位に設定されます。 また、HorizontalOptionsプロパティでは、イメージが水平方向の中央に配置されるように指定します。注意
iOS 上の PNG イメージの場合、
Sourceプロパティで指定するファイル名から .png 拡張子を省略できます。 その他のイメージ形式の場合は、拡張子が必要です。Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。
Visual Studio で、アプリケーションを停止します。
ローカル イメージの詳細については、「Xamarin.Forms のイメージ」ガイドの「ローカル イメージ」を参照してください。
おめでとうございます。
これでこのチュートリアルは完了です。ここでは以下の方法を学習しました。
- XAML で Xamarin.Forms
Imageを作成する。 Imageの外観をカスタマイズする。- 各プラットフォーム プロジェクトからローカルのイメージ ファイルを表示する。
次の手順
Xamarin.Forms を使用してモバイル アプリケーションを作成する基本についてさらに学習する場合は、Grid のチュートリアルに進んでください。
関連リンク
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。