ここでは、
Androidでは、OnElementChangedで画像の色を変更する処理をしています。
iOSでは、OnElementPropertyChangedで画像の色を変更する処理をしています。 iOSではOnElementChangedの段階では、imageの準備が完了していないためです。

以上で、カスラムレンダラーを使用して、Xamarin.FormsのImageのカラーが変更できるようになりました。

f:id:mattsuDev:20150713183735p:plain f:id:mattsuDev:20150713183747p:plain

2015-07-09

Xamarin.Forms でComponentを追加する

Android iOS Xamarin Xamarin.Forms

Xamarin.FormsにはComponent Storeがあります。そこから、コンポーネントを入手することで、各種処理の実装を簡単に行えるようになります。ストアには有償のものも、無償のものもあります。

Google Maps コンポーネントをiOSのプロジェクトに追加する方法を例にまとめます。

手順

Component Store にアクセスする
必要なコンポーネントを探す
コンポーネントをプロジェクトに追加する
追加されたコンポーネントを確認する

Component Store にアクセスする

f:id:mattsuDev:20150709204510p:plain

追加したいプロジェクト(今回はiOS)の「Components」フォルダにアクセスします。
「オプション」画面を開いて「Get More Components」を選択します。
Xamarin Components のウィンドウが開きます。

コンポーネントを探す

f:id:mattsuDev:20150709205138p:plain

コンポーネントは左上の検索欄に入力することで、検索することができます。
目的のものが見つかったら選択して、次にいきます。

コンポーネントをプロジェクトに追加する

f:id:mattsuDev:20150709205439p:plain

コンポーネントの詳細ページの「Add to App」をボタンを選択することで、コンポーネントの追加が始まります。

追加されたコンポーネントを確認する

f:id:mattsuDev:20150709210150p:plain

追加が完了すると「Components」フォルダにコンポーネントが追加されます。
また、コンポーネントの使用方法や、サンプルが確認できる画面が表示されます。
必要に応じてサンプルなどをダウンロードしましょう。

以上で、コンポーネントの追加は完了です。

2015-07-06

Xamarin.Forms でMapを表示する

Android iOS Xamarin Xamarin.Forms

Xamarin.FormsでMapを表示するには、"Xamarin.Forms.Maps"コントロールを使用します。
これを使用することで、iOSではApple Map、AndroidではGoogle Mapを容易に使用することができます。

サンプルはこちら

<a href="https://github.com/mattsuDev/Xamarin.Forms.MapSmaple">mattsuDev/Xamarin.Forms.MapSmaple</a>github.com

手順

"Xamarin.Forms.Maps"パッケージをプロジェクトに追加する
"Xamarin.Froms.Map"を初期化する
Map表示用のページを作成する
各プロジェクトごとに必要な設定を行う
- Androidの設定
  - パーミッションを設定する
  - 最大ヒープサイズを設定する
  - アプリケーションキーを設定する
- iOSの設定
  - 位置情報を使用するための権限取得メッセージを設定する

Xamarin.Forms.Maps パッケージをプロジェクトに追加

"Xamarin.Forms.Maps"を使用するには、プロジェクトにからパッケージを追加する必要があります。
パッケージは「NuGet」から取得することができます。

f:id:mattsuDev:20150705185117p:plain f:id:mattsuDev:20150705185134p:plain

PCLプロジェクトで、設定メニューを表示する。
「追加」→「Add NuGet Packages...」と選択肢、NuGet追加の画面を表示する。
「Official NuGet Gallery」を選択し、検索欄に「xamarin forms maps」と入力して検索する。
"Xamarin.Forms.Maps"パッケージをチェックボックスで選択し、「Add Package」で完了させる。

iOS、Androidの各プロジェクトで同様の操作を繰り返します。

完了すると、Mapの利用に必要なパッケージも同時に追加されます。

f:id:mattsuDev:20150705185548p:plain

Xamarin.Forms.Map の初期化

Xamarin.Forms.Mapを使用するには、プラットフォームごとに初期化コードを実装する必要があります。

Androidの初期化コード

Androidは「MainActivity.cs」ファイルに追加します。

Xamarin.Formsでマップを初期化する (Android、MainActivity.cs)

iOSの初期化コード

iOSは「AppDelegate.cs」ファイルに追加します。

Xamarin.Formsでマップを初期化する (iOS、AppDelegate.cs)

Mapページの実装

Mapを表示するためのページを作成します。

Xamarin.Formsでマップを表示するためのページ

iOSの場合は、この段階でマップを表示することができます。ビルドして確認してみましょう。 Androidの場合は、もう少し作業が必要なので次に進みましょう。

各プロジェクトごとの設定

Android

パーミッションの設定

