Skip to content

Instantly share code, notes, and snippets.

@Yosuke-Kawakami
Last active November 15, 2016 05:48
Show Gist options
  • Save Yosuke-Kawakami/11207309 to your computer and use it in GitHub Desktop.
Save Yosuke-Kawakami/11207309 to your computer and use it in GitHub Desktop.
Google Maps Android API V2 のバルーンをカスタマイズするのに一寸手間取ったのでメモ
/*
* 基本的な実装は他を参照してくだち!><
*
*/
GoogleMap _map;
private void init_map(){
_map = ((SupportMapFragment)fragment).getMap();
_map.setInfoWindowAdapter(new CustomInfoAdapter());
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/balloon"
android:orientation="horizontal" >
<ProgressBar
android:id="@+id/balloon_progress"
style="?android:attr/progressBarStyleInverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<ImageView
android:id="@+id/infoWindow_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5sp"
android:adjustViewBounds="true"
android:contentDescription="@string/app_name" >
</ImageView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="@+id/infoWindow_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:ellipsize="end"
android:singleLine="true"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="@+id/infoWindow_snippet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#777777"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
/*
* カスタムInfoAdapter
* バルーンには以下の 3 要素を表示させる
*
* ・ Title
* ・ Snipet
* ・ 画像(インターネット上から取得)
*
* マーカータップ時にバルーンを表示されたっきりだと
* 非同期で取得してきた画像が反映されないので、
* 非同期処理が完了した時点でバルーンを再描画してやる必要がある
*/
public class CustomInfoAdapter implements InfoWindowAdapter {
private final View mWindow;
String lastMarkerId;
public CustomInfoAdapter() {
mWindow = getLayoutInflater().inflate(R.layout.custom_info_window, null);
}
@Override
public View getInfoWindow(Marker marker) {
render(marker, mWindow);
return mWindow;
}
@Override
public View getInfoContents(Marker marker) {
// onPostExecute から呼ばれた場合は再描画する
boolean isRedraw = (marker != null && marker.isInfoWindowShown());
if(isRedraw) marker.showInfoWindow();
return null;
}
/**
*
*/
private void render(final Marker marker, View view) {
if (marker.getId().equals(lastMarkerId)){ return; }
else { lastMarkerId = marker.getId();}
final ProgressBar progressBar = (ProgressBar)view.findViewById(R.id.balloon_progress);
final ImageView imageView = (ImageView)view.findViewById(R.id.infoWindow_image);
AsyncTask<String, Void, WeakReference<Bitmap>> asyncTask = new AsyncTask<String, Void, WeakReference<Bitmap>>(){
@Override
protected void onPreExecute() {
progressBar.setVisibility(View.VISIBLE);
imageView.setVisibility(View.GONE);
}
@Override
protected WeakReference<Bitmap> doInBackground(String... params) {
return Hoge.fuga(); // Hoge.fuga() はインターネット上から画像を取得するメソッド
}
@Override
protected void onPostExecute(WeakReference<Bitmap> result) {
progressBar.setVisibility(View.GONE);
imageView.setImageBitmap(result.get());
imageView.setVisibility(View.VISIBLE);
getInfoContents(marker); // 画像取得後に改めて表示させるのがミソ
}
};
asyncTask.execute(IMAGE_URL); // URL は上手いこと持ってきてくだち
TextView title = (TextView) view.findViewById(R.id.infoWindow_title);
title.setText(marker.getTitle());
TextView snippet = (TextView) view.findViewById(R.id.infoWindow_snippet);
snippet.setText(marker.getSnippet());
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment