【InfoWindow】InfoWindowレイアウト取り決めから実装まで

前々回から今までで紹介したのはInfoWindowをカスタマイズして使うことが出来るとこまでで

実際の導入方法を書いていなかったので、一緒にこの記事で書くことにしました。

InfoWindowをカスタマイズするには、まずサブクラスを作る必要があります。

osmbonuspackのチュートリアルの通り、必要なメソッドを全て書いていきます。

ここで重要なのは最初のコンストラクタとonopenとoncloseの三つのみ

</pre>
public class CustomInfoWindow extends MarkerInfoWindow {
private Marker marker;
public CustomInfoWindow(MapView mapView) {
super(R.layout.original_window, mapView);
}
public void onOpen(Object item){
marker = (Marker)item;
Button btnMoreInfo = (Button) mView.findViewById(R.id.bubble_imageBtn);
btnMoreInfo.setBackgroundDrawable(marker.getIcon());
btnMoreInfo.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Toast.makeText(view.getContext(), marker.getTitle(), Toast.LENGTH_LONG).show();
}
});
public void onClose() {
super.onClose();
marker = null;
}
}
}
<pre>

onOpenは、マーカーをクリックした時にInfoWindowを表示するメソッドです。

この中でボタンのコールバックを書くことでmarkerから取得したタイトルやスニペットを

自由に使うことが出来ます。

他のアクティビティ同様intentを使って特定のアクティビティに移動することもできます。

onCloseはInfoWindowを閉じるときのメソッド。特筆事項はありませんがsuper.onClose()と

marker = nullは書いておきましょう。

InfoWindowのレイアウトは四行目super(R.layout.original_window, mapView)で

組み込んでいます。

LinearLayoutでも作ることはできますが、自分は相対的にテキストと画像を配置

したかったので、RelativeLayoutで以下のように固めることにしました。

</pre>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="250dp"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal">
<RelativeLayout
android:id="@+id/relativeLayout2"
android:layout_width="250dp"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints">
<ImageView
android:id="@+id/whiteimage"
android:layout_width="250dp"
android:layout_height="88dp"
android:background="#fff"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/bubble_text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="88dp"
android:text="2016年4月4日"
android:textSize="10sp"
android:textColor="#000"
android:textStyle="bold" />
<TextView
android:id="@+id/bubble_snipette"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:layout_marginStart="88dp"
android:text="2016年4月4日"
android:textSize="10sp"
android:textColor="#000"
android:textStyle="bold" />
<TextView
android:id="@+id/bubble_subDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="46dp"
android:layout_marginStart="88dp"
android:text="2016年4月4日"
android:textSize="10sp"
android:textColor="#000"
android:textStyle="bold" />
<Button
android:id="@+id/bubble_imageBtn"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="16dp"
android:layout_marginStart="16dp"
android:background="@drawable/image"
tools:ignore="MissingConstraints" />
<View
android:layout_width="20dp"
android:layout_height="40dp"
android:layout_marginStart="110dp"
android:layout_marginTop="60dp"
android:background="#fff"
android:rotation="45" />
</RelativeLayout>
</LinearLayout>
<pre>

基本的にはマーカーから情報を受け取るだけなので画像とテキストがあれば

それなりにかっこいいのが作れるかなと思い必要最低限のものだけを

書きました。

一方のmainActivityで必要なことは下記一行だけ。これがないとInfoWindowが

表示されないので明記しておきましょう。

</pre>
org.osmdroid.views.overlay.Marker mMarker;

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_report);

mMarker.setInfoWindow(new CustomInfoWindow(mapView));
<pre>

以上三点がInfoWindowを作る際の必須事項になります。

サブクラスを使ったことがないと仕組みに戸惑いがちですが

googlemap同様自由度が高いのでがんがんカスタマイズすることができます。

チュートリアルも分かりやすいので一旦作ったものと比較しながら作るのも良いかも。