AndroidでMapを使用するには3つのの権限が必要です。

AccessFineLocation
AccessNetworkState
Internet

f:id:mattsuDev:20150705185812p:plain

「Properties」フォルダの「AndroidManifest.xml」を開きます。
「Required permissions」内の上記項目をチェックすると完了です。

最大ヒープサイズの設定

ヒープの最大サイズを設定していない場合、コンパイルエラーになることがあります。

UNEXPECTED TOP-LEVEL ERROR: java.lang.OutOfMemoryError: Java heap space

f:id:mattsuDev:20150705190101p:plain

Androidプロジェクトのオプション画面を表示します。
「ビルド」の「Android Build」を選択し、「Advanced」タブを開きます。
「Additional Options」の「Java heap size:」に「1G」と設定しましょう。

これで、このエラーは解決します。

アプリケーションキーの設定

Androidでは、「Google Maps API v2」を使用します。
これを使用するには、「Google API」のキーを取得し、設定する必要があります。
取得方法については、別にまとめてあるのでそちらを参照してください。

<a href="http://mattsudev.hatenablog.com/entry/2015/07/06/214407">Google Map API を使用するためのAPIキーを作成する - mattsuDev’s blog</a>mattsudev.hatenablog.com

取得したキーの設定を行います。

f:id:mattsuDev:20150705191617p:plain gist.github.com

「Properties」フォルダの「AndroidManifest.xml」を開きます。
「ソース」タブを選択します。
「application」タグの間に上記のように「meta-data」タグを挿入します。
＜取得したAPI Keyをここに書く＞の部分にキーを入力して完了です。

iOS

iOSでは、マップを表示するだけなら特に権限は必要ありません。
しかし、現在地の表示などで位置情報を使用する場合は、位置情報使用のための権限を得る必要があります。

位置情報使用のための権限の取得

iOSで位置情報を使用するためには、2つのうちのどちらかの権限が必要です。
アプリに合わせて実装しましょう。

NSLocationAlwaysUsageDescription
常に許可 (バックグラウンド時にも使用できます)
NSLocationWhenInUseUsageDescription
このアプリ使用時のみに許可

「NSLocationAlwaysUsageDescription 」を設定する方法を例にあげます。

f:id:mattsuDev:20150705190602p:plain f:id:mattsuDev:20150705190618p:plain

「Info.plist」を開き、「ソース」タブを選択します。
「Add New entry」を選択し、「＋」ボタンを押します。
「Custom Property」と表示された部分を選択すると、矢印ボタンからアイテムリストが表示されます。
「NSLocationAlwaysUsageDescription」を選択します。
「String」に「位置情報の使用を常に許可します」と入力します。

これはアプリ起動時に「位置情報の使用を常に許可する」権限を得るためのメッセージ表示に使用されます。
メッセージには「String」に設定した文言が表示されます。
アプリに合わせて自由に設定してください。

これで、現在地表示など、位置情報を使用した地図も表示することができます。

2015-07-06

Google Map API を使用するためのAPIキーを作成する

Android iOS Xamarin Xamarin.Forms

Google Mapを使用するためには、Google Map API を使用します。
また、Google Map API を使用するためには APIキーを作成する必要があります。

今回は、Google Map API を使用するためのAPIキーの作成方法をまとめました。

手順

各プラットフォームでの準備
APIの有効化
APIキーの作成

Androidでの準備

SHA1 証明書フィンガープリントの取得

Google API のAPIキーを取得するには、
AndroidのキーストアからSHA1 証明書フィンガープリントを取得する必要があります。
Xamarinの場合、キーストアは下記にあります。 *1

/Users/<ユーザー名>/.local/share/Xamarin/Mono for Android/debug.keystore

SHA1 証明書フィンガープリントの取得には「keytool」コマンドを使用します。「ターミナル」で下記のようにコマンドを実行しましょう。

keytool -list -v -keystore /Users/＜USERNAME＞/.local/share/Xamarin/Mono\ for\ Android/debug.keystore -alias androiddebugkey -storepass android -keypass android

＜USERNAME＞の部分は自分の環境に書き換えてください。

下記のような結果が表示されます。
「SHA1」の部分がSHA1 証明書フィンガープリントとなります。後で使用するので、値をメモしておきましょう。

f:id:mattsuDev:20150706204843p:plain

パッケージ名の取得

APIキーは、「SHA1 証明書フィンガープリント」と「パッケージ名」のセットで取得します。
Androidプロジェクトのパッケージ名をメモしておきましょう。
パッケージ名は、
「Properties/AndroidManifest.xml」の「package="パッケージ名"」のパッケージ名の部分です。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
android:versionCode="1"
android:versionName="1.0"
package="com.mattsuDev.XamarinFormsMapSample">

