Rounded corners for map view

[qeevee]

Usual trick does not work.

[glaap]

soll ich mir das angucken oder ist das aus Versehen an mich assigned?

[qeevee]

Hier habe ich einen vielleicht brauchbaren hinweis gesehen: http://blog.blundell-apps.com/rounded-corners-mapview/

Ob das mit OSMAndroid klappt weiss ich nicht. Zur Not verzeichten wir auf runde Ecken.

[qeevee]

ah gut du seihst die KOmmentare schnell. Ja, wäre gut, wenn du dir das ansiehst. Bist ja eh mit der Map unterwegs gewesen zuletzt.

[glaap]

Ich schaue mir gerade die Source aus dem Link an.

Ich habe ein paar Fragen:

• Soll das fest verankert sein für alle Mapviews (schnell spezifisch für Carl Benz)?
• Soll es sowohl für OSM als auch für Googlemaps implementiert werden?
• Das Beispiel scheint im Grunde einfach einen Rahmen um den View zu malen, der dann eben schwarz ist. Das sollte aber ja am Besten eine Hintergrundgrafik haben, oder? Wo liegen die?

[glaap]

Eine erste Version funktioniert. Es wird dazu ein 9-Patch Drawable über die Map gelegt, welches dann die Rounded Corners über der Map anzeigt. Das geht aber nur mit einfarbigem Hintergrund.

Außerdem sollte das 9 Patch Bild verschönert werden.

[qeevee]

Wir verwenden aber Quest-spezifische Bilder als Hintergrund. z. Bsp. https://github.com/qeevee/Private-Quests-Repo/blob/master/PH_KA/CarlBenzTour/edu.bonn.mobilegaming.geoquest/repositories/PH_KA/CarlBenzTour/images/alteKarte.png

In den anderen Missions Layouts nehme ich die Bilder einfach als background des Layouts. Das geht hier ja leider nicht.

[qeevee]

Hier wird auch nur maskiert, aber immerhin schön rund: http://stackoverflow.com/questions/14469208/is-there-a-way-to-implement-rounded-corners-to-a-mapfragment

[qeevee]

Vermutlich müsste man die draw() methode überschreiben und in den Ecken statt der Tiles etwas modifiziertes zeichnen. Habe das bei den Bitmaps auch gemacht: com.qeevee.ui.BitmapUtil.getRoundedCornerBitmap(Bitmap, int)

Aber könnte zu aufwändig sein, oder? Evtl. verschieben auf später. Und jetzt nur manuell auf passenes Hintergrundfarbe (z. Bsp. das Grau der zuletzt benutzen alten Karte) setzen?

[glaap]

Ja das Beispiel habe ich auch gesehen. Das 9-Patch Bild war ja auch nur ein Test ob es klappt.

Wo werden die Bilder denn eingebunden? Man könnte ja zum Beispiel das jeweilige Hintergrundbild folgendermaßen verändern und in der Mapansicht oben auf anzeigen:

[qeevee]

Bisher nur in NPCTalk als aatribut "bg" in mission tag.

Beispiel im Spiel: (https://github.com/qeevee/Private-Quests-Repo/blob/master/PH_KA/CarlBenzTour/edu.bonn.mobilegaming.geoquest/repositories/PH_KA/CarlBenzTour/game.xml)

<mission type="NPCTalk" id="Start" image="images/geburtshaus" nextdialogbuttontext="Weiter ..." endbuttontext="Zur Karte..." bg="images/alteKarte"> ...

Implementierung hier: edu.bonn.mobilegaming.geoquest.ui.abstrakt.MissionUI.setBackground()

[qeevee]

Vielleicht hilft uns FrameLayout: http://developer.android.com/reference/android/widget/FrameLayout.html

???

[glaap]

Das wurde mir vorgeschlagen um die RoundedCorners obendrüber anzuzeigen.

Jetzt benutze ich es so:

<org.osmdroid.views.MapView
    android:id="@+id/osmapview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:clickable="true" />

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/roundedcorners"
android:orientation="vertical" >

...

[glaap]

Schau mal ich habe den Hintergrund den du mir geschickt hast ganz gut einfügen können:

[qeevee]

super!

wie hast du es jetzt gemacht?

[glaap]

Ich habe aus dem Bild in Gimp eine Auswahl mit runden Ecken ausgeschnitten, dann in ein 9-Patch-Bild umgewandelt und im Layout XML drüber gelegt.

[qeevee]

Wie würde das denn gedehnt aussehen? Wäre dann ein grauer Pixel gedehnt?

[glaap]

Das kann man beim Erstellen des 9-Patch Bildes einstellen wie man möchte. Ich habe jetzt alles zwischen den Ecken als dehnbaren Bereich benutzt. In dem Bild oben ist das sehr zusammengequetscht.

Man könnte aber eben auch einzelne Pixel dehnen. Ich benutze folgendes Programm: http://digitalsquid.co.uk/patchworker/

[qeevee]

Das heisst aber, dass wir das manuell vor Auslieferung der App einbauen müssen. Das ist jetzt für Carl Benz ok.

Aber wie gehen wir langfristig vor?

[glaap]

Man kann die LinearLayout Properties doch auch im Programmcode neu setzen oder?

Dann definiert man in der XML nicht nur das Hintergrundbild, sondern auch die zugehörige ausgeschnittene Version. Der zukünftige Editor könnte solche ausgeschnittenen Bilder vielleicht auch selbst aus den Hintergrundbildern erstellen.

Ansonsten können wir uns ja langfristig nochmal angucken, ob wir das Zeichnen des Mapviews irgendwie überschreiben können.

Der Kompass müsste außerdem neu positioniert werden. Soll der in der Carl Benz App eigentlich angezeigt werden?

[qeevee]

OK. Mach doch eine neue Issue draus im Milestone https://github.com/qeevee/GQ_Player_Android/issues?milestone=10&state=open

Der Kompass sollte in Carl Benz Tour zu sehen sein. Ja.

[glaap]

Okay. Dann verschiebe ich den noch. Mal sehen.

Anbei mal ein Test mit dem in Gimp angefertigten Rand:

[glaap]

Kompass ist jetzt wieder sichtbar. Alles ist im Branch hotfix-roundedcorners comitted.

Schreib mir nachher mal wohin ich die beiden Issues mergen soll, damit sie für Carl Benz einsatzbereit sind.

[qeevee]

Das 9patch Bild kann man jetzt auch über das bg attribut in der Map Mission einstellen.