Yazar Bozar

Android ile ilgili forumlarda sıkça karşılaştığım sorunlardan birisi MapView üzerine balon yapısı yerleştirmek, daha önce bir proje için üzerinde çalıştığım prototipte layout tabanlı basit bir çözüm hazırlamıştım.

Öncelikle bir layout sınıfı hazırlayıp, dispatchDraw metodu içerisinde balonumuzu çiziyoruz:

package com.dogantekin.baloon;
....
public class BaloonLayout extends LinearLayout {
....
@Override
protected void dispatchDraw(Canvas canvas) {
Paint panelPaint = new Paint();
panelPaint.setARGB(0, 0, 0, 0);
RectF panelRect = new RectF();
panelRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());
canvas.drawRoundRect(panelRect, 5, 5, panelPaint);
RectF baloonRect = new RectF();
baloonRect.set(0,0, getMeasuredWidth(), 2*(getMeasuredHeight()/3));
panelPaint.setARGB(230, 255, 255, 255);
canvas.drawRoundRect(baloonRect, 10, 10, panelPaint);
Path baloonTip = new Path();
baloonTip.moveTo(5*(getMeasuredWidth()/8), 2*(getMeasuredHeight()/3));
baloonTip.lineTo(getMeasuredWidth()/2, getMeasuredHeight());
baloonTip.lineTo(3*(getMeasuredWidth()/4), 2*(getMeasuredHeight()/3));
canvas.drawPath(baloonTip, panelPaint);
super.dispatchDraw(canvas);
}
}


Sonra bu layout’u kullanan bir layout xml’i hazırlayarak, balon içerisine yerleştirmek istediğimiz kısımları belirtiyoruz (örnek olarak başlık ve içerik için iki adet textview ve kapatmak için ise bir imageview):

<?xml version="1.0" encoding="utf-8"?>
<com.dogantekin.baloon.BaloonLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/transparent_panel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="5px"
android:paddingTop="5px"
android:paddingRight="5px"
android:paddingBottom="5px">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/note_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="@string/note"
/>
<ImageView
android:id="@+id/close_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingRight="10px"
android:src="@drawable/close"
android:clickable="true"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:paddingLeft="5px"
android:paddingRight="5px"
android:text=""
android:id="@+id/note_text"
android:layout_below="@+id/note_label"
android:layout_centerHorizontal="true"
android:minLines="4"
android:maxLines="4"
android:maxLength="160"
android:textSize="5pt"
/>
</RelativeLayout>
</com.dogantekin.baloon.BaloonLayout>


Evet balon yapımız hazır, şimdi ise ilgili MapActivity içerisinde ilk başta hazırladığımız balon layoutunun instance’ını oluşturmamız gerekiyor:

LayoutInflater layoutInflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
noteBaloon = (BaloonLayout) layoutInflater.inflate(R.layout.baloon, null);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(200,100);
layoutParams.addRule(RelativeLayout.CENTER_VERTICAL);
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
noteBaloon.setLayoutParams(layoutParams);


Bu aşamadan sonra balonumuzu map view üzerinde istediğimiz nokta üzerinde göstermek için:

((TextView)noteBaloon.findViewById(R.id.note_text)).setText(msg.getData().getString(HANDLER_MESSAGE_AUTHOR)+"\n"+msg.getData().getString(HANDLER_MESSAGE_NOTE));
mapController.animateTo(noteOverlay.getTapPoint()); // kullanicinin dokundugu noktayi aliyoruz
mapView.addView(noteBaloon, new MapView.LayoutParams(200,200,noteOverlay.getTapPoint(),MapView.LayoutParams.BOTTOM_CENTER));
mapView.setEnabled(false);


Balonumuzu map view üzerinden kaldırmak için ise:

mapView.removeView(noteBaloon);
mapView.setEnabled(true);


yeterli olacaktır. Layout xml’de istediğimiz eklemeleri yaparak daha zengin içeriğe sahip bir arayüz sağlayabiliriz:

Related posts:

1. Uygulama İçinden Ekran Görüntüsü Almak Android platformunda ekran görüntüsü almak için kolay bir yol yok...

Related posts brought to you by Yet Another Related Posts Plugin.