iOSでの準備

バンドルIDの取得

iOS用のAPIキーの作成には、バンドルIDが必要になります。
バンドルIDは「Info.plist」の「Bundle identifier」に設定されているものです。

APIの有効化

Google API Console へのアクセス

APIキーに関する操作は、Google API Consoleで行います。
アクセスしてください。
下記のような画面が表示されるので、「Create Project」を選択します。
自動的にプロジェクトが作成されます。

f:id:mattsuDev:20150706210351p:plain

APIの有効化

APIキーを使用するためには、使用したいAPIを有効化する必要があります。
「Enable Google APIs for use in your apps」を選択します。
f:id:mattsuDev:20150706211138p:plain

Androidなら「Google Maps Android API」を、
iOSなら「Google Maps SDK for iOS」を選択します。 f:id:mattsuDev:20150706211159p:plain

「APIを有効にする」ボタンを押します。 f:id:mattsuDev:20150706211210p:plain

有効なAPIに追加されれば完了です。 f:id:mattsuDev:20150706211612p:plain

APIへアクセスするためのキーを作成

有効にしたAPIにアクセスするためのキーを作成します。
左側のメニューから「APIと認証」→「認証情報」と選択します。
「公開APIへのアクセス」の「新しいキー」を作成ボタンを押します。
「新しいキーの作成」ダイアログが表示されます。 f:id:mattsuDev:20150706212148p:plain

Androidの場合

「Android key」を選択します。
下記のような画面が表示されるので、アクセスを許可するアプリの登録を行います。
事前に用意しておいた、「SHA1 証明書フィンガープリント」と「パッケージ名」を指定されたように登録しましょう。 *2
「作成」ボタンを押して、APIキーを作成します。 f:id:mattsuDev:20150706212848p:plain

下記のように作成したAPIキーが確認できれば完了です。 f:id:mattsuDev:20150706213921p:plain

iOSの場合

「iOS キー」を選択します。
下記のような画面が表示されるので、アクセスを許可するアプリの登録を行います。
事前に用意しておいた、「バンドルID」を指定されたように登録しましょう。
「作成」ボタンを押して、APIキーを作成します。
(ボタンが「更新」となっているのは気にしないでください。スクショ撮り忘れました。) f:id:mattsuDev:20150706212913p:plain

下記のように作成したAPIキーが確認できれば完了です。 f:id:mattsuDev:20150706213949p:plain

*1:デバッグ用のキーストアです。リリース用のキーストアは自分で用意する必要があります。

*2:デバッグのみで接続する場合には、アプリの登録はなくても良いようです。

2015-07-04

Xamarin.Froms でビューをアニメーションさせる

Android iOS Xamarin Xamarin.Forms

ビューにはアニメーション用のメソッドが用意されています。これを使用することで簡単にアニメーションを設定することができます。

今回は"BoxView"を使用してアニメーションを設定します。

サンプルはこちら

<a href="https://github.com/mattsuDev/Xamarin.Forms.AnimationSample">mattsuDev/Xamarin.Forms.AnimationSample</a>github.com

アニメーション用のメソッド

アニメーション用のメソッドには以下のものが用意されています。

FadeTo
LayoutTo
RotateTo
RotateXTo
RotateYTo
RelRotatoTo
ScaleTo
RelScaleTo
TranslateTo

移動アニメーションの設定

ビューに移動アニメーションを設定するには、"TranslateTo"または"LayoutTo"メソッドを使用します。
"LayouTo"メソッドはビューのレイアウトを変更するためのメソッドですが、ビューのサイズを変更せずに、ビューの位置だけを変更することで、移動アニメーションを実現できます。

Xamarin.Formsでビューに移動アニメーションを設定する

スケールアニメーションの設定

ビューに拡大縮小アニメーションを設定するには"ScaleTo"または"RelScaleTo"メソッドを使用します。
"Rel"メソッドについては後ほど説明します。

Xamarin.Formsでビューに拡大縮小アニメーションを設定する

回転アニメーションの設定

ビューに回転アニメーションを設定するには"RotateTo"系メソッドを使用します。

Xamarin.Formsでビューに回転アニメーションを設定する

Relアニメーションについて

Relアニメーションは現在の状態に単純にパラメータを加算させたアニメーションを実行します。
上記の回転アニメーションのサンプルコードでは、現在の状態から30度回転させるアニメーションになります。

RotateTo : ベースのビューを30度回転させた位置へのアニメーション　30度回転した状態になると、以降アニメーションしない
RelRotateTo : ビューを現在の角度から30度回転させる
30度回転した状態になっても、アニメーションを指定するたびに、30度ずつ回転する
30度→60度→90度・・・