Xamarin.Android の Google Maps でカスタムした情報ウィンドウの表示

Xamarin.Android の Google Maps で、独自の情報ウィンドウ (info Window) を表示します。

カスタムした情報ウィンドウの表示

View の定義

axml ファイルで定義した View を情報ウィンドウとして表示します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_gravity="center_vertical"
        android:src="@drawable/ic_train_black"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:alpha="0.54" />
    <LinearLayout
        android:layout_gravity="center_vertical"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <TextView
            android:id="@+id/info_title"
            android:text="example"
            android:textColor="@color/primary_text"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:textSize="16sp" />
        <TextView
            android:id="@+id/info_snippet"
            android:text="example"
            android:textColor="@color/secondary_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp" />
    </LinearLayout>
    <ImageView
        android:layout_gravity="center_vertical"
        android:src="@drawable/ic_navigate_next_black"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:alpha="0.54" />
</LinearLayout>

IInfoWindowAdapter の実装

IInfoWindowAdapter を実装したクラスを作成します。

吹き出しの中身を置き換えるには、GetInfoContents で View を返します。情報ウィンドウすべてを置き換えるには GetInfoWindow で View を返すようにします。

using Android.Views;
using Android.Widget;
using Android.Gms.Maps;
using Android.Gms.Maps.Model;

public class InfoWindowAdapter : Java.Lang.Object, GoogleMap.IInfoWindowAdapter
{
    private LayoutInflater inflater;

    public InfoWindowAdapter(LayoutInflater inflater)
    {
        this.inflater = inflater;
    }

    public View GetInfoContents(Marker marker)
    {
        var view = inflater.Inflate(Resource.Layout.InfoWindow, null);
        
        var title = view.FindViewById<TextView>(Resource.Id.info_title);
        title.Text = marker.Title;

        var snippet = view.FindViewById<TextView>(Resource.Id.info_snippet);
        snippet.Text = marker.Snippet;

        return view;
    }

    public View GetInfoWindow(Marker marker)
    {
        return null;
    }
}

InfoWindowAdapter の適用

作成した Adapter を、GoogleMap オブジェクトに設定します。

public void OnMapReady(GoogleMap map)
{
    map.SetInfoWindowAdapter(new InfoWindowAdapter(LayoutInflater));
}

結果

マーカーを追加すると、Adapter で処理した情報ウィンドウが表示されます。

var m = new MarkerOptions();
m.SetPosition(new LatLng(34.6925497, 135.5016865));
m.SetTitle("淀屋橋駅");
m.SetSnippet("大阪府大阪市中央区北浜3丁目1-25");
var marker = map.AddMarker(m);

f:id:jz5_diva:20160421154804p:plain

オマケ1: 情報ウィンドウのタップ時に処理するには

情報ウィンドウがタップされたときに何か処理する場合は、InfoWindowClick イベントを使います。

map.InfoWindowClick += Map_InfoWindowClick;

オマケ2: 情報ウィンドウをコードから表示するには

情報ウィンドウをコードから表示するには、Maker の ShowInfoWindow メソッドを使います。

maker.ShowInfoWindow();

ディーバ Blog

大阪発 C#の会社、株式会社ディーバの Blog です。